当前位置:380元网站建设 虎网站 > 建站知识 > 正文

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

发布日期:2009-07-20

   基本语法
规则
选择符
任何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的类可以被用于任何元素。

一个良好的习惯是在命名类的时候,根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small,但如果网页制作者决定改变这个类的样式,使得它不再是小字体的话,那么这个名字就变得毫无意义了。

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

#svp94O { text-indent: 3em }
这点可以参考HTML中的ID属性:


文本缩进3em

关联选择符
关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性,而且因为层叠顺序的规则,它们的优先权比单一的选择符大。例如, 以下的上下文选择符

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

声明
属性
一个属性被指定到选择符是为了使用它的样式。属性的例子包括颜色、边界和字体。


声明的值是一个属性接受的指定。例如,属性颜色能接受值red。

组合
为了减少样式表的重复声明,组合的选择符声明是允许的。例如,文档中所有的标题可以通过组合给出相同的声明:

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的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% }
首行伪元素[Page]
渡虎谷通常在报纸上的文章,例如Wall Street Journal中的,文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能,将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:

P:first-line { font-variant: small-caps; font-weight: bold }
首个字母伪元素
首个字母伪元素用于加大(drop caps)和其他效果。含有已指定值选择符的文本的首个字母会按照指定的值展示。一个首个字母伪元素可以用于任何块级元素。例如:

P:first-letter { font-size: 300%; float: left }
会比普通字体加大三倍。

层叠顺序
当使用了多个样式表,样式表需要争夺特定选择符的控制权。在这些情况下,总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。

! 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 */
特性的顺序
为了方便使用,当两个规则具同样权重时,取后面的那个。

企业制作网站哪些操作不可松懈

    无论对于企业还是网站制作企业来说,网站制作都不是一项简单的操作。一个好网站从前期策划到后期运营,各方面都要做到位,一步不可松解!在我司十多年的建设经常里,常常发现很多企业网站疏于维护更新,很多都保持着最初网站建好的样子,而网站里有些内容或者图片无法正常显示,直到网站制作企业来电或者短信通知续费时,才发现网站出了问题。接下来虎网网站制作企业说说,企业网站制作哪些操作不可松懈! 企业制作网站哪些操作不...

       草根站长怎样网站实现盈利? 一:善于发现网站核心竞争力   任何一个网站都要有特色,如果你的网站是一张大众脸,那是没有什么前途的,而网站的特色往往就是网站的核心竞争力,比如地方门户要有当地的特色,细分行业有专业的特色,角度的特色,要做到和别人不一样,同时还要做到让别人喜欢接受,这样的特点就是你的核心竞争力,当你找到核心竞争力之后,就要善于发挥网站的优势,从而能够顺利的击败竞争对手!   二:不能够贪多,要脚踏实地   对于个...

       网站SEO优化,关键词究竟应该怎么优化 搜索引擎优化关键词 优化是搜索引擎优化优化中至关重要的一步,如果这一步做欠好,那么整个的网站优化就会遭到很大的影响。那么,搜索引擎优化关键词应该怎么优化呢?   一、关键词分布   搜索引擎优化关键词优化中,关于发掘关键词这一块,在这里就不讲了。先讲一下关键词在各个页面怎么布局的。网站主页一般选3到5个关键词,其它每个栏目页面选2到3个关键词。原则上讲,网站主页一般放难度稍高一点的关键词,其它...

       制作网站价格成本由规模的大小决定 网站对企业的品牌或者企业产品的推广有作用,因而很多企业都会花力气去新网站建设。那么一个制作网站需要多少钱呢?还需要从以下几个方面来思考。是自己进行建设还是给第三方制作,一些因素决定着成本的高低,制作网站价格成本是由规模的大小决定的,规模大就高,规模小就低。 制作网站价格成本由规模的大小决定   制作网站价格是决定网站单价的重要条件,正规的制作网站企业来说,是需要一定的运营价格,这些价格包含人工或广...

       什么是企业网站建设的要求和策划? 一、 顾客明确提出企业网站建设的需求 有企业 网站建设 的顾客向网站建设企业明确提出详细的企业网站建设要求,这类要求全部都是要利用文字的方式,详细的向网站建设企业做好详细说明,要将需要建设的网站要求,具体内容,及其商品描述全都描写清晰。网站制作企业则要对顾客的企业网站建设的要求做好全面的评估及其了解,如此一来才可以做出符合用户的网站。 二、 制订网站建设方案 针对顾客明确提出的企业网站建设需求,设...

       怎样评价一个网站质量好不好? 1、网站好不好界面设计 从页面设计上看一个网站好坏是最简单只清楚不过的了,一般来说即使不懂网站,只要会审美眼光的都能看的出来好坏,就像一个美女和丑女,一眼便能看出来。 2、看网站的打开的速度 这个很简单就是输入网址查看访问速度的快慢就行,但是这个是不准确的,网站的访问速度除了与网站的质量有关的之外,与服务器空间的宽带也有关系。 3、利用站长工具 目前国内很多工具,比如360网站安全检测工具,可以检...

最新模板
少儿英语培训机构网站建设 培训公司网站建设
成人自考网站建设 成人培训网站制作设计版面
智能家居摆设设计网站建设 智能家居装修企业网站建设
铜螺母,铜螺丝,螺栓,螺钉工厂网站建设
废气处理设备,如活性炭吸附箱、RTO蓄热式氧化处理设备、光氧等离子复合设备 低温等离子设备 光氧催化设备等网企业网站建设
图文阅读