本教程全面介绍了CSS的基础知识，包括CSS的定义、样式嵌入方法、选择符的使用、常见样式属性详解及页面布局技术。通过实例演示，帮助读者快速掌握CSS的应用。
CSS基础
1.概述：
1.1 定义：
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS样式是由多个规则组成的，定义规则的主要目的是告知浏览器去呈现一个经CSS修订后的文档。
1.2 将CSS样式嵌入到HTML中
将CSS样式嵌入到HTML中有三种方法。
1.2.1 嵌入式样式表
嵌入式样式表是很常见的操作，它将<style>标签对定义到文档的<head>标签部分，在<style>标签对内根据样式规则定义属性完成对样式的修订。定义样式的方法为：首先定义一个选择符，这个选择符可以理解为当前内容需要进行CSS样式修订的一个句柄，然后定义属性和值，属性与值之间使用冒号(:)连接，不同属性之间使用分号(;)分隔。基本的样式格式如下：
选择符{属性1：值1；属性2：值2}
如下实例
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS样式</title>
<style>
h1{ background-color:#0F0; color:#00F; font-family:Verdana, Geneva, sans-serif}
h2{ background-color:#3F9;color:#930; font-family:"Courier New", Courier, monospace}
</style>
</head>
<body>
<h1>黑马程序员</h1>
<h2>胡志平云七</h2>
</body>
</html>效果图：
1.2.2 内联样式表
内联的样式比其他的方法要灵活一些，但是样式与内容混淆在一起的，它的缺点是对相同的标签不能进行统一处理。例如，即使有多个<p>标签也要每个内容都编写相同的CSS代码，这样编写代码多且不利于更新。如下
<h1 style="background-color:#FF0; color:#0F0">黑马程序员</h1>
<h2 style="background-color:#F0F; color:#0F9">胡志平云七</h2>效果图：
1.2.3 外部样式表
使用外部样式表有两个优点：
1.可以多个文档使用同一个样式表；
2.是外部样式表可以使HTML文档与CSS样式达到完全分离，这种分离对于程序代码标准化来说意义非常重大。
一个外部的样式表可以通过HTML的<link>标签嵌入到HTML文档中，<link>标签是放置在文档的head部分。
语法如下：
<link type="text/css" rel="stylesheet" href="css/in.css"/>参数说明：
1.type属性：用于指定媒体类型，允许浏览器忽略它们不支持的样式表类型。
2. rel属性：用于定义连接的文件和HTML文档之间的关系，该属性的值stylesheet用于指定一个固定或首选的样式。
3. href属性：用来指定样式文件的位置，可以是相对路径也可以是绝对路径。
4. 样式表仅仅是由样式规则或声明组成的。
1.2.4 优先等级
样式同时作用在同一个标签中的话，那么会按内联样式表的样式来定，优先等级遵照就近原则。即样式按位置最接近的那个的标准。
所以优先顺序为：内联样式表---->嵌入式样式表---->外部样式表。
1.3 CSS选择符
在HTML中通过标签来进行不同功能的区别，而在CSS样式中，通过选择符来定义不同的样式表。常用的样式选择符包括HTML选择符、类选择符、ID选择符、组合选择符、关联选择符和伪元素选择符。
1.HTML选择符
HTML选择符用来改变一个指定标签的样式，任何HTML元素都可以是一个CSS的选择符。如P{margin:2px4px}
2.类选择符
每一个选择符可以有不同的类（class），因而同一个元素可以有不同样式。如下例
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS样式02</title>
<style>
.one{ background-color:red; color:blue}
.two{ background-color:blue; color:red}
</style>
</head>
<body>
<!--p标签引用class为one的样式-->
<p class="one">黑马程序员</p>
<!--p标签引用class为two的样式-->
<p class="two">胡志平</p>
</body>效果图：
注：类选择符在定义时需要在类名称前添加一个“.”。
3. ID选择符
在编写HTML页面中的样式时，ID属性一般被用于定义那些页面中只出现一次的单一元素的样式。ID选择符与类选择符类似，只要把class换id即可，在使用原则上id选择用在唯一的元素上，而class则可用在不止一个元素上。
4.关联选择符
关联选择符是由两个或更多的单一选择符组成的字符串。这些选择符最大的特点是因为层叠顺序的关系，它们的优先权比单一的选择符大。关联选择符只对选择符的最里层的元素起作用，对单独的上层元素无定义。如table a{color:blue}
5.组合选择符
在样式表文件中组合的选择符声明是允许的，它的主要作用是减少样式表中选择符的重复声明。其使用方法也很简单，用英文逗号(,)分隔选择符即可。例如：
h1,h2{color:red}
6.伪元素选择符
伪元素选择符常用于超链接标签，它的主要作用是定义不同状态下同一个HTML元素的形态。例如：使用伪元素选择器定义<a>标签点击前和点击后的状态、光标移动到超链接文本上的状态。
如下代码：
<title>CSS样式03</title>
<!--
:link 定义a标签点击前的状态
:hover 定义a标签鼠标覆盖时的状态
:visited 定义a标签点击后的状态
:active 定义a标签移动时的状态
-->
<style type="text/css">
a{
font-size:12px;
color:#000}
a:link{
text-decoration:none;}
a:visited{
text-decoration:none;
color:#F00}
a:hover{
text-decoration:none;
color:#0F0}
a:active{
text-decoration:none;
color:#C0F;
font-size:16px;}
</style>
</head>
<body>
<a href="#">点击我一下</a>
</body>注：伪元素以英文的“：”开头，后面的伪元素名称根据应用角度不同有各自固定的写法。冒号的前面需指定伪元素的HTMl标签。目前只有<a>和<p>标签可以使用伪元素选择符。
1.4常见的CSS样式属性
CSS中的样式属性比较多，经常使用的属性可以分为字体、文本、背景、位置、边框、列表以及其他一些属性几类，每个类中的属性都可以单独使用，如果同一类中多个属性在一起使用，还可以将它们进行整合。
1.4.1 字体属性
对字体的修饰可以包括类型、大小、风格、加粗和变形。如下表：
字体属性和属性值详细说明
如下代码应用字体属性指定HTML的段落标签<p>中的字体为bold(粗体)、times字体、12点大小。如下代码
P{font-weight:blod;font-family:times;font-size:12px}1.4.2 颜色属性
颜色属性用于控制指定元素的颜色。颜色值可以是一个关键字或一个RGB格式的数字。关键字颜色值共有16种颜色可以使用，如red，greed,blue等。
1.4.3 背景属性
大多数HTML元素都允许设置背景，其中包括设置背景颜色。背景图像。背景重复、背景附件、背景位置等属性。常用的背景及其属性值的详细介绍如下表：
1.4.4 文本属性
CSS中对于文本属性的控制主要包括字符间距、文字修饰、文本排列、文本缩进、行高以及文字大小写等，其常用属性及其属性值如表：
常用文本属性及其属性值
如下代码：
<title>Css样式04</title>
<style type="text/css" >
p{
letter-spacing:3px;
text-decoration:underline;
line-height:100px;
text-align:center;
background-color:#FF0;
color:#F00;
font-family:"隶书", Times, serif;
font-size:16px}
</style>
</head>
<body>
<p>黑马程序员，胡志平云七</p>效果图：
1.4.5 边框属性
边框属性主要用于一个元素的边框风格、边框宽度、边框颜色等，可以一次设置4边的边框，也可单独对上、下、左、右边框进行设置。
1）边框风格属性 border-style
边框风格属性用于设置元素的边框样式，但前提条件是指定修饰的边框必须为可见状态，否则使用此属性毫无意义。本属性可以设置1~4个值，如果4个值全部给出，那么这些值将分别应用于边框上、下、左和右。如果只给出一个值，则4个边共享这个值。如果只给出两个或3个值，则省略的边框属性对边相等。当然也可以使用border-top-style、border-bottom-style、border-left-style和border-right-style属性单独设置各边的风格。边框风格属性可以选择的属性值如下。
如下代码：
<style type="text/css">
div{
width:300px;
height:150px;
border:1px;
border-left-style:dotted;
border-right-style:dashed;
border-top-style:solid;
border-bottom-style:Outset;
text-align:center;
padding-top:60px;}
</style>
</head>
<body>
<div>
黑马程序员，我是胡志平
</div>效果图：
2）边框赛诺属性border-width
边框宽度属性用于设定上、下、左、右边框的宽度，该属性与border-style属性相同，同样使用1~4个值来设置元素的边界，值是一个关键字（包括medinum(默认值)、thin(比medium细)或thick(比medium粗)）或长度，不允许使用赋值长度。同样可以使用border-top-width、border – bottom-width、border-left-width和border-right-width属性单独设置对应边框的宽度。
注：使用border-width属性必须确保存在边框或者说存在border-style属性，否则无意义。
3）边框颜色border-color
边框颜色border-color用于设定上、下、左、右边框的颜色，使用方法与border-style和border-width完全相同。
1.4.6鼠标光标
CSS通过cursor属性实现鼠标形状的更改的，其属性值包括default(默认的鼠标形状)、pointer(小手形状)、crosshair(交叉十字)、text(文本选择符号)、wait(Windows的沙漏形状)、help(带有问号的鼠标)以及各个方向的箭头。
div{
cursor:wait; //将鼠标更改为沙漏形状
}1.4.7 定位属性
CSS定位技术有两个非常重要的定位方法：一是相对定位；二是绝对定位。所谓相对定位是指让操作的元素在相对其他元素的位置上进行偏移，而绝对定位是指让操作的元素参照原始文档进行偏移。有关定位的常见属性如下表：
1.4.8区块属性
使用CSS对页面进行布局时，通常会将所有对象都放置在一个容器中，这个容器称为区块。设置一个区块所需要的属性如下表：
2.设计页面布局
因为使用表格技术进行页面布局会出现一个低效率的问题，所以现在的网站设计标准中，已经不再使用表格，而采用CSS+DIV对页面进行布局。
2.1 <div>和<span>标签
<div>和<span>标签同样作用于网页布局中，它们的不同之处是：<span>标签属于内联的，一般用于小模块的样式内联到HTML文档中；<div>元素本身就是块级元素，多用于组合大块的代码。
2.2 区块模型
在进行页面布局之前必须掌握区块模型、定位和浮动3个重要概念，它们的作用是控制页面的排列和显示方式。区块是页面布局的最初体现，通常是指div定义的矩形块。此矩形块可以由元素内容、空白、填充和边框组成。用户可以通过width和height属性定义矩形块的长度、宽度；通过border属性定义边框；通过margin属性定义边框与外边的距离；通过Padding属性定义内容与边框的距离。
如下代码：
div{
margin:100px 400px;
width:300px;
height:150px;
border:1px solid red;
padding:10px;
text-align:center
}如下图
元素框的最里面部分是实际内容，直接包围内容的是内边距，也就是内容与边框的距离（padding属性）。内边框的边缘线条为边框（border属性）。边框以外的是外边框（margin属性），由于外边框默认是透明的，所以不会遮挡其他任何元素。
2.3 区块浮动
使用区块浮动技术可以使指定区块向左或向右移动，这种移动直到该区块的外边缘碰到包含它的区块边框或浮动区块为止。
2.3.1 浮动的设置
在CSS中可以使用float属性设置区块框向左或向右浮动。
代码实例：通过CSS样式中的float属性设置区块框的浮动。
要求：
1.设置三个大小相同的区块。
2.区块1向右移动
<style type="text/css">
#one{
margin:100px 350px;
width:400px;
height:400px;
border:1px dashed black;}
.one{
margin:2px;
width:100px;
height:100px;
border:1px solid black;
text-align:center;
padding:20px;
float:right}
.two{
margin:2px;
width:100px;
height:100px;
border:1px double #0F0;
text-align:center;
padding:20px;}
.three{
margin:2px;
width:100px;
height:100px;
border:1px dotted #F0F;
text-align:center;
padding:20px}
</style>
</head>
<body>
<div id="one">
<div class="one">块1</div>
<div class="two">块2</div>
<div class="three">块3</div>
</div>效果图：
2.3.2行框和清理
使用div进行页面布局时，很多时候用户需要将多个区块框并列在一行中排列，经常使用的方法就是利用float属性、left属性和right属性进行设置区块浮动和位置修订。当前面并列的多个区块框总宽度不包含框的100%时，行内应付保留出一定的宽度空白，而下面的区块如果宽度恰好满足这个空白宽度，则很可能此区块就会向上提拉并与其他区块并列。这并不是用户想要看到的结果，可以使用clear属性解决这个问题，该属性值可以设置为left、right、both和none，这些值表示哪边不应挨着浮动框。
代码实例：
通过CSS样式中的clear属性清除浮动
<style type="text/css">
#one{
margin:100px 350px;
width:400px;
height:400px;
border:1px dashed black;}
.one{
margin:2px;
width:100px;
height:100px;
border:1px solid black;
text-align:center;
padding:10px;
float:right}
.two{
margin:2px;
width:100px;
height:100px;
border:1px double #0F0;
text-align:center;
float:right;
clear:both;
padding:10px;}
.three{
margin:2px;
width:100px;
height:100px;
border:1px dotted #F0F;
text-align:center;
padding:10px}
</style>
</head>
<body>
<div id="one">
<div class="one">块1</div>
<div class="two">块2</div>
<div class="three">块3</div>
</div>注：块二float right
块二float right + lear:both;
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
