网站优化

 找回密码
 立即注册
渡虎谷告诉你CSS的结构和规则
查看: 8678|回复: 35

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

网站优化公司 发表于 2016-2-19 14:55:17 | 显示全部楼层 |阅读模式
根本语法

        规矩

        任何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% }

        首行伪元素

        渡虎谷平日在报纸汕9依υ?┞仿,例如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 */

        特点的次序

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

使用道具 举报

祥客 发表于 2016-7-11 10:39:43 | 显示全部楼层
这篇网站优化技术文章真心赞
回复 支持 反对

使用道具 举报

戚晓畅 发表于 2016-7-11 11:57:41 | 显示全部楼层
好优化方案就是要顶
回复 支持 反对

使用道具 举报

黎晓兰 发表于 2016-7-11 12:21:37 | 显示全部楼层
楼猪说的非常好
回复 支持 反对

使用道具 举报

SEO优化 发表于 2016-7-11 16:56:11 | 显示全部楼层
SEO很难学,还得多多努力
回复 支持 反对

使用道具 举报

窦燕珺 发表于 2016-7-11 18:35:53 | 显示全部楼层
LZ真是人才,教教我如何优化自己的网站
回复 支持 反对

使用道具 举报

SEO优化 发表于 2016-10-19 10:23:18 | 显示全部楼层
楼主是网站优化界的高人
回复 支持 反对

使用道具 举报

 楼主| 网站优化公司 发表于 2016-10-19 10:44:13 | 显示全部楼层
我的网站是帝国帮我做的,效果还不错,关键是服务好,有什么问题都会及时帮我解决。
回复 支持 反对

使用道具 举报

湮玲 发表于 2016-10-19 14:28:38 | 显示全部楼层
刚和他们合作不久,服务态度非常好,seo、网络推广技术也很专业 ,选择了一家专业的整合营销公司,支持帝国网络,点个赞!
回复 支持 反对

使用道具 举报

湮玲 发表于 2016-10-19 16:15:37 | 显示全部楼层
难得一见的好技术贴
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|

GMT+8, 2024-4-24 12:36网络网站优化公司

网站优化公司© 2006-2024 wangzhanyouhua.net Search Engine Optimization By 网站搜索引擎优化公司

快速回复 返回顶部 返回列表