样式表

样式表
分类
内联
写在标签里面
style="样式"
控制精确,代码重用性差
内嵌
嵌在页面的head里面
<style type="text/css"></style>
控制没有内联的精确,代码重用性好
外部
单独的样式文件
引入:右键-CSS样式表-附加样式表
引入:<link href="test.css" rel="stylesheet" type="text/cs
控制没有内联的精确,代码重用性最好
选择器
样式表用来选取元素的
标签
根据标签名选中元素
class
. (点)
根据class名来筛选元素
id
# (井号)
根据id名来筛选出唯一元素
复合
并列
div,span
class="第一种 第二种"
后代
#list li
点筛选
div.s
大小
width
宽度
height
高度
背景
background-color
背景色
background
rgb(x,x,x)
rgba(x,x,x,x)
最后一个是透明度 1为不透明 0为全透明
url(图片的相对路径)
不平铺
no-repeat
background-image
背景图片
background-repeat
背景图的平铺方式
background-position
背景图片位置
background-attachment
设置背景图片是否滚动
background-size
背景图的大小 200px 200px
字体
font-family
字体样式
font-size
字体大小 12px 14px
font-style
italic倾斜
font-weight
bold加粗
text-decoration
underline下划线
overline上划线
line-through删除线
none没有,用来去掉超链接的下划线
color
字体颜色
对齐方式
text-align
水平对齐方式
vertical-align
垂直对齐方式,配合行高使用
line-height
行高
text-indent
缩进 单位像素
边界边框
margin
外边距 上右下左
padding
内边距 上右下左
如果加了内边距,该元素会相应的变大
border
1px solid #60F 简写方式 第一个边框粗细 第二个边框样式 第三个边框颜色
列表方块
list-style
none将列表前面的序号去掉
list-style-image
可以将前面的序号变为图片
格式与布局
位置
position
fixed固定
相对于浏览器边框位置固定
absolute绝对位置
相对于父级元素(浏览器,绝对定位的上级)
relative相对位置
相对于自身应该出现的位置
top
距离上边的距离
right
距离右边的距离
bottom
距离下边的距离
left
距离左边的距离

float
left
向左流
right
向右流
clear
both
清掉流
<div style="clear:both;"></div>
z-index分层
值越大越靠上
其它
display
显示block和隐藏none,不占位置
visibility
显示visible和隐藏hidden,占位置
overflow
超出范围 hidden隐藏
透明
opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)
圆角
border-radius:5px;
阴影
box-shadow:0 0 5px white;

原文地址:https://www.cnblogs.com/skyhorseyk/p/6854080.html