CSS的第一个简单实例
可添加于HTML的style标签之中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
|
css规则
选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成
属性（property）是你希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
注释
CSS样式表
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
1
2
3
| <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
|
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
内部样式表
可以使用<style> 标签在文档头部定义内部样式表
1
2
3
4
5
6
7
| <head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
|
内联样式
表现和内容混杂在一起，内联样式会损失掉样式表的许多优势
css语法
背景颜色 (background-color)
1
| body {background-color:#b0c4de;}
|
- 十六进制表示 “#ff0000”
- RGB 比如“rgb(255,0,0)”
- 颜色名称 “red”
背景图像(background-image)
background-repeat repeat-x水平方向平铺
background-position 描述图片位置
1
2
3
| body {background-image:url('paper.gif');}
background-repeat:no-repeat;
background-position:right top;
|
文本对齐方式(text-align)
1
2
3
| h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
|
CSS text-align 实例
2015 年 3 月 14 号
“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
文本修饰(text-decoration)
1
| h2 {text-decoration:overline;}
|
Hello World!
这个段落不受该样式的影响。
文本转换(text-transform)
1
| p.uppercase {text-transform:uppercase;}
|
文本缩进(text-indent)
css字体（fonts)
1
2
3
4
5
| <style>
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
<p class="serif">这一段的字体是 Times New Roman</p>
|
这一段的字体是 Times New Roman 好的没改成功 fine~(‾◡◝)
字体样式(font-style)
1
2
3
| p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
|
字体大小(font-size) 多少多少px pt
CSS 链接
1
2
3
4
| a:link {color:#000000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}
|
实例：
这是一个链接
注意： a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。
注意： a:active 必须在 a:hover 之后。
还可添加文本修饰，背景颜色
1
2
3
4
| a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
|
CSS列表
无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol - 列表项的标记有数字或字母
1
2
3
4
5
6
7
8
| 先定义style
ul.a {list-style-type:circle;}
再定义body
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
|
CSS表格
使用 CSS 可以使 HTML 表格更美观。