CSS学习

王朝学院·作者佚名  2016-05-24  
宽屏版  字体: 小 | 中 | 大 | 超大  

CSS学习1、CSS简介与作用

CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,用来表现HTML或xml等文件样式。CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。

2、CSS使用方法

有三种方法可以在站点网页上使用样式表: 外部样式:将网页链接到外部样式表。 <head > <link rel="stylesheet" type="text/css" href="css文件所在地址" />

</head>

内页样式:在网页上创建嵌入的样式表。

<head > <style type="text/css"> h1 { font-family: SimSun; font-size: 12px; font-style: normal; } </style> </head> 行内样式:应用内嵌样式到各个网页元素. <div style="font-family:SimSun;font-size:12px"> 使用了行内样式div </div> 3、CSS语法 CSS规则由两个主要部分构成:选择器+一条或多条声明 selector { declaration1; declaration2; …… } 每条声明由一个属性和一个值组成:{PRoperty:value};声明之间用分号“;”分割 4、选择器介绍 4.1 派生选择器:依据元素在其位置的上下文关系来定义样式 比方说,你希望列表中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:li strong { font-style: italic; font-weight: normal; }

<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p><ol><li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li><li>我是正常的字体。</li></ol>

4.2 id选择器:以 "#" 来定义,通过HTML元素的id属性进行关联

#red {color:red;}#green {color:green;}

<p id="red">这个段落是红色。</p><p id="green">这个段落是绿色。</p>

4.3 类选择器:类选择器以一个点号显示,通过HTML元素的class属性进行关联.center {text-align: center}

<h1 class="center">This heading will be center-aligned</h1>

注意:类名的第一个字符不能使用数字!

4.4 属性选择器:为拥有指定属性的 HTML 元素设置样式

注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。

为带有 title 属性的所有元素设置样式:

[title]{color:red;}

为 title="W3School" 的所有元素设置样式:

[title=W3School]{border:5px solid blue;}

4.5 标签选择器:直接使用HTML标签作为选择器

p{border:5px solid blue; }

更多详情,请参照:http://www.w3school.com.cn/css/css_pseudo_elements.asp

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
© 2005- 王朝网络 版权所有