语法:
selector { property:value}
引用方式
外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表
<head>
<style>
hr {
color:sienna;
}
p {
margin-left:20px;
}
body {
background-image:url("images/back40.gif"
)
</style>
</head>
内联样式
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
常用选择器
class .
id #
分组选择器:
h1,h2,p
嵌套选择器:
h1 h2 p
组合选择器
后代选择器 div p
子元素选择器 div>p
相邻兄弟选择器 div+p
后续兄弟选择器 div~p
伪类
a:hover 把鼠标放上时变化
背景图像
body {background-image:url('paper.gif');}
文本的对齐方式
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
盒子模型
margin 外边距
border 边框
padding 内边距
content 内容
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
margin padding 简写
margin: 上 右 下 左
尺寸属性
line-height 设置行高
隐藏
h1.hidden {display:none;}
定位
fixed 相对浏览器固定
relative 相对其正常位置
absolute 相对其父级元素
浮动
float:left 脱离文档流浮起来
SHU标指针
cursor:pointer
网友评论