CSS3入门 一、css概述 1、css能够使网页美观、大方，并且升级轻松、维护方便，实现结构与表现的分离。 2、css提供了丰富的样式，例如：字体属性font:属性值；颜色属性 color:属性值； 背景属性 background:属性值； 浮动属性 float:属性值；等等。 3、CSS非常灵活，既可以嵌入在HTML文档中，也可以是一个单独的外部文件。 注意如果是独立的文件，则必须以.css为后缀名。 css3浏览器支持情况 4、由于各浏览器厂商对css3各属性的支持程度不一样，因此在标准尚未明确的情况下，会对厂商的前缀加以区分，通常把这些加上私有前缀的属性称之为“私有属性”。各主流浏览器都定义了自己的私有属性，方便用户更好的体验css的新特征。 注意①运用CSS3私有属性时，要遵从一定的书写顺序，即先写私有的CSS3属性，再些标准的css3属性。 ②当一个css3属性成为标准属性，并且被主流浏览器的最新版本普遍兼容的时候，就可以省略私有的css3属性。 二、CSS核心基础 1、css样式规则：选择器{属性1:属性值1;属性2:属性值2}（选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。其中属性和属性值以“键值对”的形式出现，用英文:链接,键值对用;隔开） 2、注意①CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将”选择器、属性和值“都采用小写的方式。 ②多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留 ③如果属性的值有多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号 ④在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释 ⑤在CSS代码中空格时不被解析的，花括号以及分号前后的空格可有可无。 3、引入CSS样式 （1）行内式：也称为内联样式，是通过标记的style属性来设置元素的样式。 语法格式：<标记名 style=“属性1:属性值1:属性2:属性值2”>内容</标记名> （2）链入式：将所有的样式放在一个或多个以.css为扩张名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中。 语法格式：<head><link href="CSS文件的路径"type="text/css"rel="stylesheet"/></head> (3)内嵌式：将CSS代码集中写在HTML文档的头部标记中，并且用style标记定义。 语法格式：<head><style type="text/css">选择器P{属性1:属性1;属性2:属性值2；}</style></head> 4、CSS基础选择器：将CSS样式应用于特定的HTML元素时，首先需要找到目标元素，CSS选择器起到这个作用。 （1）标记选择器：指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记制定统一的CSS样式。 语法格式标记名{属性1:属性值1;属性2:属性值2;} (2)类选择器：使用“.”进行标识，后面紧跟类名。 语法格式.类名{属性1:属性值1;属性2:属性值2;} (3)id选择器：使用“#”进行标识，后面紧跟id名。 基础语法： #id{属性1:属性值1;属性2:属性值2;} 只能被用一次 （4）通配符选择器：用“*”号表示。它是所有选择器中作用范围最广的，能匹配页面中所有的元素。 语法格式：*{属性1:属性值1;属性2:属性值2;} （5）标签指定选择器：又称交集选择器，由两个选择器构成，其中第一个 为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能又空格。例如：h2.special或p#one等等 （6）后代选择器：用来选择元素或元素组后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格隔开。当标记发生嵌套时，内层标记就成为外层标记的后代。 （7）并集选择器：是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。 三 、文本样式属性 1、字体样式属性 （1）font-size属性用于设置字号，可以使用相对长度单位，也可以使用绝对长度单位。（常用px【像素】） （2）font-family属性用于设置字体，网页中常用的字体有宋体、微软雅黑、黑体等。例如将网页中所有的段落文字的字体设置为微软雅黑，可以使用以下代码：
p{font-family:"微软雅黑"}（3）font-weight属性用于定义字体的粗细 （4）font-style属性用于设置变体（字体变化）：用于定义字体风格，例如设置斜体、倾斜或正常字体。①normal：默认值,浏览器会显示标准的字体样式 ②italic：浏览器会显示斜体的字体样式 ③oblique：浏览器会显示倾斜的字体样式 （5）font属性用于对字体样式进行综合设置，用于定义字体风格
选择器{font:font-style font-variant font-weight font-size/line-height font=family;}（6）@font-face属性用于定义服务器字体。通过该属性开发者可以在用户计算机未安装字体时，使用任何喜欢的字体。
@font-face{font-family:字体名称;src:字体路径;}（7）word-wrap属性用于长单词和URL地址的自动换行、 2、文本样式属性 （1）color属性：用于定义文本的颜色，取值方式有①预定义的颜色 ②十六进制，如#FF0000，#FF6600等。实际工作中，十六进制时最常用的方式 ③RGB代码，如红色可以表示为rgb（255，0，0）或rgb（100%，0%，0%）。 （2）letter-spacing属性：用于定义字间距，所谓字间距就是字符与字符之间的空白。letter-spacing属性，其属性值可为不同单位的数值，允许适用负值，默认为normal。 （3）word-spacing属性用于定义英文单词之间的间距，对中文字符无效。 word-spacing属性用于定义英文单词之间的间距，和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal （4）line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用更多的是像素px。 （5）text-transform属性用于控制英文字符的大小写，属性如下： ①none：不转换（默认值） ②capitalize：首字母大写 ③uppercase：全部字符转换为大写 ④lowercase：全部字符转换为小写。 （6）text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果。 其可用属性值如下：①none：没有装饰（正常文本默认值） ②underline：下划线 ③overline：上划线 ④line-through：删除线 （7）text-align属性用于设置文本内容水平对齐，相当于html中的align对其属性。 其可用属性：①left：左对齐（默认值） ②right：右对齐。 ③center：居中对齐。 （8）text-indent属性用于设置首行文本缩进。 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。 （9）white-space属性可设置空白符的处理方式。 其属性值如下：①normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。 ②pre：预格式化，按文档的书写格式保留空格、空行原样显示。 ③nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。 十六进制颜色值是由#开头的6位十六进制数值组成，每2位为一个颜色分量，分别表示颜色的红、绿、蓝3个分量。当3个分量的2位十六进制都各自相同时，可使用CSS缩写。 CSS3新增文本外观属性 （1）text-shadow：可以为页面中的文本添加阴影效果
选择器{text-shadow:h-shadow v-shadow blur color;}(2)text-overflow：用于标示对象内溢出的文本。
选择器{text-overflow:属性值;}该属性常用的取值：①clip：修剪溢出文本，不显示省略标记“…” ②ellipsis：用省略标记“…”标示被修剪文本，省略标记插入的位置是最后一个字符。 设置省略标记标示溢出文本的具体步骤如下： ①为包含文本的对象定义宽度 ②应用“white-space:nowrap;”样式强制文本不能换行。 ③应用“overflow:hidden;”样式隐藏溢出文本 ④应用“text-overflow:ellipsis;”样式显示省略标记。 可以使用text-shadow属性给文字添加多个阴影，从而产生阴影叠加的效果，方法为设置多组阴影参数，中间用逗号隔开。 例如：为段落文本p添加多个阴影
p{ font-size:32px; text-shadow:10px 10px 10px red,20px 20px 20px green; /*红色和绿色的投影叠加*/ }3、CSS高级特性 （1）CSS层叠加和继承性：层叠性：多种CSS样式的叠加 继承性：指书写CSS样式表时，子标记会继承父标记的某些央视，如文本颜色。 注意：并不是所有CSS属性都可以继承，例如以下属性就不具有继承性： 边框属性、定位属性、内/外边距属性、布局属性、背景属性、元素宽高属性 4、CSS优先级 p标签、strong标签权重值为1，类选择器的权重值为10，id选择器的权重值为100。 继承样式的权重为0 行内样式优先 权重相同时，CSS遵循就近原则 CSS定义了一个！important命令，该命令被赋予最大的优先级。
复合选择器的权重为组成它的基础选择器权重的叠加，但是这种叠加并不是简单的数字之和。
