首页 > 代码库 > CSS
CSS
CSS
(1)什么是CSS?
级联样式表/层叠样式表 cascading stylesheet 为页面提供展现方式(即数据以何种方式去显示)
(2)w3c推荐网页设计标准
数据与结构:html
样式:CSS
行为:javascript
(3)css基本语法
选择器{
属性名:属性值;
。。。。
}
(4)选择器
元素选择器(选择器的名称是一个标签的名称) ——>伪元素选择器
标签的名称{
属性名:属性值;
......
}
class选择器 ——>伪类选择器
.任意名称{
属性名:属性值;
.....
}
或者
标记名称.任意名称{
}
id选择器
#任意的名称{
属性名:属性值;
......
}
(5)样式的继承
子标记会继承父标记的样式
<div id="nav">
<p></p>
</div>
(6)样式的优先级
行内样式>内部样式>外部样式
id选择器>类选择器>标签选择器
(7)重点的属性
文本相关属性
font-size:12px;//字体大小
font-weight:900//磅
text-align:right/center/left;
letter-spacing:5px;//文字之间间隔
white-space:nowrap;//不换行
text-decoration:underline;//下划线 文本修饰属性
line-height://行高;
背景相关属性
background-color:#ffff;背景颜色
background-image:url(images/1.jpg);背景图片
background-repeat:no-repeat; repeat-x repeat-y
background-position: //背景偏移用于截取相应小图
边框
border:1px solid red;//宽度 样式 颜色
border-left:
border-right:
border-top:
border-bottom:
位置
width:100px;
height:100px;
margin:10px 11px 12px 13px;
margin-top:10px;
margin-right:11px;
margin-bottom:12px;
margin-left:13px;
margin:1px; 上下左右 都是1px;
margin: 20px auto;上下位20px 左右自动居中
padding://内边距
padding-left:
padding-top:
padding-right:
padding-bottom:
padding:10px 11px 12px 13px;
块级标签和行内标签(自行填充)
块元素:
另起一行:h1/p/div/form/ul/ol/hr/
行内标签:span/img/br/a
position属性
static;//默认摆放,从左到右,从上到下
absolute://按照父元素的位置偏移
relative:先按照默认方式摆放,然后偏移
float属性:
left;
取消块级元素的中换行,向左浮动;
CSS