本文详细介绍了CSS的注释、选择器使用，如id选择器和class选择器，以及 rgba() 函数的颜色定义。强调了内外部样式表的优先级，并展示了如何链接和应用外部样式表。还涵盖了文本属性、链接样式的四种状态以及背景属性的运用。同时提醒注意CSS代码的可读性和规范性，例如避免在属性值与单位间留空格。
-
CSS注释以 /* 开始, 以 */ 结束
-
为了使可读性更强，可以每行只说明一个属性
rgba() 函数使用红®、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。
tip:透明度（A）取值 0~1 之间， 代表透明度。
选择器
id 选择器
可以为标有特定 id 的 HTML 元素指定特定的样式。
ID属性不要以数字开头
class 选择器
用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
类选择器以一个点"."号显示
可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:
- element>element div>p 选择所有父级是 < div> 元素的 < p> 元素
p.center {text-align:center;}
插入样式表
多重样式优先级
一般情况下，优先级如下：
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
- 外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
/*浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。*/
下面是一个样式表文件的例子：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
tip：
不要在属性值与单位之间留有空格（如：“margin-left: 20 px” ），正确的写法是 “margin-left: 20px”
- 内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
- 内联样式
在相关的标签内使用样式（style）属性
背景属性
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。
文本属性
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
链接样式
- 四种状态
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
/*当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
记忆技巧：LOVE and HATE（L(link)OV(visited)E and H(hover)A(active)TE）
*/
text-decoration 属性主要用于删除链接中的下划线
a:link {text-decoration:none;} /*不加下划线*/
a:link {text-decoration:underline;} /*加下划线*/
更多：链接框、字体等
1271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
