CSS 知识
一、CSS概述
- CSS是Cascading Styles Sheets的缩写，中文译名为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
- HTML和CSS的关系就是“内容”和“形式”的关系，由HTML组织网页的结构和内容，而通过CSS来决定页面的表现形式
1. CSS语法
CSS样式表由一系列样式规则组成，浏览器将这些规则应用到相应的元素上，下面是一条样式规则。
h1{
color: red;
font-size: 25px;
}
css语法
2. CSS样式规则的组成-----选择器
- 一条CSS样式规则由选择器(selector)和声明(declarations)组成。
- 选择器是为了选中网页中某些元素的，选择器可以是一个标记名，表示将网页中该标记的所有元素都选中，也就是定义了CSS规则的作用对象。
- 选择器也可以是一个自定义的类名，表示将自定义的一类元素全部选中，为了对这一类元素进行标识，必须在这一类的每个元素的标记里添加一个html属性class＝"类名"；
- 选择器还可以是一个自定义的id名，表示选中网页中某一个唯一的元素，同样，该元素也必须在标记中添加一个html属性id＝"id名"让CSS来识别。
3. CSS属性值的写法
- 如果属性的某个值不是一个单词，则值要用引号引起来
p {font-family: "sans serif"}；
- 如果一个属性有多个值，则每个值之间要用空格隔开
a {margin:6px 4px 3px}；
- 要为某个属性设置多个候选值，则每个值之间用逗号隔开
p {font-family: "Times New Roman", Times, serif}；
二、在HTML中引入CSS的方法
- 在HTML中，引入CSS的方法有行内式、内嵌式、导入式和链接式4种
1. 行内式
- html标记都有一个通用的style属性，行内式就是在该属性内添加CSS属性和值，如：
<td style="color: #FF0000; text-decoration: underline" width="88%">
- 有时我们需要做测试或对个别元素设置CSS属性时，可以使用这种方式，这种方式由于CSS属性就在标记内，其作用对象就是标记内的元素。所以不需要指定CSS的选择器，只需要书写CSS属性和值。
-
缺点
没有体现出CSS统一设置许多元素样式的优势。
2. 嵌入式
- 嵌入式将页面中各种元素的CSS样式设置集中写在<style>和</style>之间，<style>标记是专用于引入嵌入式CSS的一个html标记，它只能放置在文档头部，即下面这段代码只能放置在html文档的<head>和</head>之间。
<style>
h1{ color: red; font-size: 25px; }
</style>
- 对于单一的网页，这种方式很方便。但是对于一个包含很多页面的网站，如果每个页面都以嵌入式的方式设置各自的样式，不仅麻烦，冗余代码多，而且网站每个页面的风格不好统一。因此一个网站通常都是编写一个独立的CSS文件，使用以下两种方式之一，引入到网站的所有html文档中
3. 链接式和导入式
- 链接式和导入式的目的都是将一个独立的CSS文件引入到HTML文件，我们在学习CSS或制作单个网页时，为了方便可采取行内式或嵌入式方法，但若要制作网站则主要应采用链接式方法引入CSS。
- 链接式和导入式最大的区别在于链接式使用HTML的标记引入外部CSS文件，而导入式则是用CSS的规则引入外部CSS文件，因此它们的语法不同
链接式是在网页文档头部通过link标记引入外部CSS文件，格式如下：
<link href="style1.css" rel="stylesheet"/>
外部样式表文件书写:
只要将方式一中<STYLE>和</STYLE>之间的定义内容保存成一个以"css"为扩展名的文本文件即可。
- 而使用导入式，则需要使用如下语句：
<style>
@import url("style2.css");
</style>
三、选择器的分类
- 选择器的分类
- 标记选择器
- 伪类选择器
- 类选择器
- id选择器
- 关联选择器
- 组合选择器
1.标记选择器
- CSS标记选择器用来声明哪种标记采用哪种CSS样式，因此，每一种html标记的名称都可以作为相应的标记选择器的名称。
标记选择器将拥有同一个标记的所有元素全部选中。如：
<style>
p{ /* 标记选择器 */
color:blue;
font-size:18px;
}
</style>
2. 伪类选择器
- 所谓伪类就是指标记的状态。
-
网页中的链接标记能响应浏览者的点击。a标记有四种状态能描述这种响应，分别是a:link、a:visited、a:hover、a:active，a标记在这几种状态下的样式能够通过伪类选择器来分别定义，伪类选择器的标记和伪类之间用“:”隔开。其格式为
伪类选择器格式 - 在默认的浏览器浏览方式下，超链接为统一的蓝色并且有下划线，被单击过的超链接则为紫色并也有下划线。
- 动态超链接是通过CSS伪类选择器实现的，因为伪类可以描述超链接在不同状态下的样式，所以我们通过定义a标记的各种伪类具有不同的属性风格，就能制作出千变万化的动态超链接。
-
a标记有四种伪类，用来描述链接的4种状态
a标记的4种伪类
<style>
a {font-size: 14px; text-decoration: none; }
a:link {color: #666666;}
a:visited {color: #996600; }
a:hover {color: #ECBD00; text-decoration: underline;}
a:active {color: #FF3399;}
</style>
<body>
<a href="#">普通链接</a><a href="#">鼠标悬停时链接</a><a href="#">点击过链接</a>
</body>
效果：
效果
通过伪类选择器做动态超链接
- 伪类选择器可以看成是一种特殊的标记选择器，它用来选中在某种状态下的标记
需要注意两点：
1.链接伪类选择器的书写应遵循LVHA的顺序，即CSS代码中四个选择器出现的顺序应为a:link→ a:visited→ a:hover→ a:active，若违反这种顺序鼠标停留和激活样式就不起作用了。
- 各种伪类选择器将继承a标记选择器定义的样式。
a:link选择器只能选中具有href属性的a标记，而a选择器能选中所有a标记，包括用a标记作为锚点。
- P:first-line 首行
- P:first-letter 首字母
3.类选择器
- 标记选择器一旦声明，那么页面中所有该标记的元素都会产生相应的变化。
- 例如当声明<p>标记为红色时，页面中所有的<p>元素都将显示为红色
但是如果希望其中某一些<p>元素不是红色，而是蓝色，就需要将这些<p>元素自定义为一类，用类选择器来选中它们；或者希望不同标记的元素应用同一样式，也可以将这些不同标记的元素定义为同一类。 - 类选择器以半角“.”开头，且类名称的第一个字母不能为数字
p.warning {color: red} <P CLASS=“warning”>
.note { font-size: small } <P CLASS=“note” >
格式
类选择器
- 一个例子
<style>
.one {color: red;}
.two {font-size:20px;}
</style>
<p>选择器之标记选择器1</p>
<p class="one">应用第一种class选择器样式</p>
<p class="two">应用第二种class选择器样式</p>
<p class="one two">同时应两种class选择器样式</p>
<h3 class="two">h3同样适用</h3>
以上定义了类别名的元素都会应用相应的类选择器的样式，其中第四行通过class=“one two”将两种样式同时加入，得到红色20象素的大字体。第一行的p元素因未定义类别名则不受影响
4.id选择器
id选择器的使用方法与class选择器基本相同，不同之处在于一个id选择器只能应用于html文档中的一个元素，因此其针对性更强，而class选择器可以应用于多个元素。
id选择器以半角“#”开头，且id名称的第一个字母不能为数字 。
例如 “#UserName”
-
格式
id选择器格式
<style>
#one{
font-weight:bold; /* 粗体 */
}
#two{
font-size:30px; /* 字体大小 */
color:#009900; /* 颜色 */
}
</style>
<body>
<p id="one">ID选择器1</p>
<p id="two">ID选择器2</p>
<p id=“two”>ID选择器3</p> /*不推荐 ，ID应该唯一*/
<p id=“one two”>ID选择器3</p> /*错误*/
上例中，第一行应用了#one的样式，第二行和第三行将一个id选择器应用到了两个元素上，显然违反了一个id选择器只能应用在一个元素上的规定，但浏览器却也显示了CSS样式风格且没有报错。虽然如此，我们在编写CSS代码时，还是应该养成良好的编码习惯，一个id最多只能赋予一个html元素，因为每个元素定义的id不只是CSS可以调用，JavaScript等脚本语言也可以调用，如果一个html中有两个相同id属性的元素，那么将导致JavaScript在查找id时出错，例如函数getElementById ( )。第四行在浏览器中没有任何CSS样式风格显示，这意味着ID选择器不支持像class选择器那样的多风格同时使用。因为元素和id是一一对应的关系，不能为一个元素指定多个id，也不能将多个元素定义为一个id。类似id="one two"这样的写法是完全错误的。
- 关于类名和id名的大小写：CSS大体上是不区分大小写的语言，但是对于标记实体的类名和id名是否区分大小写取决于标记语言是否区分大小写，如果使用XHTML，那么类名和id名是区分大小写的，如果是HTML，则不区分大小写 。
5.关联选择器
关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。例如， 以下的上下文选择符
P B { background: yellow }
是P B。这个值表示段落中的强调文本会是黄色背景；而其它的强调文本则不受影响。
- 为了减少样式表的重复声明，组合的选择符声明是允许的。例如，文档中所有的标题可以通过组合给出相同的声明:
H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif
}
四、容器标记 <div> 和 <span>
- div和span是不含有任何语义的标记，用来在其中放置任何网页元素，就象一个容器一样，当把文字放入后，文字的格式外观都不会发生任何改变，应用容器标记的主要作用是通过引入CSS属性对容器内元素内容的表现进行设置。
div和span的唯一区别是div是块级元素，span是行内元素
<body> <div style="background-color:#3399ff">块状区域1</div>
<div style="background-color:#99ccff">块状区域2</div>
<span style="background-color:#ffccff">行间区域1</span>
<span style="background-color:#993399">行间区域2</span> </body>
结果预览：
image.png
<div>标记是一个块状的容器，其默认的状态就是占据整个一行。
<span>标记是一个行内的容器，其默认状态是行内的一部分，占据行的长短由内容的多少来决定。
五、CSS的文本属性
- CSS中控制文本样式的属性主要有font-属性类和text-属性类，再加上修改颜色的color属性和行高line-height属性。
- text-indent表示首行缩进，在每段开头空两格通常是用text-indent: 2em;来实现。
- text-decoration: none;表示去掉下划线
- line-height: 150%;表示调整为1.5 倍行间距。
- text-align：这个属性用来设定文本的对齐方式。有以下值：
- left (居左，缺省值)
- right (居右)
- center (居中)
- justify (两端对齐)
示例代码如下：
.p2 {text-align:right}
- text-decoration, 这个属性主要设定文本划线的属性。有以下值：
- none (无，缺省值)
- underline (下划线)
- overline (上划线)
- line-through (当中划线)
示例代码如下：
.p2 {text-decoration: underline overline;}
- text-indent ,这个属性设定文本首行缩进。其值有以下设定方法：
- length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))
- percentage (百分比，相当于父对象宽度的百分比)
示例代码如下：
.p1 {text-indent: 8mm}
- line-height, 这个属性设定每行之间的距离。其值有以下设定方法：
- normal (缺省值)
- length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px))
- percentage (百分比，相当于父对象高度的百分比)
示例代码如下：
.p1 {line-height:1cm}
- 用颜色属性(color)可以改变文本的字体颜色。
示例代码如下：
.p1{color:gray}
-
font-style , 主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：
- 正常 - 正常显示文本
- 斜体 - 以斜体字显示的文字
- 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
实例
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
- font-family属性：字体系列
- font-family 属性设置文本的字体系列。
- font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。
多个字体系列是用一个逗号分隔指明：
实例
p{font-family:"Times New Roman", Times, serif;}
- 三段文字设置不同的字体粗细：
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
- letter-spacing, 这个属性用来设定字符之间的距离。
- normal (缺省值)
- length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))
示例代码如下：
.p1 {letter-spacing: 3mm}
六、CSS的继承性
- CSS具有两个特性：层叠性和继承性。
CSS的继承性 ：是指如果子元素定义的样式没有和父元素定义的样式发生冲突，那么子元素将继承父元素的样式风格，并可以在父元素样式的基础上再加以修改，自己定义新的样式，而子元素的样式风格不会影响父元素。如：
<style>
body {
text-align: center;}
p {
font-size: 24px;
text-decoration: underline;}
em {
color: #FF0000;}
.right{
text-align: right;}
</style>
<body>
<p><em>电子商务</em>教研</p>
<p class=“right"><em>电子商务 </em>教研室</p>
</body>
继承性
- 注意
- 需要注意的是并不是所有的CSS属性都具有继承性，一般是CSS的文本属性具有继承性，而其他属性（如背景属性、盒子属性等）则不具有继承性。
- 具有继承性的属性：color, font-类，text-indent, text-align, text-decoration, line-height, letter-spacing, border-collapse等
- 无继承性的属性：text-decoration:none, 所有背景属性，所有盒子属性,布局属性等
七、CSS的层叠性
- CSS具有两个特性：层叠性和继承性。
层叠性 ：是指当有多个选择器都作用于同一元素时，即多个选择器的作用范围发生了重叠，CSS怎样处理？CSS的处理原则是：
1）如果多个选择器定义的规则不发生冲突，则元素将应用所有选择器定义的样式，即效果累加。如：
<style>
p{ /* 标记选择器 */
color:blue;
font-size:18px;}
.special{ /* 类别选择器 */
font-weight: bold; } /* 粗体 */
#underline{
text-decoration: underline; } /* 有下划线 */
</style>
<p>标记选择器1</p><p>标记选择器2</p>
<p class="special">受到标记、类两种选择器作用</p>
<p id="underline" class="special">受到标记、类和id三种选择器作用</p>
层叠性
2）如果多个选择器定义的规则发生了冲突，则CSS按选择器的优先级让元素应用优先级高的选择器定义的样式。CSS规定选择器的优先级从高到低为：
行内样式 > ID样式 > 类别样式 > 标记样式。总的原则是：越特殊的样式，优先级越高。如：
<style>
p{ /* 标记选择器 */
color:blue;
font-style: italic; }
.green{ /* 类选择器 */
color:green; }
.purple{
color:purple; }
#red{ /* ID选择器 */
color:red;}
</style>
<body>
<p>这是第1行文本</p>
<p class="green">这是第2行文本</p>
<p class="green" id="red">这是第3行文本</p>
<p id="red" style="color:orange;">这是第4行文本</p>
<p class="purple green">这是第5行文本</p>
</body>
选择器的优先级
- 可以通过!important强制改变选择器的优先级，则优先级为!important >行内样式 > ID样式 > 类别样式 > 标记样式
另外，如果在同一个选择器中定义了两条相冲突的规则，则以后一条为准。如果为某一条添加了!important，那么IE6总是以后一条为准，不认!important 。而Firefox/IE7以定义了!important的为准
#box {
color:red!important; /*Firefox执行这一条*/
color:blue; /*IE6执行这一条*/}
八、选择器的组合
- 每个选择器都有它的作用范围，基本的选择器的作用范围都是一个单独的集合
1.复合选择器
复合选择器就是两个或多个基本选择器，通过不同方式组合而成的选择器。主要有:
- 交集选择器
- 并集选择器（组合选择器）
- 后代选择器（关联选择器）
-
交集选择器是由两个选择器直接连接构成，其结果是选中两者各自作用范围的交集。其中第一个必须是标记选择器，第二个必须是类选择器或id选择器。例如：h1.class；p#intro。这两个选择器之间不能有空格。
交集选择器
交集选择器将选中同时满足前后二者定义的元素，也就是前者定义的标记类型，并且指定了后者的类别或id的元素。它的作用范围如图所示
- 举例：
例如由于所有的表单控件都是input标记，如果设置input标记选择器的样式，那么所有的表单控件都会受影响，如果只希望某个表单控件（如提交按钮）受影响，则可用交集选择器input.red{ ……}
input.red { color: #FF0000;}
<input type="submit" name="Submit" class="red" value="提交" />
对于上例IE7、Firefox还支持属性选择器
可不创建red类，直接写
input[type=‘submit’]
-
所谓并集选择器就是对多个选择器进行集体声明，多个选择器之间用“,”隔开。如果某些选择器定义的样式完全相同，或者部分相同，这时便可以利用并集选择器同时声明风格完全相同或部分相同的样式。如h2,.class{…}其选择范围如图所示：
并集选择器
<style>
h1,h2,h3,p {
font-size: 12px;
color: purple;
}
h2.special, .special, #one {
text-decoration: underline;}
</style>
<body>
<h1>示例文字h1</h1>
<h2 class="special">示例文字h2</h2>
<h3>示例文字h3</h3>
<h4 id="one">示例文字h4</h4>
<p class="special">示例文字p1</p>
image.png
-
通配符
如果要对网页中所有的元素进行集体声明可使用通配选择符 *
*{ /* 全局声明 */
color:purple; /* 文字颜色 */
font-size:15px; /* 字体大小 */
}
h2.special, .special, #one{ /* 集体声明 */
text-decoration:underline; /* 下划线 */}
-
在CSS选择器中，还可以通过嵌套的方式，对特殊位置的html元素进行控制，例如当<a>与</a>之间包含<b>……</b>元素时，就可以使用后代选择器选中出现在a元素中的b元素。a为父元素，b为子元素。
后代选择器的写法是把外层的标记写在前面，内层的标记写在后面，之间用空格隔开。其选择范围如图所示：
a b {…}
后代选择器
<style>
a {
font-size: 16px;
color: red;
}
a b {
color: mediumpurple;
}
</style>
<body>
<b>这是b标记中的文字</b><br />
<a href="#">这是<b>a标记中的b<span>标记</span></b></a>
image.png
- <a href="#">这是<b>a标记中的b<span>标记</span></b></a>
和其他所有CSS选择器一样，后代选择器会继承父元素的没有冲突的样式。
后代选择器定义的具有继承性的样式同样也能被其子元素继承。例如在上例中，b元素内又包含了span元素，那么span元素也将显示为淡紫色。这说明子元素（span）继承了父元素（a b）的颜色样式 - 后代选择器的使用非常广泛，实际上不仅标记选择器可以用这种方式组合，类选择器和ID选择器也都可以进行嵌套，而且后代选择器还能够进行多层嵌套。例如：
- .special b { color : red }
- #menu li { padding : 0 6px ; }
- td.top .ban1 strong{ font-size : 16px ; }
-
#menu a:hover b
经验：选择器的嵌套在CSS的编写中可以大大减少对class或id的声明。因此在构建页面html框架时通常只给外层标记（父标记）定义class或id，内层标记（子标记）能通过嵌套表示的则利用这种方式，而不需要再定义新的class或id。 -
CSS优先级总图
image.png
- 复合选择器的优先级比组成它的单个选择器的优先级都要高。我们知道基本选择器的优先级是“ID选择器 > 类选择器 > 标记选择器”，所以不妨设ID选择器的优先级权重是100，类选择器的优先级权重是10，标记选择器的优先级权重是1，那么复合选择器的优先级就是组成它的各个选择器权重值的和。
h1{color:red;} /* 权重=1 */
p em{color:blue;} /* 权重=2 */
.warning{color:yellow;} /* 权重=10 */
p.note em.dark{color:gray;} /* 权重=22 */
#main{color:black;} /* 权重=100 */
当权重值一样时，会采用“层叠原则”，一般后定义的会被应用
