《CSS知识点总结》由会员分享，可在线阅读，更多相关《CSS知识点总结（13页珍藏版）》请在金锄头文库上搜索。
1、一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(分组) eg:
2、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 color: or
4、ange;伪元素选择器：设置首字母样式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: navy; /*
5、 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. 层叠：具有相同特殊性的靠后的权重大按权重和来源排序：（p79）
6、读者的重要声明创作人员的重要声明创作人员的正常声明读者正常用户代理声明按特殊性排序按顺序排序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%,20
7、%);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,
9、serif;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 inh
10、eritb) 相对大小关键字：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 inhe
11、rit（只对英文有用，对汉语没有影响）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
12、; font-weight: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 文本属性
13、1. 缩进和水平对齐a) 缩进文本：(只能用于块级元素！)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值从父元素继承时，要从父元素计算，而不是子元素上计算。 解决方法 设置一个缩放因子
14、div line-height: 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: 50%; 升高相对于line-height的一半vii. 水平对齐：vertical-align:10px; 上升10px;3. 字间隔和字母间隔a) 字间距：word-spacing:0.5em,可以为正可以为负，（对于汉字不使用呢！）b) 字母间距：letter-spacing:0.2em;可以为
