1、CSS知识点总结一Css分类1.替代replaced elements: img input(radio button, checkbox, text)不可替代nonreplaces elements: html,xhtml,span,a,div,body,form,p,em,strong,2.block-level and inline-level:(block可以包含inline 元素，反过来是不可以的！)block-level:p div li ulinline-level: a span strong em b i u2选择器2.元素选择器：P3. Grouping Selectors
2、(分组) eg:h2, p color: gray;4.The universal selector（通配选择器） eg:* color: red;5. Grouping Declarations eg:h1 font: 18px Helvetica; color: purple; background: aqua;6.类选择器：.ddd7.ID选择器：#ddd8.属性选择器简单属性选择h1class color: silver;根据具体属性值pclass=warning font-weight: bold;根据部分属性值选择pclass=warning font-weight: bold;子
3、串匹配属性选择器foo=barfoo$=barfoo*=bar特定属性选择类型*lang|=en color: white;9.使用文档结构后代选择器blockquote b, p b color: gray;选择子元素h1 strong color: red;选择相邻兄弟元素h1 + p margin-top: 0;10.伪类选择器静态伪类：a:visiteda:link(好像用不了)动态伪类：a:focus(常用于input元素)a:hovera:active选择第一个子元素：Li:first-child根据语言选择（）*:lang(fr)结合伪类：link:hover:active co
4、lor: orange;伪元素选择器：设置首字母样式li:first-letter color:Red; 设置第一行的样式： .aa:first-line color:Purple;设置之前和之后元素的样式：a:before content:; color:Silver; a:after content:end; color:Aqua;3结构和层叠1.特殊性：重要性：!Important (最强悍！) eg: p.dark color: #333 !important; background: white; 内联样式特殊性：1000ID选择器：0100 li#answer color: nav
5、y; /* 0,1,0,1 (winner) */类属性值，属性选择或伪类：0010 h2.grapecolor: purple;/* 0,0,1,1 (winner)*元素和伪元素：0001 h1 color: red; /* 0,0,0,1 */通配选择器：0000结合符:无继承：无 （0特殊性比无特殊性的更强） Eg: * color: gray; (（当h1中有其他元素时win） h1#page-title color: black;2.继承a) Border：没有继承b) Body:可以向上继承到html,其他的都是向下继承3.层叠：具有相同特殊性的靠后的权重大按权重和来源排序：（p
6、79）读者的重要声明创作人员的重要声明创作人员的正常声明读者正常用户代理声明按特殊性排序按顺序排序Lvha顺序比较重要：即live visited hover active四值和单位1.数字2.百分数3.颜色命名颜色：blue green white red black maroon .用GRB指定颜色函数式RGB颜色(百分数法：0%-100%，数字法：0-255)Eg:rgb(100%,100%,100%)rgb(0%,0%,0%)rgb(255,255,255)rgb(0,0,0)灰度表：p.one color: rgb(0%,0%,0%);p.two color: rgb(20%,20%
7、,20%);p.three color: rgb(40%,40%,40%);p.four color: rgb(60%,60%,60%);p.five color: rgb(80%,80%,80%);p.six color: rgb(0,0,0);p.seven color: rgb(51,51,51);p.eight color: rgb(102,102,102);p.nine color: rgb(153,153,153);p.ten color: rgb(204,204,204);25%*255=63.75=64十六进制RGB颜色Web颜色：rgb值20%和52和33（十六进制）整除4.
8、长度单位a) 绝对长度单位：in,cm,mm,pt(点),pc（派卡）1in=2.54cm 1cm=0.3394in1 in=72pt 1 in=6pcB) 相对长度单位Em和ex:Px:1em=14px 1em=2exEm最好的度量单位5.URL绝对URL相对URL注意：url和开始括号之间不能有空格6.关键字None:不同于0，Inherit:它的属性值和父元素相同7.css2单位：p(110)a) 角度值：deg, grad 和 radb) 时间值：s,ms 1000ms=1sc) 频率值：hz,mhz5字体1.字体系列制定字体系列：p font-family: TimesNR, ser
9、if;p font-family: Times, TimesNR, New Century Schoolbook, Georgia,New York, serif;有空格、包括“#”和”$”的时候加“单引号”Cursive必须加“双引号”2.字体加粗a) Font-weight:bold bolder mormal 100 -900 lighterb) 相对大小关键字:Bolder 是相对于父级字体粗细而言3.字体大小a) Font-size:xx-small x-small small medium large x-large xx-large smaller larger inheritb
10、) 相对大小关键字：larger smallerc) 绝对大小：xx-small x-small small medium large x-large xx-larged) 百分数：根据父元素继承的大小来计算strong font-weight: lighter; font-size:larger; strong b font-weight:lighter; font-size:200%;4.风格和变形a) 字体风格：Font-style:italic oblique normal inheritb) 字体变形：font-variant:small-caps normal inherit（只对
11、英文有用，对汉语没有影响）c) 转换大小写：p text-transform:uppercase;5.拉伸和调整字体a) 字体拉伸：font-stretch:normal | wider | narrower | ultra-condensed | exTRa-condensed | condensed | semi-condensed | semi-expanded | expanded | exTRa-expanded | ultra-expanded | inheritb) 我的浏览器不支持（可以忽略）6.Font属性a) 等价：h1 font-style:inherit; font-w
12、eight:bold; font-variant:small-caps; font-size：20px; font-family:Candara, Corbel;h1 font:inherit bold small-caps 20px Candara, Corbel; b) 注意;前两个可以互换，后两个不可以，normal 可以省略c) 增加行高：line-height,Eg：body font-size: 12px;h1 font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sans-serif;7.字体匹配6文本属性1.缩进和水平对齐a
13、) 缩进文本：(只能用于块级元素！)text-indent:3em 10%b) 水平对齐：(只能用于块级元素！)text-align:left center right justify(两端对齐文本) inherit 2.垂直对齐：元素中文本基线之间的最小距离a) Line-height:”line-height”减去“font-size”等于行间距i. Line-height:18px,0.33in,150%,1.5emii. 适用于所有元素iii. 行高和继承：Line-height值从父元素继承时，要从父元素计算，而不是子元素上计算。 解决方法 设置一个缩放因子 div line-hei
14、ght: 1.5;b) 垂直对齐文本：vertical-align;(只用于行内高度)baseline | sub | super | top | text-top | middle | bottom | text-bottom | | | inheriti. 只用于行内高度、替代元素和表单元格，不能继承ii. 上标和下标Sub:下标，super:上标iii. 底端对齐：bottom: text-bottom：行内文本的底端比bottom高一点！iv. 顶端对齐：top: text-top:v. 居中对齐：middle(感觉最好)vi. 百分数表示：（）可以为负值vertical-align:
15、 50%; 升高相对于line-height的一半vii. 水平对齐：vertical-align:10px; 上升10px;3.字间隔和字母间隔a) 字间距：word-spacing:0.5em,可以为正可以为负，（对于汉字不使用呢！）b) 字母间距：letter-spacing:0.2em;可以为正可以为负，（对于汉字可以用呢！）c) 间隔和对齐：4.文本转换a) Text-transform:uppercase | lowercase | capitalize | none | inheritb) Capitalize:只对每个单词的首字母大写。（适用于标题！）5.文本装饰a) Text
16、-decoration:none | underline | overline | line-through | blink | inheritb) text-decoration:blink;让文本闪烁。6.文本阴影a) Text-shadow: 颜色 长度 长度 长度（第一和二个长度确定了阴影与文本的偏移距离右，下，第三个长度确定“模糊半径”）i. Eg:text-shadow: silver 2px 2px 2px;p color: white; text-shadow: 0 0 4px black;ii. 长度为负值时阴影落在原文本的左上方b) 处理空白符：white-space:no
17、rmal | nowrap | pre | pre-wrap | pre-line | inheriti. Br元素是换行的意思ii. Normal：正常，没有间隙，没有换行iii. Pre会保留原始的空格iv. Nowrap会阻止换行（行之间有间隙）v. pre-wrap 元素中的文本会保留空白符序列，但是文本行会正常地换行vi. pre-line 仅仅是让有换行，正常文本中一样合并空白符序列，但保留换行符。vii. viii. 文本方向：direction:ltr | rtl | inherit1. 块级元素可以直接使用，文本的书写方向、表中列布局的方向、内容水平填充、两端对齐最后一行的位
18、置，2. 对于行内元素，只有当unicodebidi属性为embed或bidi-override时才会应用direction3. Unicode-bidi:控制字母方向7基本视觉格式化1.基本框2.块级元素a) 水平格式化:wideness?实际宽度是260px(width+padding+margin),可见宽度是220px(width+padding)假如div的width为30em,则内容宽度，内边框，边框或者外边距的总和就是30pxb) 水平属性c) Auto:只有左外边距、右外边距和width的值可以是auto，其它要么设置，要么为0.i. 3个为设定值，会将margin-right
19、强制为auto；ii. 其中有2个为设定值，则第三个为父块宽度减去这两个设定值iii. 其中有2个为auto时， eg:1. 如果是左右边距为auto，它们会设置为相等的长度，因此将元素在其父元素中居中；2. Text-align：center;是针对块级元素而言的，是块级元素内的内容中间对齐;3. 左边距为auto，右边距设为100px，width为auto时，左边距为0.iv. 三个都为auto时，两个外边距为0，width会尽可能的宽。左右边距都为0。v. 如果两个外边距显示地设置，而width设置为auto，width值将设置为所需的某个长度，从而达到需要的总宽度（即父元素的内容宽度）
20、d) 负外边距：依然满足总和为父元素width，但是只有左右两个外边距可以为负，其它都是不可以的。e) 百分数：所有边矩这和为100%，可是边框不能为百分数f) 替换元素：和非替换的一样，就是不能使用width而已，宽度改变方法： g) 垂直属性和水平属性一样一样的。h) 合并垂直外边距：没有边框和内边距的时候使用i) 列表项：i. 除去前面的”.”：list-style:none; ii. 设置“.”的样式：list-style-image:url(); list-style-position:inside; list-style-type:square;3.行内元素a) 增加框属性4.改变
21、元素显示a) 改变元素显示：display:none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inheritb) 行内块元素：display:inline-blockc) Run-in:此浏览器不支持，哈哈5.
22、P元素之间的空格大，div之间的空格小，更适合使用的是div8内边距、边框和外边距1.基本元素框a) 宽度和高度：不可用于行内非替代元素b) Width、height:适用于块级和替换元素c) Margin:top right bottom lefti. 百分数和外边距：相对于父元素的width计算的ii. 值复制：eg:相同：iii. 单边外边距属性：d) Padding:2.外边距a) 外边距和行内元素：外边距可以用于行内边距（但是只有左右有现象，上下没有现象！）3.边框a) 边框：border:有宽度（2px）、样式(none)、颜色(前景色)之分b) 边框和背景：背景会延伸到边框中（我
23、测试的是如此）i. 有样式的边框：border-style:double;1. 可用于按钮啊，什么的；border-style:outset；ii. 多种样式：border-style:dashed dotted double groove;iii. 单边样式：border-top-style,.iv. 边框宽度：和样式差不多c) 边框颜色：i. 透明边框：border-color：transparentd) 简写边框属性：顺序不重要，且可以省略一些值e) 行内元素和边框4.内边距9颜色和背景1.颜色2.前景色a) 影响边框；b) 影响表单元素：c) 颜色可以继承3.背景a) 无继承b) 有一
24、个值是：transparentc) Background-image:none,url(“”)d) 背景图片重叠方式：background-repeat:repeat-x;repeat,repeat-y,no-repeat.十浮动和定位1.浮动（1）float:left,right,none,inherit（2）浮动元素：浮动的图片或者段落等（3）外边距不会合并（4）负外边距：可以到父元素的外面，超过父元素（5）清除：不让自己的身边有漂浮物（针对float的），clear:left,right,both,none(块级元素)2.定位（1）定位属性：position:absolute fixed
25、 relative static position:fixed:将导致所在的元素固定在页面中。（2）包含块：1根元素的包含块：body2非根元素，如果是position是relative 或static,包含块则由最近的块级框、表单元素或行内块祖先框的内容边界构成3非根元素，如果是position是absolute，包含块设置为最近的position值不是static的祖先元素,（3）偏移属性：top,right,bottom,left：长度，百分数，auto,inherit（基于绝对定位的）（4）限制宽度和高度：min-width,min-height。Max-width,max-heigh
26、t（应用于除了非替换行内元素和表元素）（5）内容溢出和剪裁1. 溢出：overflow:visible(默认),hidden，scroll,auto,inherit(应用于块级元素和替换元素)，a) 实验证明：auto最好用！2. 内容裁剪：clip:rect(top,right,bottom,left),auto,inherit3. 元素可见性：visibility:visible,hidden,collapse,inherita) Visibility:hiddem存在但是不可见，display:不可见也不存在b) Margin-left=margin-right:居中（6）Z轴上的放置i
27、. Z-index:auto/inherit/值ii. 改变元素相互覆盖的顺序，是一个用于定位元素（7）固定定位fixed（8）相对定位relative十一表布局1.表格式化（1）表显示值（2）display（3）表层（4）表标题：1. Caption-side：top,bottom2. 应用于：2.表单元格边框a) Border-collapse:collapse,（无间隙）separate(默认，有间隙)，inheritb) 应用于：c) 分隔单元格边框d) 边框间隔：border-spacing:length,inherit(和border-collapse:separate一起使用)i
28、. 如果提供两个值，第一个为水平间隔，第二个为垂直间隔eg:border-spacing:1px 5px;e) 处理空单元格（我的浏览器不支持呢！）i. Empty-cells:show(默认值),hide inheritf) 合并单元格边框3.表大小a) 宽度：table-layout:auto(默认),fixed,inheritb) 固定布局：c) Vertical-align:在表中应用会被忽略！12列表与生成内容1.列表a) 列表类型：list-style-type:circle;i. 用于display:list-itemii. 有继承性b) 列表项图片： list-style-im
29、age:url(App_Themes/default/images/0-item_pic.jpg_b.jpg)，nonei. 用于display:list-itemii. 有继承性iii. Url为绝对路径c) 列表标志位置：list-style-position:inside，outside(默认),inherit;i. 用于display:list-itemii. 有继承性d) 简写列表样式：list-style:type image positin;e) 列表布局：2.生成内容a) 指定内容：content:close-quote no-close-quote no-open-quote normal open-quote inheriti. 应用于：before and :after的伪元素ii. 无继承性iii. 换行用“A” 或者 “00AB”iv. 插入属性值：content:attr(href);b) 计数器：我没有怎么看，觉得不是那么重要！不过要知道有这么个东东！13用户界面样式1.系统字体和颜色a) 系统字体;font:menu,caption,.b) 颜色：color
