本文详细介绍了CSS3的基本概念和主要特性，包括字体、颜色、背景、浮动等属性，以及样式规则的应用。深入讲解了选择器的类型，如标签选择器、类选择器、ID选择器和通配符选择器。此外，还涵盖了复合选择器、文本外观属性的新增功能，如阴影、溢出处理和文本装饰。最后，探讨了CSS3的层叠性和继承性，以及如何设置文本阴影和省略号效果。这是一篇全面的CSS3学习指南。
CSS3简介
CSS概述
font：属性值;（字体属性）
color：属性值;（颜色属性）
background：属性值;（背景属性）
float：属性值；（浮动属性）
CSS样式规则
选择器
{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
其中，属性和属性值以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分。
CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。
如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。
行内式：
也称为内联样式，是通过标记的style属性来设置元素的样式。
基本语法格式：
<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标记名>
内嵌式：将CSS代码集中写在HTML文档的
<head>头部标记中，并且用<style>标记定义。
基本语法格式：
<head>
<style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
链入式：
是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标记将外部样式表文件链接到HTML文档中。
基本语法格式：
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>
CSS基础选择器
标签选择器：
是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。
基本语法格式：
标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类选择器：（常用）
类选择器使用“.”（英文点号）进行标识，后面紧跟类名。
类名的第一个字符不能使用数字，并且严格区分大小写，一般采用小写的英文字符。一个元素可以应用多个类，类名之间用空格隔开。
基本语法格式：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
id选择器：（常用）
使用“#”进行标识，后面紧跟id名，元素的id名是唯一的，只能对应于文档中某一个具体的元素
基本语法格式如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
通配符选择器：
用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
基本语法格式：
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
CSS复合选择器
标签指定选择器：又称交集选择器（常用）
由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special或p#one。
后代选择器：
用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
并集选择器：（常用）
是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。
字体样式属性：（常用）
font-size属性用于设置字号。（常用单位px：像素）
font-family属性用于设置字体。（常用的字体有宋体，微软雅黑，黑体等）
font-weight属性用于定义字体的粗细。
值 描述
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100~900 定义由细到粗的字符。其中400等同于normal，700等同于bold，值(100的整数倍)越大字体越粗。
font-style属性用于设置字体（字体变化）。（可设置斜体，倾斜，正常字体）
normal：默认值，浏览器会显示标准的字体样式;
italic：浏览器会显示斜体的字体样式;
oblique：浏览器会显示倾斜的字体样式;
font属性用于对字体样式进行综合设置。（常用）
使用font属性时，必须按下边的语法格式中的顺序书写，各个属性以空格隔开。其中font-size和font-family不能省略。
语法格式：
选择器{font: font-style font-weight font-size/line-height font-family;}
@font-face属性用于定义服务器字体。
语法格式：
@font-face{
font-family:字体名称;
src:字体路径;
}
word-wrap属性用于长单词和URL地址的自动换行。
当word-wrap属性值为break-word时，URL地址会沿边框自动换行。
语法格式：
选择器{word-wrap:属性值;}
值 描述
normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。
color属性用于定义文本的颜色，其取值方式有如下3种：
预定义的颜色值，如red，green，blue等。
十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式
RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。
letter-spacing属性，其属性值可为不同单位的数值，允许使用负值，默认为normal。
word-spacing属性用于定义英文单词之间的间距，对中文字符无效。
word-spacing属性用于定义英文单词之间的间距，和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。
line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。（常用）
line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。
text-transform属性用于控制英文字符的大小写。
其可用属性值如下：
none：不转换（默认值）。
capitalize：首字母大写。
uppercase：全部字符转换为大写。
lowercase：全部字符转换为小写。
text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果。
其可用属性值如下：
none：没有装饰（正常文本默认值）。
underline：下划线。
overline：上划线。
line-through：删除线。
text-align属性用于设置文本内容水平对齐，相当于html中的align对齐属性。
其可用属性值如下：
left：左对齐（默认值）
right：右对齐。
center：居中对齐。
text-indent属性用于设置首行文本的缩进。
其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
white-space属性可设置空白符的处理方式。
其属性值如下：
normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。
pre：预格式化，按文档的书写格式保留空格、空行原样显示。
nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记<br />。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。
十六进制颜色值是由#开头的6位十六进制数值组成，每2位为一个颜色分量，分别表示颜色的红、绿、蓝3个分量。当3个分量的2位十六进制数都各自相同时，可使用CSS缩写。例如#FF6600可缩写为#F60。
CSS新增文本外观属性
text-shadow：使用text-shadow属性可以为页面中的文本添加阴影效果。
语法格式：
选择器{ text-shadow:h-shadow v-shadow blur color; }
blur为阴影模糊的距离，可选属性。
text-overflow：text-overflow属性用于标示对象内溢出的文本。
语法格式：
选择器{text-overflow:属性值;}
text-overflow属性的常用取值有两个：
clip：修剪溢出文本，不显示省略标记“…”。
ellipsis：用省略标记“…”标示被修剪文本，省略标记插入的位置是最后一个字符。
设置省略标记标示溢出文本的具体步骤如下：
1.为包含文本的对象定义宽度。
2.应用“white-space:nowrap;”样式强制文本不能换行。
3.应用“overflow:hidden;”样式隐藏溢出文本。
4.应用“text-overflow:ellipsis;”样式显示省略标记。
阴影叠加效果：
可以使用text-shadow属性给文字添加多个阴影，从而产生阴影叠加的效果，方法为设置多组阴影参数，中间用逗号隔开。
例如：为段落文本p添加多个阴影
P{
font-size:32px;
text-shadow:10px 10px 10px red,20px 20px 20px green;
/红色和绿色的投影叠加/
}
CSS高级特性
CSS层叠性：指多种CSS样式的叠加。
CSS继承性：指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号。
并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：
边框属性（border） 定位属性
内/外边距属性（margin/padding） 布局属性
背景属性（background） 元素宽高属性
权重记忆口诀：从0开始，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个元素选择器，或者伪元素+1，通配符+0。
CSS优先级：
继承样式的权重为0。
行内式（内嵌式）优先。
权重相同时，CSS遵循就近原则。
CSS定义了一个!important命令，该命令被赋予最大的优先级。
补充知识点
<ul>
<li></li>
</ul>
在<ul></ul>其标签内部不可以定义任何其他的标签。属于块级元素。
表格标签：
<table>
<caption></caption> 属于表格的标题。
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
其中跨行元素为rowspan,如需要跨两行，则rowspa=2
跨列元素为colspan，用法与跨行类同。
好了，以上就是本次整理出来的笔记，大部分都是常用常见知识点，可供个人学习与参考。
扫一扫
327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
