css样式-选择器，盒模型-优快云博客

本文详细介绍了CSS中的子元素选择器、相邻同胞选择器及属性选择器等，并演示了如何利用class和id来分类和标识元素，同时展示了span和div在文档组织中的应用，以及盒模型、边框、外边距和内边距的概念。

子元素选择器 #nav li   代表 nav 下的所有li标签套用 css样式
相邻同胞选择器    h1+p 可以让标题后面的第一个p元素套用css样式
属性选择器 abbr[title] ：hover ｛cursor：help｝
层叠和特殊性

元素的分类与标识

有时，你希望对特定元素或者特定一组元素应用特殊的样式，

如何实现为网站上许多标题中的某一个单独应用颜色，如何实现把网站上的连接分为不同的类，并对各类链接分别应用不同的样式

用 class 对元素进行分类，
比如说，我们有两个链接组成的列表，他们分别是用于制造白葡萄和红葡萄的葡萄

<p>制造白葡萄酒的葡萄：</p>
<ul>
<li><a href="ri.htm" class="huang">1（Riesling）</a></li>
<li><a href="ch.htm" class="huang">2（Chardonnay）</a></li>
<li><a href="pb.htm" class="huang">3（Pinot Blanc）</a></li>
</ul>
<p>制造红葡萄酒的葡萄：</p>
<ul>
<li><a href="cs.htm" class="hong">4（Cabernet Sauvignon）</a></li>
<li><a href="me.htm" class="hong">5（Merlot）</a></li>
<li><a href="pn.htm" class="hong">6（Pinot Noir）</a></li>
</ul>
要求白葡萄酒的链接是黄色，红葡萄酒是红色，其余是蓝色

a{
color:blue;
}
a.huang{
color:#ffOOOO;
}
a.hong{
color:red;
}
利用id表示元素

除了可以元素进行分类以外，你还可以表示单个元素，这是通过HTML属性id实现的，HTML属性id 的特别之处在于，zaitongyiHTML文档中不能有两个具有相同id的元素，文档中的每个id值都必须是一致的，在其他情况下应该使用class属性
<h1 id="c1">第一章</h1>
<h2 id="c5">第一章</h2>
<h1 id="c4">第一章</h1>
<h2 id="c3">第一章</h2>
<h1 id="c2">第一章</h1>

组织元素
span 和div
span和div 用于组织和结构化文档，并经常联合 class和id一起使用
用span组织元素
span元素可以说是一种中性元素，因为它不对文档本身添加任何东西但是与css、结合使用的话，span可以对文档中的部分文本添加视觉效果
<p>早睡早起
使人<span class="benefit">健康</span>、
<span class="benefit">富裕</span>
和<span class="benefit">聪颖</span>。</p>
span.benefit{
    color:red;
}

用div组织元素
span的使用局限在一个块元素内，而div可以被用来组织一个或多个块元素

<html>
<head>
<style type="text/css">
#democrats {
        background:blue;
}
#republicans {
        background:red;
}
</style>
</head>
<body>
<div id="democrats">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</body>
</html>

span 和div 的作用相似，人们通常把div分为块级元素，而 span为行级元素
九盒模型（本人认为重要的）

css中的盒状模型，box model 用于描述一个为HTML元素形成的矩形盒子，盒状模型还涉及各个元素的外边据margin，边框border，内边距 padding
没什么写的实例：三行两列的表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<title>三行两列的CSS布局</title>
<style type="text/css">
body{
background:#ccc;
color: #555;
}
#header{
width:600px; margin:0 auto;
background: #EEE;
height:60px;
text-align:left;
}
#contain{
margin-right: auto;
margin-left: auto;
width: 600px;
}
#mainbg{
padding: 0px;
background: skyblue;
float: left;
}
#right{
float: right;
width: 500px;
background: #ccd2de;
text-align:left;
}
#left{
float: left;
padding: 0px;
width: 100px;
text-align:left;
}
#footer{
clear:both;
width:600px;
margin-right: auto;
margin-left: auto;
background: #EEE;
height:100px;}
li{ list-style-type:none;}
li input{
width:60px;
height:40px}
</style>
</head>
<body>
<div id="header">
    <li><input type="image" src="sy.png"/></li>
</div>
<div id="contain">

<div id="mainbg">
<div id="right">
<div class="text">
<ul>
<li>12</li>
<li>12</li>
<li>12</li>
<li>12</li>
</ul>
</div>
</div>
<div id="left">
<div class="text">left</div>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</div>
</div>
</div>
<div id="footer">tail</div>
</body>
</html>

十课外边据和内边距
、一个元素有上top 下 bottom 左 left 右 right
外边据表示从一个元素的边到相邻元素或者文档边界之间的距离，
了解了如何为文档本身即body元素定义外边据

满足上述要求的css代码如下
body｛
    margin-top:100px;
    margin-right:40px;
    margin-bottom:10px;
    margin-left;80px;
｝
或者也可这样写
body｛
    margin；上，右，下，左
｝
几乎所有的元素都可以采用这用方式设置格式

为元素设置内边距
内边距可以被理解为填充物，因为内边距并不影响元素间的距离，他只定义元素的内容与元素边框之间的距离

11课边框，

边框可以有多种途径比如装饰元素或者作为划分两物的分界线

border-width
border-color
border-style
border 缩写

边框宽度，border-width
由css中的border-width定义其值可以是 thin 薄 medium 普通 thick 厚
也可以设置像素值，

边框颜色 border-color

css属性 border-color 用于定义边框的颜色，其值就是正常的颜色

边框样式 border-style
如果你不想有任何边框可以设置为none 或者hidden
dotted 点点状。。。
dashed 虚线
solid 粗实线
double 双线
inset 左上阴影
outset右下阴影

缩写 border 直接在后面写要做的属性