css样式-选择器,盒模型
子元素选择器 #nav li?? 代表 nav 下的所有li标签 套用 css样式
相邻同胞选择器??? ?h1+p 可以让标题后面的第一个p元素 套用css样式
属性选择器 abbr[title] :hover {cursor:help}
层叠和特殊性
元素的分类与标识
有时,你希望对特定元素或者特定一组元素应用特殊的样式,
如何实现为网站上许多标题中的某一个单独应用颜色,如何实现把网站上的连接分为不同的类,并对各类链接分别应用不同的样式
用 class 对元素进行分类,
比如说,我们有两个链接组成的列表,他们分别是用于制造白葡萄和红葡萄的葡萄
<p>制造白葡萄酒的葡萄:</p>
<ul>
<li><a href="ri.htm" "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? 直接在后面写 要做的属性