第一章:CSS和文档
html是结构化语言,css是样式语言,html主要用来被强大的搜索引擎更好的索引,更好的让一个盲人通过语音浏览器来了解我们的网页,这也就是为什么说html是结构话语言,因为这是W3C规定的,大家都在遵循,统一的标准会给所有人带来便利(比如上面提到的盲人)。
从web的衰落开始谈起,当时web只是用简单的html来编写,大量的流行,为了更好的展示,于是出现了一些<font>,<center>等用来表现的标签,使得html非常的混乱。1996年,CSS已经成为一个成熟的推荐草案,它就是我们的救星,也就是上面说到的样式语言,顾名思义,就是用来改变网页的样式的,因为有了css强大的改变样式,开始从html中去除样式元素,例如 <font>、<center>,这也就是我们现在在写html代码中,尽量不要去使用的原因。
元素》元素是文档结构的基础,每一个元素都会生成一个Box(盒子)。元素分为替换和非替换元素,替换元素(replace element )是指用来替换元素内容的部分并非由文档内容直接表示。 例如:img、input,非替换元素,意味着内容是由用户代理(通常是一个浏览器),在元素本身生成的框中显示。元素显示角色:块级元素,行内元素,行内元素不会在它之前或之后生成“分隔符”,块级元素不能继承自行内元素。
link 标记,css 使用这个标记来连接样式表和文档,外部样式表不能包含有任何html代码,只能包含css规则和css注释。属性rel(relation) 代表关系,关系为 stylesheet ,type总是 text/css ,这个值描述了使用link加载的数据的类型,href 属性的值是样式表的URL,可以是相对和绝对路径。media 属性,目前支持的就三个值:all 、print和 screen,all 、说明这个样式表应用于所有表现媒体,print 、 为视力正常的用户打印文档时使用,另外还会在显示文档的“打印预览”时使用,screen 在屏幕媒体(如桌面计算机监视器)中表现文档时使用,在这种系统上运行的所有web浏览器都是屏幕媒体用户代理,可以在多个媒体中,使用一个样式表,中间用逗号分隔,可以在多个媒体中,使用一个样式表,中间用逗号分隔。
候选样式表: rel 的属性值为 alternate stylesheet ,可以定义候选样式表,只有用户选择这个样式表才会用于文档表现。style 元素,可以用style元素包含样式表,[email protected],@import 出现在样式表的开头,可以(一般)在css中引入。内链(内部自带)样式,在html中使用 style 设置一个内链样式。在使用中由于浏览器的不同,导致无法某些标记,向后可访问性,为了防止浏览器无法识别的标记,建议用 <!– 和 –> 将其包含。
小结,利用CSS 会完全改变用户代理表现元素的方式,内链样式和外部样式的区别,外部样式使网站的所有信息都放在一个位置,不仅使网络的更新和维护相当容易,还有助于节省宽带,因为文档中去除了所有表现信息。在本节中提到了 display 用法,display 规定元素应该生成的框的类型,inline 此元素会被显示为内链元素,元素前后没有换行符,block 此元素会被显示为块级元素,元素前后会带有换行符,none 此元素不会被显示,list-item 此元素会作为列表显示
第二章:选择器
css基本规则,规则结构,每个规则有两个基本部分,选择器和声明块,声明块由一个或多个声明组成,每个声明则是一个属性对应一个值,告诉我们怎么写css。
元素选择器,最常见的选择器往往是html元素,换句话说,文档的元素就是最基本的选择器。分组,多个元素应用同一个样式,或者向一个元素或一组元素应用工多个样式。选择器分组,例如:h1,h2{color:#999999;},声明分组,例如: h1{color:red;font-size:18px;}。通配选择器(*),类选择器,选择器p.waring 解释为:其class属性包含warning的所有段落。多类选择器,就是html元素可以有多个class值。
如何选择类选择器还是ID选择器,浏览器不会检测html中ID的唯一性,但是如果一个文档中有多个相同ID的值,这回编写DOM脚本困难,例如用 document.getElementById 的时候。我们给那些重要的,只出现一次的,使用ID选择器。
简单属性选择器,选择有class属性的所有h1标签,h1[class]{color:#fff;},对带有alt属性的图像应用某种样式,img[alt]{border:1px solid red;}。还可以根据多个属性进行选择,只需要将属性选择器链接在一起就行,例如 a[href][title]{font-weight:bold;}。根据具体属性选择,例如 a[href=”http://www.baidu.com”]{样式}。根据部分属性属性值选择元素,使用”~=”,img[title~=”good”]{border:1px solid gray;} 选择title中包含good的所有图像。子串匹配属性选择器,
[class*=”test”] 选择 class属性包含子串test的所有元素
[class^=”test”] 选择 class属性以test开头的所有元素
[class$=”test”] 选择 class属性以test结尾的所有元素,子串匹配属性选择器用于任何属性,例如:class,href,alt,title等等。特定属性选择类型,*[lang|=”en”]{color:white;} 这个规则会选择lang属性等于en或者en开头的所有元素,也用于任何属性和值。
使用文档结构:后代选择器,关于后代选择器的一个重要方面,两个元素之间的层次间隔可以是无限的,不论你的嵌套层次有多深。选择子元素,如果你想选择一个任意的后代选择器,使用 大于号(>),选择一个元素的子元素
选择相邻兄弟元素,使用加号(+),它们要有着共同的父元素。
伪类和伪元素,所有伪类和伪元素关键字前面都有一个冒号:,类选择器,ID选择器都适用于伪类。在CSS2.1 中,静态伪类有 link和visited ,动态伪类: focus,hover,active。伪类的顺序通常如下:link-visited-focus-hover-active,警告,IE6 之前只允许动态伪类选择超链接。选择第一个子元素,first-child,IE6之前不支持first-child ,IE7支持。结合伪类:a:link:hover{鼠标指针停留在未访问链接上时},a:visited:hover{鼠标停留在已经访问链接上时},IE6 不能识别这些组合,IE7可以。结合伪类:a:link:hover{鼠标指针停留在未访问链接上时},a:visited:hover{鼠标停留在已经访问链接上时},IE6 不能识别这些组合,IE7可以。
小结,通过选择器来创建css规则,可以使我们的样式表简洁、灵活、缩小文件大小、缩短下载时间。所以我们必须正确的编写选择器,能让用户代理正确的解释选择器。通过学习,让我更了解类选择器,对元素选择器从来用过到了解,伪元素或者伪类的实现,是由用户代理(这里指浏览器)动态构造的。对伪类细节更了解,上面提到的选择器:类选择器-》ID选择器-》元素选择器(基本选择器)-》多类选择器-》简单属性选择器-》后代选择器-》伪类选择器-》伪元素选择器。
第三章:结构和层叠
选择器的特殊性;用户代理会计算选择器的特殊性,将这个特殊性附加到规则中的各个声明,如果声明冲突,那么最高特殊性的声明就会胜出。
一个选择器的特殊性具体如下:
对于选择器中给定的各个ID属性值,加 0,1,0,0
对于选择器中给定的各个类属性值、属性选择和伪类加 0,0,1,0
对于选择器中给定的各个元素和伪元素加 0,0,0,1
结合符合通配选择器对特殊性没有任何贡献
内链样式的特殊性 1,0,0,0
通配选择器特殊性,一个选择器中包含通配选择器和其他选择器,改选择器的特殊性不会因通配选择器的出现而改变。用 !important 表现重要性。
继承是css最基本的内容,有些属性不能被继承,例如属性border,0特殊性比无特殊性更强,例如,继承就没有特殊性,通配选择器比他要更强,所以尽量不要使用通配选择器。
层叠,!important 重要性会比内链样式权重高。
在声明权重方面考虑5级,权重由大到小依次为:
1,读者的重要声明(这里指用户)
2,创作人员的重要声明(创作人员指web开发人员)
3,创作人员的正常声明
4,读者的正常声明
5,用户代理声明
在CSS2中,认为style属性声明出现在文档样式表的最后。
非css表现提示,例如font元素,被处理为特殊性为0,只要有创作人员样式,并出现在创作人员样式的前面,就会被覆盖
总结:通过学习层叠,通过特殊性和顺序来确定样式的优先级,最后达到文档的表现。
第四章:值和单位
在利用CSS能做的所有工作中,其基础都是单位。例如:数字,百分数,颜色,命名颜色,用RGB指定颜色,函数式RGB颜色rgb(color),十六进制RGB颜色,web安全颜色,长度单位。绝对长度单位:英寸(in),厘米(cm),毫米(mm),点(pt),派卡(pc),相对长度单位:相对单位是因为它们是根据其他事物的关系来度量的。有三种相对长度单位,em,ex,px。 1em=14px,像素理论,像素不是最好的选择,em才是。url绝对路径和相对路径,关键字none,inherit 使一个属性的值与其父元素的值相同。可以在继承的时候使用。
总结:对于这一章了解不是太清楚,可能感觉用的不太多吧,大多都用了px,希望以后能好好的了解下
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/16091.html