> 웹 프론트엔드 > HTML 튜토리얼 > css权威指南--笔记

css权威指南--笔记

WBOY
풀어 주다: 2016-05-30 16:59:47
원래의
1380명이 탐색했습니다.

第1章 css和文档

    1,元素:替换元素(img input),非替换元素(大多数span)。

    2,link:rel(代表关系:stylesheet,候选样式表:alternate stylesheet);type(text/css);media:(all(所有表现媒体, screen,print),title(配合候选使用)。

    3,@import url(sheet1.css) 需在style内使用,放在其他css规则之前。

    4,向后可访问性:,这样较老浏览器会将style忽略,能理解css的浏览器能正常读取样式表。

    5,css注释:/* */。

第2章 选择器

    1,对声明分组时,一定要在各个声明的最后使用分号。

    2,p.warming.help {background:red;} 只匹配class包含warming和help的p元素,如果p包含warming和其他的则不能匹配。

    3,实际上,浏览器并不检查html中id的唯一性,但这会导致编写dom更困难。

    4,属性选择器:h1[class] {...} 

                         h1[class=''] {...}完全匹配

                         h1[class~=''] {...}部分匹配 [class^='']以什么开头 [class$='']以什么结尾 [class*='']包含什么的所有元素

                         *[lang|='en']特定属性选择器,会选择lang属性等于en或以en-开头的所有元素。

    5,选择子元素:h1>strong;选择相邻兄弟元素h1+p(h1和p有共同父元素,最终选择p)。

    6,链接伪类:未访问链接:link,访问过链接:visited(它们都是静态的),等同于

         动态伪类:焦点:focus,鼠标停留:hover,激活:active。(动态伪类可以用于任何元素)

         建议伪类顺序:link-visited-focus-hover-active。

         选择第一个子元素(:first-child),很容易误解,是所有第一个子元素(在下面例子中,作为第一个子元素的元素包括第一个p,第一个li和strong及em)。

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span>     <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>helooo<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span>     <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span>         <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>111<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span>         <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>222<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span>     <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span>     <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 8</span>         <span style="color: #0000ff;"><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>333<span style="color: #0000ff;"></span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 9</span>     <span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span>
로그인 후 복사

        根据语言选择(:lang()),如*:lang(fr){color:red;} 这是将所有法语元素变成红色。

        伪元素选择器:首字母:first-letter,用户代理动态构成假象元素

                            第一行:first-line;

                            之前和之后:before :after。

第3章 结构和层叠

    1,实际上,所有样式冲突的解决都是由层叠来处理。

        选择器的特殊性:id选择器(0,1,0,0);类 属性 伪类(0,0,1,0);各个元素和伪元素(0,0,0,1);通配选择器(0,0,0,0);内联样式(1,0,0,0)。

        重要性:!important放在声明的结束分号之前。

    2,例外:应用到body元素的背景样式可以传递到html元素(html是文档的根元素),相应的可以定义其画布。

        大多数框模型属性都不能继承(包括外边距 内边距 背景 边框),继承的值没有特殊性,0特殊性比无特殊性要强。

    3,声明权重由大到小:读者的重要声明>创作人员的重要声明>创作人员的正常声明>读者的正常声明>用户代理声明。 

        通过将伪类链接在一起,可以缓解特殊性和顺序带来的问题。

第4章 值和单位

    1,函数式rgb颜色:rgb(color),color用一个百分数(0%-100%)或者整数三元组(0-255)表示。

        十六进制rgb颜色:将三个介于00-FF的十六进制数连起来,就可以设置一种颜色。

        web安全颜色:在256色计算机系统上总能避免抖动的颜色。rgb值20%和51的倍数,0% 0也是,十六进制值00,33,66,99,cc,ff。

    2,绝对长度单位:in cm mm pt pc。

        相对长度单位:1个em定义为一种给定字体的font-size值(这个值随元素的不同而不同),ex指所用字体中小写x的高度,px非常适合用于度量图像大小(一小网格就是1像素)。

    3,a{color:inherit}可以让链接使用继承的color值而非用户代理的默认样式。

    4,角度值:度(deg),梯度(grad),弧度(rad),都允许度数。

        时间值:ms,s,不允许负值。

        频率值:Hz,MHz,不允许负值。

 

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿