这是上周为公司人员培训而准备的CSS教程,这次的教程比上次CSS培训详细了不少,希望对初学CSS的朋友有所帮助。
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
一、如何使用CSS样式
1、链接外部样式(推荐)
<link href="http://www.dhtmlet.com/dhtmlet.css" rel="stylesheet" type="text/css" />
特点:样式与代码分离。2、定义内部样式块对象
<style type="text/css"> <!– body {font: 10px "Arial"} h1 {font: 15px/17px "Arial"; font-weight: bold; color: maroon} h2 {font: 13px/15px "Arial"; font-weight: bold; color: blue} p {font: 10px/12px "Arial"; color: black} –> </style>
特点:页面内部使用,方便,下载流量会适当减少。
3、内联定义。
<p style="margin-left: 0.5in; margin-right: 0.5in">这一行被增加了左右的外补丁</p>
特点:随意、方便。
推荐第一种调用方式。伪类的几种样式是无法通过第三种样式定义的。
二、语法
样式表语法 (CSS Syntax)
元素 { 属性:值 }
元素的写法将在下面第三部分讲到,属性和值将在第四部分讲到。
三、选择符
通配选择符、类型选择符、属性选择符、包含选择符、子对象选择符、类选择符、ID选择符、选择符分组、伪类和伪对象选择符。
1、类型选择符
<div>定义的样式</div>
特点:不用定义额外的元素,直接可以写CSS样式。
2、ID选择符(#)
<div id=”text”>定义的样式</div>
特点:可以为单独为某个元素定义的样式。
3、类选择符(点)
<div class=”text”>定义的样式</div>
特点:可以为一个页面里面多个应用此类的元素定义样式。
4、包含选择符
div #text{
font-size:12px;
}
<p id="text">定义的样式</p>
#text p{
font-size:12px;
}
特点:精准定位到某个元素。
<p id="text">定义的样式在p里面的样式</p>
上面四种写法在我们平时用的都比较多,对于第四种是前三种的一种灵活的写法。具体用哪种方式,大家可以根据自己的情况来定。
阅读全文 ->