CSS知识点总结－金锄头文库

资源描述

《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 ul inline-level: a span strong em b i u 二选择器 2.元素选择器

2、： P 3. Grouping Selectors(分组) 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.类选择器： .ddd 7.ID 选择器： #ddd 8.属性选择器简单属性选择 h1class color: silver; 根据具体属性值 pclass=warning font-weight: bold; 根据部分属

3、性值选择 pclass=warning font-weight: bold; 子串匹配属性选择器 foo=bar foo$=bar foo*=bar 特定属性选择类型 *lang|=en color: white; 9.使用文档结构后代选择器 blockquote b, p b color: gray; 选择子元素 h1 strong color: red; 选择相邻兄弟元素 h1 + p margin-top: 0; 10. 伪类选择器静态伪类： a:visited a:link(好像用不了 ) 动态伪类： a:focus(常用于 input元素) a:hover a:active 选择

4、第一个子元素： Li:first-child 根据语言选择（） *:lang(fr) 结合伪类： link:hover:active color: orange; 学习资料收集于网络，仅供参考学习资料伪元素选择器：设置首字母样式 li:first-letter color : Red; 设置第一行的样式： .aa:first-line color : Purple ; 设置之前和之后元素的样式： a:before content : ; color : Silver ; a:after content : end ; color : Aqua; 三结构和层叠 1. 特殊性：重要性： !

5、Important (最强悍！ ) eg: p.dark color: #333 !important; background: white; 内联样式特殊性： 1000 ID选择器： 0100 li#answer color: navy; /* 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 :

6、gray ; (（当 h1中有其他元素时 win） h1#page-title color : black ; 2. 继承 a)Border ：没有继承 b)Body:可以向上继承到 html, 其他的都是向下继承 3. 层叠：具有相同特殊性的靠后的权重大按权重和来源排序：（p79）读者的重要声明创作人员的重要声明创作人员的正常声明读者正常用户代理声明按特殊性排序按顺序排序 Lvha顺序比较重要：即 live visited hover active 四值和单位 1. 数字 2. 百分数 3. 颜色命名颜色： blue green white red black maroon

7、. 用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%); p.three color : rgb(40%,40%,40%); p.four color : rgb(60%,60%,60%); 学习资料收集于网络，仅供参考学习资料 p.five color : rgb(80%,80%,80%); p

8、.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. 长度单位 a)绝对长度单位： in,cm,mm,pt( 点),pc （派卡） 1in=2.54cm 1cm=0.3394in 1 in=72pt 1 in=6pc

9、B) 相对长度单位 Em和 ex: Px:1em=14px 1em=2ex Em最好的度量单位 5.URL 绝对 URL 相对 URL 注意： url和开始括号之间不能有空格 6. 关键字 None:不同于 0， Inherit:它的属性值和父元素相同 7.css2 单位： p(110) a)角度值： deg, grad 和 rad b)时间值： s,ms 1000ms=1s c)频率值： hz,mhz 五字体 1. 字体系列制定字体系列： p font-family: TimesNR, serif; p font-family: Times,TimesNR, New Century Sch

10、oolbook,Georgia,New York,serif; 有空格、包括“ #”和” $”的时候加“单引号” Cursive 必须加“双引号” 2. 字体加粗 a)Font-weight:bold bolder mormal 100 -900 lighter b)相对大小关键字 :Bolder 是相对于父级字体粗细而言 3. 字体大小 a)Font-size:xx-small x-small small medium large x-large xx-large smaller larger inherit b)相对大小关键字： larger smaller c)绝对大小： xx-smal

11、l x-small small medium large x-large xx-large d)百分数：根据父元素继承的大小来计算strong font-weight: lighter; font-size: larger ; strongb font-weight: lighter; font-size: 200% ; 4. 风格和变形 a)字体风格： Font-style:italic oblique normal inherit b)字体变形： font-variant:small-caps normal inherit（只对英文有用，对汉语没有影响）学习资料收集于网络，仅供参考学习

13、 bold ; font-variant: small-caps ; font-size： 20px; font-family: Candara,Corbel ; h1 font : inheritboldsmall-caps20px Candara,Corbel ; b)注意; 前两个可以互换，后两个不可以，normal 可以省略 c)增加行高： line-height, Eg：body font-size: 12px; h1 font : bolditalic200%/1.2 Verdana,Helvetica,Arial,sans-serif; 7. 字体匹配六文本属性 1. 缩进和水

14、平对齐 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.5em ii.适用于所有元素 iii.行高和继承： Line-height值从父元素继承时，要从父元素计算，而不是子元素上计算。解决方法设置一个缩放因子d

展开阅读全文