CSS 3讲义.docx
《CSS 3讲义.docx》由会员分享，可在线阅读，更多相关《CSS 3讲义.docx（66页珍藏版）》请在冰豆网上搜索。
CSS3讲义
CSS概述
层叠样式表CSS（CascadingStyleSheet），是一个文本文件，其中包含一个或多个（通过属性和值）决定网页某个特定元素如何显示的规则，用来控制网页的样式和布局。
CSS3包含了圆角、阴影效果、文字阴影、自定义字体、旋转文本、不透明背景颜色、多图像背景、渐变等新功能。
1、CSS的作用
第一，简化网页的代码，提高访问速度。
外部的CSS文件会被浏览器保存在缓存里，加快下载显示的速度，也减少了需要上传的代码数量。
第二，便于维护。
（1）便于修改网站样式：
只要修改CSS文件，就可改变整个网站的风格特色。
避免一个个网页的修改，大大减少重复劳动的工作量；
（2）可以重用样式。
第三，页面内容和显示样式分离。
2、如何创建CSS?
创建CSS样式表有三种方式：
（1）元素内嵌样式；
（2）文档内嵌样式；（3）外部引入样式。
（1）元素内嵌样式：
即在当前元素的style属性中定义样式。
red;font-size:
50px;">这是一段文本
（2）文档内嵌样式：
在
元素之间创建
这是一段文本
（3）外部引用样式：
先建立外部样式表文件（.css），然后在网页文件的
内使用
链接。
/*style.css*/
@charset"utf-8";
p{
color:
green;
font-size:
30px;
}
这是一段文本
解释：
很多时候，大量的HTML页面使用了同一个组CSS。
那么就可以将这些CSS样式保存在一个单独的.css文件中，然后通过元素去引入它即可。
@charset"utf-8"表明设置CSS的字符编码，如果不写默认就是utf-8。
如果有多个.css文件，可以使用@import导入方式引入.css文件。
只不过，性能不如多个链接。
3、CSS基本语法（构造样式规则）
样式表中包含了定义网页外观的样式规则，每条样式规则都有两个主要部分：
选择器（selector）和声明块（declarationblock）。
选择器决定将格式化应用到哪些元素；声明块（以前花括号开始，以后花括号结束）定义要应用的格式化，声明块内的每条声明（declaration）都是由一个冒号隔开、以分号结尾的属性-值对。
声明的顺序不重要，除非对相同的属性定义了两次。
推荐加入额外的空格和缩进来提高样式表的可读性。
CSS对大小写不敏感，在选择器中对class和id名称也不敏感。
selector{/*选择器,希望定义样式的HTML元素*/
property:
value;/*property（属性）：
样式名称；value（值）：
样式的值*/
property:
value;
}
例如：
为样式规则添加注释：
在CSS中添加注释是很好的习惯，使用注释可以标注样式表的主要区域，或者只是针对某条规则或声明进行解释。
在样式表中使用/*注释内容*/可进行多行注释。
注释可放在样式规则的前面或后面，也可放在声明块内部，但是注释不能嵌套。
通常，将相关的规则放在一起，形成分组，并在每组前面放置一段描述性的注释（使用大写字母和一条下划线可以清楚地标识分组的开始位置），如：
/*GLOBALNAVIGATION
---------------------------------------------------------*/
…rulesforglobalnav…
/*MAINCONTENT
---------------------------------------------------------*/
…rulesformaincontent…
4、理解继承
继承（inheritance）是CSS里一个很重要的概念。
在文档树中，当为某个元素应用CSS属性时，这些属性不仅会影响该元素，还会影响其下的分支元素（下层的元素继承了其祖先元素的属性）。
DOCTYPEhtml>
BlueFlax（Linumlewisii）
TheEphemeralBlueFlax
Iamcontinuallyamazedatthebeautiful,delicateBlueFlaxthatsomehowtookholdinmygarden.
©BlueFlaxSociety.
将HTML页面转换为树形结构后，很容易看出哪些元素是哪些元素的后代。
继承可以简化样式表。
如果某一个元素并没有设置父元素相关的样式，那么就会使用继承机制将父元素的样式集成下来。
样式继承只适用于元素的外观（文字、颜色、字体等），而元素在页面上的布局样式（盒子模型、边框等）则不会被继承。
对于大多数属性来说，可以使用inherit值强制进行继承。
以下属性会被继承：
文本：
color（颜色，a元素除外）；direction（方向）；font（字体）；font-family（字体系列）；font-size（字体大小）；font-type（设置斜体）；font-variant（设置小型大写字母）；font-weight（设置粗体）；letter-spacing（字母间距）；line-height（行高）；text-align（设置对齐方式）；text-indent（设置首行缩进）；text-transform（用于修改大小写）；visibility（可见性）；white-space（用于指定如何处理空格）；word-spacing（字间距）。
列表：
list-style（列表样式）；list-style-image（用于为列表指定定制的标记）；list-style-position（用于确定列表标记的位置）；list-style-type（设置列表的标记）。
页面设置：
orphans（设置当元素内部发生分页时在页面底部需要保留的最少行数）；page-break-inside（设置元素内部的分页方式）；widows（设置当元素内部发生分页时在页面顶部需要保留的最少行数）。
其他：
cursor（鼠标指针）；quotes（用于指定引号样式）。
强制继承布局样式示例：
p{
border:
1pxsolidred;
}
b{
border:
inherit;
}
这是HTML5
4.层叠：
当规则发生冲突时
样式的来源很多。
每个浏览器都有默认样式。
应用样式有三种方式：
①从一个或多个外部文件导入（推荐）；②插入到HTML文档的顶部；③直接应用于代码中特定的HTML元素上。
有时候多条规则会定义元素的同一个属性，CSS用层叠的原则来考虑样式声明，从而判断相互冲突的规则中哪个规则应该起作用。
首先
⑴特殊性规则：
指定选择器的具体程度。
选择器越特殊，规则的优先级越高。
以下选择器的特殊性依次变高：
p{…}，.someClass{…}，.someClass.someOtherClass{…}，#someID{…}。
ID选择器的特殊性最高，不过建议在样式表中多使用类选择器，避免使用ID选择器（降低了样式表的灵活性）。
继承的样式是最一般的，可以被任何其他规则覆盖。
⑵顺序：
如果两个或两个以上的规则拥有相同的特殊性，这时规则的顺序就起决定作用，晚出现的优先级高。
直接应用在HTML元素上的规则被认为比外部样式表中或插入在HTML文档顶部的特殊性相同的规则优先级高。
⑶重要性：
可以声明一条特殊的规则覆盖整个系统中的规则，在某条声明的末尾加上!
important（除非是在特殊情况下，否则不推荐使用这种方法）。
比如：
p{color:
orange!
important;}
⑷编写的样式会覆盖浏览器的默认样式；当两个或两个以上的样式发生冲突时，会应用特殊性高的样式声明，不管它位于样式表的哪个位置；如果两个或两个以上的规则拥有相同的特殊性，这使用后出现的规则，除非其中某条规则标记了!
important。
如果某元素没有直接指定某条规则，则使用继承的值（如果有的话）。
如何确定CSS的优先级？
这里先引入一个机制，分别用4个数字（a，b，c，d）表示优先级组合，比如1，1，1，1和0，1，0，1。
它们的意思分别是：
❑第一个数字（a）表示style属性，优先级最高。
由于一般都是class样式，所以该值一般都是0。
❑第二个数字（b）是该CSS选择器上的id数量的总和，一般都是1个。
❑第三个数字（c）是用在该CSS选择器上的其他属性CSS选择器以及伪类的总和。
这里包括class（.btn）和属性CSS选择器（比如li[id=red]）。
❑第四个数字（d）计算元素（就像table、p、div等）和伪元素（就像first-child等）。
❑通用CSS选择器（*）是0优先级。
❑如果两个CSS选择器有同样的优先级，在样式表中后面的那个起作用。
计算下面两个选择器的优先级：
#leftbarli#first{color:
red;}#leftbarli:
first-child{color:
blue;}
结果肯定是第1个比第2个优先级高，因为第1个的优先级是0,2,0,1，而第2个是0,1,0,2。
5.属性的值
每个CSS属性对于它可以接受的哪些值都有不同的规定。
有的属性只能接受预定义的值；有的属性只能接受数字、整数、相对值、百分数、URL或者颜色；有的属性可以接受多种类型的值。
⑴inherit
对于任何属性，如果希望显示地指出该属性的值与对应元素的父元素对该属性设定的值相同，就可以使用inherit值。
例如：
border:
inherit;
⑵预定义的值
大多数CSS属性都有一些预定义值。
例如，float属性可被设为left、right或none。
不需要（也不能）将预定义的值放在引号里（也有一些例外，如超过一个单词的font-family名称，已经要生成的内容）。
例如：
border:
none;
⑶长度和百分数
很多CSS属性的值是长度。
所有长度都必须包含数字和单位（0可以不带单位），并且它们之间没有空格。
例如3em、10px、80%等。
相对长度指的是相对于其他值的单位，有五种：
em（与元素字号挂钩）、ex（与元素字体的“x高度”挂钩）、rem（相对于根元素的文本大小来计算的，这样能更好的统一整体页面的风格。
CSS3新增，目前主流的现代浏览器都很稳定的支持。
）、px（像素，与分辨率挂钩）、%（相对另一值的百分比）。
一个em的长度大约与对应元素的字号相等。
em这种相对性对如今的网站建设来说是至关重要的，尤其是对那些需要适应不同屏幕尺寸的网站来说（响应式设Web计）。
百分数通常是相对于父元素的值，是创建响应式网站的一个强大的工具。
例如：
font-size:
.875em;width:
80%;。
像素（px）并不是相对于其他样式规则的。
在如今设备种类繁多的情况下，已经很难再准确度量一个像素的实际大小了。
某种设备上一个像素的大小不一定与另一种设备上的完全相等。
绝对长度指的是现实世界的度量单位，CSS支持五种绝对长度单位：
in（英寸）、cm（厘米）、mm（毫米）、pt（磅）、pc（pica）。
一般来说，应该只在输出尺寸已知的情况下使用绝对长度（如在打印的页面中使用pt）。
在上述单位中，最常使用的是em、百分数和像素，CSS3推荐使用rem。
你的样式表可以自由组合使用上述单位，即使是在同一条样式规则中，也可以组合使用不同的单位。
⑷纯数字
只有极少数的CSS属性接受不带单位的数字，常见的有line-height、z-index、opacity。
例如：
line-height:
1.5;
⑸URL
有的CSS属性（如background-image属性）允许指定另一个文件（尤其是图像）的URL。
使用url（file.ext），其中file.ext是目标资源的路径和文件名。
规范指出，相对URL应该相对于样式表的位置而不是相对于HTML文档的位置。
background-image:
url（bg-pattern.png）;
⑹CSS颜色
可以使用①预定义颜色关键字（颜色名称，如red等）、②十六进制数表示法（如#FFFFFF）、③十进制数表示法（RGB、RGBA、HSL、HSLA）等格式表示的值为CSS属性指定颜色。
RGBA和HSLA格式可以指定具有一定程度alpha透明度的颜色。
在实际中，十六进制格式最为常见、RGB格式次之。
①颜色名称
16种基本颜色关键字，以及它们对应的十六进制数字值，见下图。
CSS3新增了131个关键字，不过通过十六进制、RGB或HSL等格式可以定义多得多的颜色。
更多的HTML颜色表或CSS颜色表参考：
颜色名称
十六进制代码
十进制代码
含义
black
#000000
0,0,0
黑色
silver
#c0c0c0
192,192,192
银灰色
gray
#808080
128,128,128
灰色
white
#ffffff
255,255,255
白色
maroon
#800000
128,0,0
栗色
red
#ff0000
255,0,0
红色
purple
#800080
128,0,128
紫色
fuchsia
#ff00ff
255,0,255
紫红
green
#008000
0,128,0
绿色
lime
#00ff00
0,255,0
闪光绿
olive
#808000
128,128,0
橄榄色
yellow
#ffff00
255,255,0
黄色
navy
#000080
0,0,128
海军蓝
blue
#0000ff
0,0,255
蓝色
teal
#008080
0,128,128
水鸭色
aqua
#00ffff
0,255,255
浅绿色
②十六进制数
将红、绿、蓝的数字值转化为十六进制，让后将它们合并到一起，再在前面加一个#，就像color:
#59007f;【最佳实践】如果一个十六进制颜色是由三对重复的数字组成，如#ff3344，可缩写为#f34。
③十进制数
RGB：
通过指定红、绿、蓝的量（可使用百分数、0~255之间的数字）来构建颜色。
例如，color:
rgb（89,0,127）;或color:
rgb（35%,0%,50%）;
RGBA：
在RGB的基础上加一个代表alpha透明度（alphatransparency）的A。
alpha透明度允许元素下面的如何东西（如图像、其他颜色、文本等）透过来并与元素混合在一起。
Alpha为0~1之间的小数，alpha设置越接近0，颜色就越透明，0表示完全透明，1表示完全不透明。
如color:
rgb（89,0,127,0.5）;
HSL：
代表色相（hue）、饱和度（saturation）和亮度（lightness）。
其中色相的取值范围为0~360，饱和度和亮度的取值均为百分数，范围为0~100%。
HSL语法为：
property:
hsl（hue,saturation,lightness）;
HSLA语法为：
property:
hsla（hue,saturation,lightness,alpha_transparency）;
例如：
background-color:
hsla（95,100%,28%,.4）;
如何构想HSL：
选择一个0到360之间的色相，并将饱和度设为100%，亮度设为50%，就会得到这种颜色最纯的形式。
降低饱和度，颜色就会向灰色变化。
增加亮度，颜色就会向白色变化；减少亮度，颜色就会向黑色变化。
沿着色相圆环移到的过程中可以得到以下重要的颜色：
红色为hsl（0,100%,50%）;黄色为hsl（60,100%,50%）;绿色为hsl（120,100%,50%）;青色为hsl（180,100%,50%）;蓝色为hsl（240,100%,50%）;紫红色为hsl（300,100%,50%）;HSL色相值沿顺时针改变。
最右边的点为90，最底部的点为180，最左边的点为270，0和360在顶端重合。
6.CSS3前缀
在CSS3的很多新属性推出时，这些属性还处在不太稳定的阶段，随时可能被剔除。
而此时的浏览器厂商为了实现这些属性，采用前缀方法。
各大厂商前缀列表如下：
Chrome、Safari：
-webkit-；Opera：
-o-；Firefox：
-moz-；InternetExplorer：
-ms-。
属性的最低支持版本上，最准确的可以查询这个网站：
。
手机等移动端一般采用的是IOS或安卓系统，基本上是webkit引擎。
比如CSS3的新属性：
box-shadow、border-radius、opacity等，在前面使用中，并没有添加所谓的浏览器厂商前缀。
是因为，这些属性已经在主流浏览器或版本成为了标准。
具体进化步骤如下：
1.属性尚未提出，这个属性所有浏览器不可用；
2.属性被提出，但未列入标准，浏览器厂商通过私有前缀来支持该属性；
3.属性被列入标准，可以使用前缀或不使用前缀来实现属性特性；
4.属性不需要再使用前缀，所有浏览器都稳定支持。
div{/*实验阶段的写法*/
-webkit-border-radius:
50px;-moz-border-radius:
50px;border-radius:
50px;}
如果同时出现四个前缀+一个标准写法，四个前缀是当实验阶段时让四种引擎的浏览器厂商支持自己的私有属性，一个标准写法表示当这个属性列入标准后，使用新版浏览器运行时直接执行这个标准属性。
最后说明：
W3C官方的立场表示实验阶段的属性仅为了测试，未来有可能修改或删除。
而大量的开发者也认为在实际项目中不应该使用前缀，而使用一种优雅降级保证一定的用户体验，而通过渐进增减的方式让新版高级浏览器保证最高的效果。
CSS选择器
四种选择器：
基本选择器、复合选择器、伪元素选择器和伪类选择器。
伪类选择器分为四种类型：
结构性伪类选择器能够根据元素在文档中的位置选择元素。
这类元素都有一个前缀（:
）；UI伪类选择器是根据元素的状态匹配元素；动态伪类选择器根据条件的改变匹配元素；其它伪类选择器。
类型
模式
含义
例子
例子描述（选择）
CSS
基本选择器
*
通用选择器:
所有元素
*
所有元素。
包括和
2
.class
类选择器:
所有类为class的元素
.intro
class="intro"的所有元素。
1
#id
ID选择器:
元素的id等于id的元素
#firstname
id="firstname"的所有元素。
1
element
元素（类型）选择器:
类型为element的元素
p
所有
元素。
1
属性选择器
[attribute]
带attribute属性的元素
[target]
带有target属性所有元素。
2
[attribute=value]
attribute属性值恰为value的元素
[target=_blank]
target="_blank"的所有元素。
2
[attribute~=value]
attribute属性为一组空格分隔的值，且其中之一恰为value的元素
[title~=flower]
title属性包含单词"flower"的所有元素
2
[attribute|=value]
attribute属性为一组连字符分隔的值且（从左边开始）以value开头的元素
[lang|=en]
lang属性值以"en"开头的所有元素。
比如HTML5
2
[attribute^=value]
attribute属性以value开头的元素
a[src^="https"]
src属性值以"https"开头的每个
3
[attribute$=value]
attribute属性以value结束的元素
a[src$=".pdf"]
src属性以".pdf"结尾的所有
3
[attribute*=value]
attribute属性值在某处包含value的元素
a[src*="abc"]
src属性中包含"abc"子串的每个
3
复合选择器
按上下文选择
E,F
分组选择器:
同时选取多个元素E、F
div,p
所有
和所有
元素
1
E F
后代选择器:
作为E元素后代的F元素
divp
内部的所有
元素
E>F
子选择器:
作为E元素子元素的F元素
div>p
父元素为
的所有
元素
2
E+F
相邻同胞选择器:
紧接E元素后面的F元素
div+p
紧接在
之后的所有
2
E~F
普通同胞选择器:
位于E元素后的所有F元素
p~ul
前面有
元素的每个
元素3
伪元素选择器
:
:
first-letter
块级首字母:
E元素在格式上的第一个字母
p:
:
first-letter
每个
元素的首字母。
1
:
:
first-line
块级首行:
E元素在格式上的第一行
p:
:
first-line
每个
元素的首行。
1
:
:
before
文本前插入:
E元素之前的生成内容
a:
:
before{
content:
'点击';}
在每个的内容之前插入内容
2
:
:
after
文本后插入:
E元素之后的生成内容
在每个
的内容之后插入内容
2
:
:
selection
匹配元素中被用户选中或处于高亮状态的部分
:
:
selection
被用户选取的元素部分。
3
伪类选择器
结构性伪类
:
root
根元素选择器:
文档根元素
:
root
文档的根元素。
3
:
first-child
第一个子元素选择器:
父元素的第一个子元素
p:
fir
展开阅读全文
相关搜索