-
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;} /*加下划线*/
更多:链接框、字体等