CSS 基础语法
1.如果属性值是若干单词，则要给其加双引号 eg：p {font-family:"sans serif";}
2.如果要定义不止一个声明，则需要用分号将每个声明分开。 结尾最好也加上一个分号。
3.CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
CSS 高级语法
1.对选择器进行分组用逗号隔开，代表其享有同样的样式 eg：h1,h2,h3,h4,h5,h6{ color: green; }
2. font-family: Times, "Times New Roman", serif;
如果浏览器不支持第一个字体，则会尝试下一个(都用逗号隔开）。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
CSS 派生选择器（上下文选择器）
li strong{ font-style: italic; font-weight: normal; }
上面的选择器代表是li标签中的strong标签才会有此效果，若不在li中的strong并无此效果。
CSS id 选择器
1.
#red{ color：red；}
<p id="red">这个段落是红色的</p>
注意：id 属性只能在每个 HTML 文档中出现一次
2.
id 选择器和派生选择器常常一起用
#sidebar p
{
}//id 是 sidebar 的元素内的段落才应用此样式
即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：
#sidebar p
{
}
#sidebar h1
{
}
与页面中的其他 p 元素明显不同的是，sidebar 内的 p 元素得到了特殊的处理，同时，与页面中其他所有 h2 元素明显不同的是，sidebar 中的 h2 元素也得到了不同的特殊处理。
CSS 类选择器
1.
.center{
} <p class="center">。。。。</p>
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
2.
class 被用作派生选择器
CSS 属性选择器
1.
[title] {
color:red;
}
为带有 title 属性的所有元素设置样式
应用：<p title="hello world">...</p>
[title=W3School]{
border:5px solid blue;
}
应用：
<img title="W3School">...</img>可以应用
<p title="greeting">....</p>无法使用
外部样式表：当样式需要应用于很多页面时，外部样式表将是理想的选择。
每个页面使用 <link>标签链接到样式表。<link> 标签在（文档的）头部
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
注意：文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
内部样式表：当单个文档需要特殊的样式时，就应该使用内部样式表 标签在文档头部定义内部样式表 标签在文档头部定义内部样式表
。
多重样式：如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
外部样式表中：h3 { color: red; text-align:left; font-size:8pt; }
内部样式表中：h3 { text-align:right; font-size:20pt; }
拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color:red;
text-align:right;
font-size:20pt;
CSS 背景
1.可以使用background-color 属性为元素设置背景色。
2.要把图像放入背景，需要使用background-image 属性。
eg：body {
background-image: url(/i/eg_bg_04.gif);
}
3.背景重复
background-repeat 属性：repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。(不允许在任何方向上重复）
4.位置定位(background-position 的默认值是 0% 0%，在功能上相当于 top left。)
background-position 属性:top、bottom、left、right 和 center
a.关键字：top/bottom/left/right/center等
位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。
如果只出现一个关键字，则认为另一个关键字是 center。
b.百分数值
如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。
c.长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
5.背景关联
background-attachment :fixed:防止当文档向下滚动时，背景图像也会随之滚动
6.在一个声明中设置所有背景属性：
body {
background:#00FF00 url(bgimage.gif) no-repeat fixed top;
}
CSS 文本
1.缩进文本(text-indent 属性)
注意：可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素
2.水平对齐（text-align）
text-align:center 与<center>的区别：
<center>不仅影响文本，还会把整个元素居中。
text-align不会影响元素的位置，只是把元素中的文本进行对齐
3.字间隔(word-spacing)
提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：
4.字母间隔(letter-spacing)
字母间隔修改的是字符或字母之间的间隔。
5.字符转换（text-transform) 大小转换等
6.文本装饰(text-decoration):比如下划线/闪烁等
7.处理空白符（white-space）
8.文本方向
direction就是影响块级元素中文本的书写方向
9.设置行高：line-height
CSS字体
1.font-family
只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。
2.字体变形
font-variant 属性可以设定小型大写字母
3.字体加粗
font-weight
css链接
1.
2.text-decoration 属性大多用于去掉链接中的下划线;
3.background-color 属性规定链接的背景色;
3.
CSS 列表
1.list-style-type可以改变列表项的标志类型（比如前面的圆点）
2.list-style-image可以将前面的标志替换为图像
CSS 表格
1.表格边框默认为两条线，border-collapse 属性设置是否将表格边框折叠为单一边框。
border-collapse:collapse;表示为单一边框。
2.表格文本对齐
text-align 属性设置水平对齐方式
vertical-align 属性设置垂直对齐方式
3.empty-cells:hide;表示隐藏表格中的空白格
CSS 轮廓（位于边框边缘的外围，可起到突出元素的作用）
CSS 内边距（padding）
1.接受长度值或百分比值，但不允许使用负值。
2.上、右、下、左的顺序分别设置各边的内边距
3.。若用百分数值，则是相对于其父元素的 width 计算的。
4.CSS 边框
border-style：定义样式（可以为各边定义不同的样式）
border-width:定义边框宽度{
指定长度值 / 使用 3 个关键字之一【 thin 、medium（默认值） 和 thick。】
}（可以为各边定义不同的宽度）
注意：如果没有定义边框样式（style），即使定义了边框宽度（width），也没有效果，因为首先就没有边框。
border-color：边框颜色（如果没有为边框声明颜色，它将与元素的文本颜色相同）
css外边距（margin）
1.margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。若用百分数则是相对于父元素的 width 计算的。
2.margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。
注意！！！在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。
CSS 外边距合并
(当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者)
注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
网友评论