CSS布局教程

基于web标准的网站设计指南

« 良好的xhtml编写习惯id及class选择符 »

css属性与选择符

css的语法结构仅仅由三部分组成,选择符,属性和值
使用方法:
选择符:指这组样式编码所要针对的对象,可以使一个xhtml标签如bodu,h1也可以使定义了特定id或class的标签,如#main选择表示选择<div id="main">即一个被指定了main为id的对象,浏览器将对css选择符进行严格的解析,每一组样式均会被浏览器应用到对应的对象上
属性是css样式控制的核心,对于每一个xhtml中的标签,css都提供了丰富的样式属性如颜色,大小,定位,浮动方式等。
值是属性的值,形式有两种,一种是制定范围的值,如fioat属性,只能应用left,right,none三种值,另一种为数值,如width能够使用0-99999或其他数学单位来制定
在实际应用中,我们往往使用以下类似的应用形式
body {background-color:blue;}
表示选择符为body,即选择了页面中的<body>这个标签,属性为background-color这个属性用于控制对象的背景色,而值为blue,页面中的body对象的背景色通过使用这组css编码被定义为了蓝色。
除了单个属性的定义,同样的可以为一个标签定义一个至更多的个性属性定义,每个属性使用分号隔开。
p{
text-align:center;
color:black;
font-family:arial;}
p标签被我们制定了3个样式属性,包含对齐方式文字颜色及字体。
同样,一个id或一个class都能通过相同的样式编写样式
#content{text-align:center;
color:black;
font-family:arial;}
.title{line-height:25px;
color:blue;
font-family:arial;}
类型选择符
在上面的body{}便是一种类型选择符,所谓类型选择符,是指以网页中已有的标签类型作为名称的选择符,body是网页中一个标签类型,div 也是,span也是,因此一下选择符都是类型选择符,而他们将控制页面中所有的body或div或span;
body{}
div{}
span{}
群组选择符
除了对于单个xhtml对象进行样式制定,同样可以对一组对象进行相同的样式指派
h1,h2,h3,p,span{}使用逗号对选择符进行分割,使得页面中所有的h1,h2,h3,,3,span都将具有相同的样式定义,这样做的好处是对于页面中需要使用相同样式的地方只需要书写一次样式即可实现,减少代码量,改善css代码的结构
包含选择符
h1 span{
font-weight:bold;}当我们仅仅相对一个对象中的子对象进行样式指定时候,包含选择符就被派上用场,包含选择符指选择符组合中前一个对象包含后一个对象,对象之间使用空格作为分隔符,我们对h1下面的span进行样式指派,最后应用到的xhtml是如下格式:
<h1>天津网站优化</h1>
<h1>这是我们的一段文本<span>天津网站建设</span></h1>
<h2>天津网站建设</h2>
<span>天津做网站</span>
h1标签之下的span标签将被应用到font-weight:bold的样式设置,注意,仅仅对有此结构的标签有效,对于单独存在的h1或是单独存在的span及其他非h1标签下属的span均不会应用此样式。
这样做能够帮助我们避免过多的id和class设置,直接对所需设置的元素进行设置。
包含选择符除了可以二者包含,也可以多级包含,如以下选择符样式同样能使用;
body h1 span strong{天下星}

  • 相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Arwen Build 90619

Copyright www.zxh6655.cn. Some Rights Reserved.黑ICP备09093629号