发新帖

渡虎谷告诉你CSS的结构和规则

2939 5
根本语法

        规矩

        任何HTML元素都可所以一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如，



P { text-indent: 3em }

        傍边的选择符是P。



类选择符

        单一个选择符能有不合的CLASS(类)，因而许可同一元素有不合样式。例如，一个网页制造者也许欲望视其说话而定，用不合的色彩显示代码 :



code.html { color: #191970 }code.css { color: #4b0082 }

        以上的例子建立了两个类，css和html，供HTML的CODE元素应用。CLASS属性是用于在HTML中以指明元素的类，例如，





        为了削减样式表的反复声明，组合的选择符声明是许可的。例如，文档中所有的标题可以经由过程组合给出雷同的声明:




        每个选择符只许可有一个类。例如，code.html.proprietary是无效的。


类的声明也可以无须相干的元素:



.note { font-size: small }
一个优胜的习惯是在定名类的时刻，根据它们的功能而不是根据它们的外不雅。上述例子中的note类也可以定名为small，但如不雅网页制造者决定改变┞封个类的样式，使得它不再是小字体的话，那么这个名字就变得毫无意义了。



ID 选择符

        ID 选择符个别地定义每个元素的成分。这种选择符应当尽量罕用，因为他具有必定的局限。一个ID选择符的指定要有指导符"#"在名字前面。例如，ID选择符可以指定如下:



#svp94O { text-indent: 3em }


        文本缩进3em



接洽关系选择符

        接洽关系选择符只不过是一个用空格隔开的两个或更多的单一选择符构成的字符串。这些选择符可以指定一般属性，并且因为层叠次序的规矩，它们的优先权比单一的选择符大年夜。例如， 以下的高低文选择符



P EM { background: yellow }

        选择符

        是P EM。这个值表示段落中的强调文本会是黄色背景；而标题标强调文本则不受影响。



声明

        一个属性被指定到选择符是为了应用它的样式。属性的例子包含色彩、界线和字体。



值

        声明的值是一个属性接收的指定。例如，属性色彩能接收值red。



P:first-letter { font-size: 300%; float: left }

        渡虎谷在这个例子，名为note的类可以被用于任何元素。



组合
H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif }
有些情况是内部选择符不持续四周的选择符的值，但理论上这些都是特别的。例如，上界线属性是不会持续的；直觉上，一个段落不会有同文档BODY一样的上界线值。




        持续

        实际上，所有在选择符中嵌套的选择符都邑持续外财揭捉?择符指定的属性值，除非别的更改。例如，一个BODY定义了的色彩值也会应用到段落的文本中。



注解

        样式表琅绫擎的注解应用C说话编程一一样的商定办法去指定。CSS1注解的例子如以下格局:



/* COMMENTS CANNOT BE NESTED */

        伪类和伪元素

        伪类和伪元素是特别的类和元素，能主动地被支撑CSS的浏览器所辨认。伪类差别开不合种类的元素(例如，visited links(已拜访的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。



伪类或伪元素规矩的情势如



选择符:伪类 { 属性: 值 }

        或




        这点可以参考HTML中的ID属性:



选择符:伪元素 { 属性: 值 }

        伪类和伪元素不该用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一路应用，如下:



选择符.类: 伪类 { 属性: 值 }

        或



选择符.类: 伪元素 { 属性: 值 }

        定位锚伪类

        伪类可以指定A元素以不合的方法显示连接(links)、已拜访连接(visited links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已拜访连接可以定义为不合色彩的显示，甚至不合字体大年夜小和风格。



一个有趣的效不雅是使当前(或“可激活”)连接以不合色彩、更大年夜的字体显示。然后，当网页的已拜访连接被重选时，又以不合色彩、更小字体显示。这个样式表的示例如下:



A:link { color: red }A:active { color: blue; font-size: 125% }A:visited { color: green; font-size: 85% }

        首行伪元素

        渡虎谷平日在报纸汕９依υ?┞仿，例如Wall Street Journal中的，文本的首行都邑以粗印体并且全部大年夜写地展示。CSS1包含了这个功能，将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:



P:first-line { font-variant: small-caps; font-weight: bold }

        首个字母伪元素

        首个字母伪元素用于加大年夜(drop caps)和其他效不雅。含有已指定值选择符的文本的首个字母会按照指定的置魅展示。一个首个字母伪元素可以用于任何块级元素。例如:




        会比通俗字体加安闲倍。



层叠次序

        当应用了多个样式表，样式表须要争夺特定选择符的┞菲握权。在这些情况下，总会有样式表的规矩能获得控制权。以下的特点将决定互相对立的样式表的结不雅。



! important

        规矩可以用指定的! important 特指为重要的。一个特指为重要的样式会赶过于与之对立的其它雷同权重的样式。同样地，当网页制造者和读者都指定了重要规矩时，网页制造者的规矩会超出读者的。以下是! important 声明的例子:



BODY { background: url(bar.gif) white; background-repeat: repeat-x ! important }

        Origin of Rules (Author's vs. Reader's)

        正如以前所说起的，网页制造者和读者都有才能去指定样式表。当两者的规矩产生冲突，网页制造者的规矩会赶过于读者的其它雷同权重的规矩。而网页制造者和读者的样式表都超出浏览器的内制揭捉?式表。



渡虎谷网页制造者应当当心肠应用! important 规矩，因为它们会超出用户任何的! important 规矩。例如，一个用户因为视觉关系，会请求大年夜字体或指定的色彩，并且如许的用户会有可能声明白定的样式规矩为! important，因为这些样式对于用户浏览网页是极为重要的。任何的! important 规矩会超出一般的规矩，所以建议网页制造者应用一般的规矩以确保有特别样式须要的用户能浏览网页。



选择符规矩: 计算特点

        基于它们的特点级别，样式表也可以超出与之冲突的样式表，一个较高特点的样式永远都赶过于一个较低特点的样式。这只不过是盘似揭捉?择符的指定个数的一个统计游戏。



统计选择符中的ID属性个数。

        统计选择符中的CLASS属性个数。

        统计选择符中的HTML标记名格局。

        最后，按精确的次序写出三个数字，不要加空格或逗号，获得一个三位数。( 留意，你须要将数字转换成一个以三个数字结尾的更大年夜的数。)响应于选择符的最终数字列表可以很轻易肯定较高数字特点赶过于较低数字的。以下是一个按特点分类的选择符的列表:




        属性
#id1 {xxx} /* a=1 b=0 c=0 --> 特点 = 100 */UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特点 = 013 */LI.red {xxx} /* a=0 b=1 c=1 --> 特点 = 011 */LI {xxx} /* a=0 b=0 c=1 --> 特点 = 001 */

        特点的次序

        为了便利应用，当两个规矩具同样权重时，取后面的那个。

精彩评论5

c8sv   学习于  2016-7-8 21:05:22
真心顶楼主可否给我的网站做优化
6i0g1   学习于  2016-7-8 20:58:26
难得一见的好帖教会我如何优化网站
c8sv   学习于  2016-7-8 21:46:11
怎么优化网站说的非常好
qsgpd   学习于  2016-7-8 21:20:04
技术和方案都很好哦
SEO服务   学习于  2016-7-8 21:09:26
不错不错这下会优化网站了
返回列表

帝国网络 网站优化

www.100ip.net

技术百度优化公司 提供网站SEO优化、降权分析恢复等服务,分享网站SEO优化技术细节思维,解答SEO问题,让新手从零基础开始学习网站的优化

Copyright © 2008-2018 网站优化 seojishu.100ip.net 版权所有 All Rights Reserved. 网站优化技术支持

技术SEO优化公司致力于SEO优化外包、网站建设、网站优化公司、整站优化、网站运营、危机公关、SEO外包、网站推广等;SEO服务电话:400 050 4004