定义样式
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
内联的优先级比较高
id和class 选择器
id选择器是以#定义的定义特定的元素
class选择器以.来定义的定义一组元素
使用标签链接外部样式表
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义
内部样式表，就像这样:
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
多重样式将层叠为一个
背景：
默认情况下html页面会对背景图像进行水平垂直平铺
指定水平平铺：
background-repeat:repeat-x;
背景图像- 设置定位与不平铺
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
表格的样式
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
盒子模型
Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明
Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
Content（内容） - 盒子的内容，显示文本和图像
改变一个元素显示
把列表横向显示 li {display:inline;}
把span变成块元素 span {display:block;}
CSS Positioning(定位)
有四种不同的定位方法。
fixed定位的元素和其他的元素重叠
Relative 定位
h2.pos_top
{
position:relative;
top:-50px;
}
重叠的元素 定义z-index:-1图片将会显示在文字的下面
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
CSS Float(浮动)
img
{
float:right;
}
文字将会环绕在图片的周围
自动排列浮动
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
中心对齐，前提是宽度没有100%
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
后代选取器
div p
{
background-color:yellow;
}
子元素选择器
div>p
{
background-color:yellow;
}
和后代选择器相比子元素选择器只能选择作为某元素子元素的元素
相邻兄弟选择器
div+p
{
background-color:yellow;
}
选择紧接在另一个元素后的元素
普通相邻兄弟选择器
选取所有指定元素的相邻兄弟元素
css导航栏
导航栏=链接列表
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
删除边距和填充
ul
{
list-style-type:none;
margin:0;
padding:0;
}
垂直导航栏
a
{
display:block;
width:60px;
}
把链接变成块元素，使整体都可以点击
块元素默认情况下是可以指定宽度的
水平导航栏
li
{
display:inline;
}
浮动元素相邻
li
{
float:left;
}
a
{
display:block;
width:60px;
}
