CSS 3讲义.docx

CSS 概述层叠样式表CSS(Cascading Style Sheet )，是一个文本文件，其中包含一个或多个（通过属性和值）决定网页某个特定元素如何显示的规则，用来控制网页的样式和布局。CSS3包含了圆角、阴影效果、文字阴影、自定义字体、旋转文本、不透明背景颜色、多图像背景、渐变等新功能。1、CSS的作用第一，简化网页的代码，提高访问速度。外部的CSS文件会被浏览器保存在缓存里，加快下载显示的速度，也减少了需要上传的代码数量。第二，便于维护。(1)便于修改网站样式：只要修改CSS文件，就可改变整个网站的风格特色。避免一个个网页的修改，大大减少重复劳动的工作量；(2)可以重用样式。第三，页面内容和显示样式分离。2、如何创建CSS?创建CSS样式表有三种方式：(1)元素内嵌样式；(2)文档内嵌样式；(3)外部引入样式。(1)元素内嵌样式：即在当前元素的style属性中定义样式。这是一段文本(2)文档内嵌样式：在元素之间创建元素，通过选择器的方式调用指定的元素并设置相关CSS。 p color: blue; font-size: 40px; 这是一段文本(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）和声明块（declaration block）。选择器决定将格式化应用到哪些元素；声明块（以前花括号开始，以后花括号结束）定义要应用的格式化，声明块内的每条声明（declaration）都是由一个冒号隔开、以分号结尾的属性-值对。声明的顺序不重要，除非对相同的属性定义了两次。推荐加入额外的空格和缩进来提高样式表的可读性。CSS对大小写不敏感，在选择器中对class和id名称也不敏感。selector /* 选择器,希望定义样式的HTML元素 */ property: value; /* property(属性)：样式名称；value（值）：样式的值 */ property: value;例如：选择器h1 background-color: yellow;color: red;声明块属性值声明样式规则为样式规则添加注释：在CSS中添加注释是很好的习惯，使用注释可以标注样式表的主要区域，或者只是针对某条规则或声明进行解释。在样式表中使用 /* 注释内容 */ 可进行多行注释。注释可放在样式规则的前面或后面，也可放在声明块内部，但是注释不能嵌套。通常，将相关的规则放在一起，形成分组，并在每组前面放置一段描述性的注释（使用大写字母和一条下划线可以清楚地标识分组的开始位置），如：/* GLOBAL NAVIGATION- */rules for global nav /* MAIN CONTENT- */rules for main content 4、理解继承继承（inheritance）是CSS里一个很重要的概念。在文档树中，当为某个元素应用CSS属性时，这些属性不仅会影响该元素，还会影响其下的分支元素（下层的元素继承了其祖先元素的属性）。 Blue Flax (Linum lewisii) The Ephemeral Blue Flax I am continually amazed at the beautiful, delicate Blue Flax that somehow took hold in my garden. © Blue Flax Society.将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: 1px solid red; b border : inherit; 这是HTML54. 层叠：当规则发生冲突时样式的来源很多。每个浏览器都有默认样式。应用样式有三种方式：从一个或多个外部文件导入（推荐）；插入到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选择器（比如liid=red）。第四个数字(d)计算元素（就像table、p、div等）和伪元素（就像first-child等）。通用CSS选择器（*）是0优先级。如果两个CSS选择器有同样的优先级，在样式表中后面的那个起作用。计算下面两个选择器的优先级：#leftbar li#first color: red; #leftbar li: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 颜色表参考：/tags/html_ref_colornames.asp 颜色名称十六进制代码十进制代码含义black#0000000,0,0黑色silver#c0c0c0192,192,192银灰色gray#808080128,128,128灰色white#ffffff255,255,255白色maroon#800000128,0,0栗色red#ff0000255,0,0红色purple#800080128,0,128紫色fuchsia#ff00ff255,0,255紫红green#0080000,128,0绿色lime#00ff000,255,0闪光绿olive#808000128,128,0橄榄色yellow#ffff00255,255,0黄色navy#0000800,0,128海军蓝blue#0000ff0,0,255蓝色teal#0080800,128,128水鸭色aqua#00ffff0,255,255浅绿色十六进制数将红、绿、蓝的数字值转化为十六进制，让后将它们合并到一起，再在前面加一个#，就像color: #59007f; 【最佳实践】如果一个十六进制颜色是由三对重复的数字组成，如#ff3344，可缩写为#f34。十进制数RGB：通过指定红、绿、蓝的量（可使用百分数、0255之间的数字）来构建颜色。例如，color: rgb(89, 0, 127);或color: rgb(35%, 0%, 50%);RGBA：在RGB的基础上加一个代表alpha透明度（alpha transparency）的A。alpha透明度允许元素下面的如何东西（如图像、其他颜色、文本等）透过来并与元素混合在一起。Alpha为01之间的小数，alpha设置越接近0，颜色就越透明，0表示完全透明，1表示完全不透明。如color: rgb(89, 0, 127, 0.5);HSL：代表色相（hue）、饱和度（saturation）和亮度（lightness）。其中色相的取值范围为0360，饱和度和亮度的取值均为百分数，范围为0100%。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-；Internet Explorer：-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的元素.introclass=intro的所有元素。1#idID选择器:元素的id等于id的元素#firstnameid=firstname的所有元素。1element元素(类型)选择器:类型为element的元素p所有元素。1属性选择器attribute带attribute属性的元素target带有target属性所有元素。2attribute=value attribute属性值恰为value的元素target=_blanktarget=_blank的所有元素。2attribute=valueattribute属性为一组空格分隔的值，且其中之一恰为value的元素title=flowertitle属性包含单词flower的所有元素2attribute|=valueattribute属性为一组连字符分隔的值且（从左边开始）以value开头的元素lang|=enlang属性值以en开头的所有元素。比如HTML52attribute=valueattribute属性以value开头的元素asrc=httpssrc属性值以https开头的每个3attribute$=valueattribute属性以value结束的元素asrc$=.pdfsrc属性以.pdf结尾的所有3attribute*=valueattribute属性值在某处包含value的元素asrc*=abcsrc属性中包含abc子串的每个3复合选择器按上下文选择E,F分组选择器:同时选取多个元素E、Fdiv,p所有和所有元素1EF后代选择器:作为E元素后代的F元素div p内部的所有元素EF子选择器:作为E元素子元素的F元素divp父元素为的所有元素2E+F相邻同胞选择器:紧接E元素后面的F元素div+p紧接在之后的所有2EF普通同胞选择器:位于E元素后的所有F元素pul前面有元素的每个元素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:first-child:first-child属于父元素的第一个子元素的每个属于父元素的第一个子元素的每个元素2:last-child最后一个子元素选择器:元素的最后一个子元素p:last-child属于其父元素最后一个子元素每个3:only-child唯一子元素选择器:其父元素的唯一子元素p:only-child属于其父元素的唯一子元素的每个 :nth-child(n)第n个子元素选择器:父元素的第n个子元素p:nth-child(2)属于其父元素的第二个子元素的每个:nth-last-child(n)父元素的倒数第n个子元素p:nth-last-child(2)同上，从最后一个子元素开始计数。:first-of-type选择父元素的第一个指定类型的子元素p:first-of-type属于其父元素的首个元素的每个3:last-of-type选择父元素的最后一个指定类型的子元素p:last-of-type属于其父元素的最后元素的每个 3:only-of-type选择只有一个指定类型的子元素的那个子元素p:only-of-type属于其父元素唯一的元素的每个 3:nth-of-type(n)选择特定子元素的第n个元素。p:nth-of-type(2)属于其父元素第二个元素的每个 3:nth-last-of-type(n)选择特定子元素的倒数第n个元素。p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。3动态伪类a:link选取未被访问的链接a元素a:link所有未被访问的链接。1a:visited选取已被访问的链接a元素a:visited所有已被访问的链接。1:focus选取获得焦点的元素input:focus获得焦点的input元素。2:hover选择鼠标指针浮动在上面的元素a:hover鼠标指针位于其上的链接。1:active选择活动(如鼠标按下时)链接元素a:active活动链接。1UI 伪类:enabled状态为有效的用户界面元素（启用状态）。input:enabled每个启用的元素。3:disabled状态为无效的用户界面元素（禁用状态）。input:disabled每个禁用的元素3:checked选中了的用户界面元素(如单选按钮或复选框勾选)input:checked每个被选中的元素。3:default选择默认元素:default从一组类似的元素中选择默认元素3:valid匹配验证有效的input 元素:valid用于匹配输入值为合法的元素3:invalid匹配验证无效的input 元素:invalid用于匹配输入值为非法的元素3:required匹配有required 属性元素:required匹配设置了 required 属性的元素3:optional匹配无required 属性元素:optional用于匹配可选的输入元素3:read-only匹配设置 readonly（只读） 属性的元素:read-only匹配设置 readonly 属性的元素3:read-write匹配可读及可写的元素:read-write匹配可读及可写的元素3:in-range匹配值在指定区间之内的input元素:in-range匹配值在指定区间之内的input3:out-of-range匹配值在指定区间之外的input元素:out-of-range匹配值在指定区间之外的input3其他伪类:not(selector)否定伪类:与简单选择器selector不匹配的E元素:not(p)非元素的每个元素。3:empty没有子元素（含文本结点）的元素p:empty没有子元素的每个（包括文本节点）3:lang(language)lang伪类:语言为language的元素 p:lang(it)带有以it开头的lang属性值的每个元素。2:target目标伪类:作为引用URI目标的E元素#news:target当前活动的#news元素。3CSS盒模型盒子模型是CSS的基石，指定标签如何显示。CSS处理网页时，每个元素都包含在一个不可见的矩形盒子里，占据一定的页面空间。盒子模型由四个要素组成：内容（content，盒子里面所装的内容）、内边距（填充，padding，内容到边框之间的空间）、边框（border，盒子本身，内边距的外边缘）、外边距（空白边，margin，边框外面将元素与相邻元素隔开的不可见区域，即与其他盒子之间的距离）构成，见下图。这类似于挂在墙上的带框的画，其中图画是内容，衬边是内边距，框架是边框，而该画框与相邻画框之间的距离则是外边距。注意：默认情况下，盒子无边框、背景色是透明的，所以看不到盒子。任何web页面都是由很多这样的盒子，通过不同排列组合而成，盒子之间相互影响，要掌握盒子模型需要从以下2个方面去理解：单个盒子的内部结构；多个盒子之间的相互关系。背景内容Content高度height上内边距padding-top下内边距padding-bottom左内边距padding-left右内边距padding-right右边框border-right左边框border-left上边框 border-top上外边距margin-top左外边距margin-left右外边距margin-right下边框border-bottom下外边距margin-bottom宽度width总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距在默认情况下，宽度和高度仅定义内容区域的尺寸。背景会延伸到边框的后面，通常情况下，它仅在内边距所延伸到的区域可见，除非边框是透明的或半透明的。可以使用CSS确定每个元素的盒子的外观和位置，并由此控制网页的布局。宽度、高度和盒模型关于CSS的width属性对元素所显示宽度的影响，有两种处理方式。默认的处理方式，CSS中的宽度指示的是内边距里内容区域的宽度。而元素在浏览器中的显示宽度则是内容宽度、左右内边距和左右边框的总和。显示高度与之类似。另一种方式则更为直观，元素的显示宽度就等于width属性的值。内容宽度、内边距和边框都包含在里面。height 属性与之类似。要使用这种模式，仅需对元素设置box-sizing: border-box;。为文本添加样式字体属性（Font）属性描述CSSfont设置字体属性，格式：是否倾斜|是否加粗|是否转小型大写 字体大小 字体名称;。如果需要，任何font-style、font-variant和font-weight值的组合，接着是必需的font-size、可选的line-height值和必需的font-family，或使用inherit。初始值取决于单独的属性；继承的；font-size和line-height可使用百分数；font-size和font-family是必需的，否则font属性是无效的。例：p font:italic bold 50px 宋体 微软雅黑;1font-family规定文本的字体系列。一个或多个由引号包着的字体名称，接着是可选的表示类属的字体名称，或使用inherit。初始值：取决于浏览器；继承的。例：p font-family: 楷体,微软雅黑,宋体; 1font-size规定文本的字体大小。绝对大小（xx-small、x-small、small、medium、large、x-large、xx-large）、相对大小（smaller、larger）、长度、百分数或inherit。初始值：medium；计算的值是继承的；百分数相对于父元素的字体大小。例：p font-size: 50px; 1font-style规定文本的字体样式。normal(恢复到正常)、italic(斜体)、oblique(让文字倾斜) 或inherit。初始值：normal；继承的。例：p font-style: italic; 1font-variant规定是否以小型大写字母的字体显示文本。normal、small-caps 或inherit。初始值：normal；继承的。例：p font-variant: small-caps; 1font-weight规定字体粗细。normal、bold、bolder、lighter、100、200、300、400、500、600、700、800、900(600 及之后是加粗，之前不加粗)或inherit。初始值：normal；数字值当做关键字而非整数进行处理（例如，不能使用150）；继承的。例：p font-weight: bold; 1font-face设置Web 字体(服务器端字体)。英文字体文件比较小，而中文则很大。所以，少量中文如果想用特殊字体可以使用图片。font-face font-family: abc; src: url(BrushScriptStd.otf); p font-size: 50px; font-family: abc; 3font-size-adjust为元素规定 aspect 值。目前主流浏览器都不支持2font-stretch收缩或拉伸当前的字体系列。目前主流浏览器都不支持2文本属性（Text）属性描述CSScolor设置元素的文本颜色（文本前景色）。颜色值或inherit。初始值：父元素的颜色；有的颜色是由浏览器设置的；继承的。1text-decoration规定添加到文本的装饰效果（大多数为线条）。任何underline、overline、line-through和blink的组合，或none、inherit。初始值：none；不继承的。p text-decoration: underline; 1text-transform设置元素的文本的大小写。Capitalize（每个单词的首字母大写）、uppercase（全部大写）、lowercase（全部小写）、none（按原样）或inherit初始值：none；继承的。p text-transform: uppercase; 1text-align规定文本的水平对齐方式。left、right、center、justify(两端对齐)、start/end(让文本处于开始/结束的边界)、或inherit。初始值取决于浏览器和书写方向；只能应用于块级元素；继承的。1text-shadow为元素的文本添加一个或多个阴影。语法：text-shadow:h-shadow v-shadow blur color; h-shadow：必需。水平阴影的位置。允许负值。v-shadow：必需。垂直阴影的位置。允许负值。Blur：可选。模糊的距离。Color：可选。阴影的颜色。初始值：none；继承的。p text-shadow : 0px 0px 0 rgb(188,178,188),5px 5px 3px black; /多重阴影叠加2text-indent设置文本块首行的缩进。长度、百分数或inherit。初始值：0；只能应用于块级元素；继承的；百分数相对于包含块的宽度p text-indent: 2em; 1text-justify规定当text-align设置为justify时所使用的对齐方法。只有IE支持text-justify属性。3text-overflow规定当文本溢出包含元素时发生的事情。clip(默认值，裁剪文本时不添加“.”省略号)、ellipsis(裁剪文本时添加“.”省略号)或string。初始值：clip。例如：p width: 160px;white-space: nowrap;background: silver;text-overflow: ellipsis;overflow: hidden;3white-space规定如何处理元素中的空白。normal(默认值，空白符被压缩，文本自动换行)、pre(空白符被保留，遇到换行符则换行)、nowrap(空白符被压缩，文本不换行)、pre-wrap(空白符被压缩，文本会在排满或遇换行符换行)、pre-lined(空白符被保留，文本会在排满或遇换行符换行)或inherit。初始值：normal；只能用于块级元素；继承的。1letter-spacing设置字符间距。normal、长度或inherit。初始值：normal；继承的。p letter-spacing: 4px; 1word-spacing设置英文单词间距。normal、长度或inherit。初始值：normal；继承的。p word-spacing: 14px; 1line-height设置行间的距离（行高）。normal、数字、长度、百分数或inherit（不允许使用负值）。初始值：normal；继承的；百分数相对于元素自身的字体大小。pline-height: 200%;1word-break规定非中日韩文本的自动换行规则。normal（使用浏览器默认的换行规则）、break-all（允许在单词内换行）、keep-all（只能在半角空格或连字符处换行）。初始值：normal；继承的。3word-wrap允许对长的不可分割的单词进行分割并换行到下一行。p word-wrap: break-word; 3unicode-bidi设置文本方向。normal、embed或bidi-override。初始值：normal；继承的2direction规定文本的方向/书写方向。ltr、rtl、inherit。初始值：ltr；继承的2text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行。3hanging-punctuation规定标点字符是否位于线框之外。目前主流浏览器都不支持3punctuation-trim规定是否对标点字符进行修剪。目前主流浏览器都不支持3text-emphasis向元素的文本应用重点标记以及重点标记的前景色。目前主流浏览器都不支持3text-outline规定文本的轮廓。目前主流浏览器都不支持3text-wrap规定文本的换行规则。目前主流浏览器都不支持3text-stroke文本描边。只有webkit 引擎浏览器支持，需加上-webkit-前缀。p font-size: 50px; -webkit-text-stroke:1px red; -webkit-text-stroke-color: orange; -webkit-text-stroke-width: 2px; 实验阶段text-stroke-widthtext-stroke-colortext-fill-color文本填充：文本颜色填充感觉和color 属性很像。在配合其他属性才能达到不一样的效果。和CSS3 背景的新特性搭配产生渐变文字：p font-size: 150px;font-family: 黑体;background:-webkit-linear-gradient(top,#eee,#aaa 50%,#333 51%,#000);-webkit-background-clip:text;-webkit-text-fill-color: transparent;内容生成属性(Generated Content Properties)属性说明CSScontent与 :before 以及 :after 伪元素配合使用，来插入生成内容2counter-increment递增或递减一个或多个计数器2counter-reset创建或重置一个或多个计数器2quotes设置嵌套引用的引号类型2crop允许replaced元素只是作为一个对象代替整个对象的矩形区域3move-toCauses an element to be removed from the flow and reinserted at a later point in the document3page-policy判定基于页面的给定元素的适用于计数器的字符串值3超链接(Hyperlink) 属性属性说明（任何主流浏览器都不支持target属性。）CSStarget简写属性设置target-name, target-new,和target-position属性。3target-name指定在何处打开链接（目标位置）3target-new指定是否有新的目标链接打开一个新窗口或在现有窗口打开新标签3target-position指定应该放置新的目标链接的位置3Ruby 属性属性说明（任何主流浏览器都不支持ruby属性。）CSSruby-align控制Ruby文本和Ruby基础内容相对彼此的文本对齐方式3ruby-overhang当Ruby文本超过Ruby的基础宽，确定ruby文本是否允许局部悬置任意相邻的文本，除了自己的基础3ruby-position它的base控制Ruby文本的位置3ruby-span控制annotation 元素的跨越行为3用CSS进行布局尺寸属性（Dimension）属性描述CS