CSS 层叠样式表
CSS的特点
- 精确的定位：准确的控制页面的任何元素
- 精细的控制：可以做到像素级别的调整
- 便于维护，便于重用
CSS的使用方法
-
写在标签内的style属性中
-
写在
<style>元素中 -
写到外部css文件中，用
<link>关联到html中<link rel="stylesheet" type="text/css" href="./style.css"> -
@import 可以引入css，用于css中引入css
@import url("./style.css");
CSS的格式
选择器{
属性：值；
属性：值；
}
CSS的长度单位
- 相对单位 常用
- px 像素
- em 倍数 相对于默认大小
- 百分比
- 绝对单位
- pt 磅
- cm 厘米 mm
颜色表示
-
颜色英文单词
cyan:青色 purple：紫色 -
rgb方式
rgb(0~255，0~255，0~255) rgb(百分比，百分比，百分比) rgb(0,0,0)黑色 rgb(255,255,255)白色 rgb(100,100,100)灰色。只要三个都一样，就是灰色。靠近255就偏白，靠近0就偏黑。 -
十六进制
#ffffff 白色 简写 #fff #cccccc 灰色 简写 #ccc #000000 黑色 简写 #000
CSS选择器
-
元素选择器
元素{} -
ID选择器
#id名{} -
class选择器
.class名{} -
全局选择器
*{} -
关联选择器
选择器 选择器{} 选择器>选择器{} 如：.nav li{} #box div{} div .list{} .container li{} -
组合选择器
两种基本选择器的组合，中间不能有空格 选择器，选择器，选择器…… 如：p.text{} -
伪类选择器
a:link{} 向未被访问的链接添加样式 a:visited{} 向已被访问的链接添加样式 a:hover{} 当鼠标悬浮在元素上方时，向元素添加样式 a:active{} 向被激活的链接添加样式 顺序不能乱 -
选择器的优先级
行内样式>ID选择器>CLASS选择器>TAG元素选择器>全局选择器 组合选择器 ID：权重100 CLASS：权重10 TAG：权重 1 规则：就近原则 看就近标签 指向精确的优先级高 并列的话谁在后面谁优先级高
字体属性
-
font-family 衬线字体（serif） 非衬线字体（sans-serif)
font-family:"Microsoft YaHei","楷体"，sans-serif; -
font-style 字体风格 默认 normal
- italic(斜体)
- oblique(强制变斜)
-
font-weight 字体粗度 默认 normal
- bold 加粗
- bolder 更粗
- lighter 变细
- 数字>=600(粗)
-
font-variant 字变形 默认 normal
- small-caps 小型大写字母
-
font-size 字体大小
-
font 统一设置
font:[style->variant/weight]->size->family 按顺序设置
颜色属性
- color
文本属性
-
letter-spacing 字母间隔，值为长度，可以是负值
-
word-spacing 设置单词之间的间隔（通过空格识别）
-
text-decoration 文字修饰
-
underline 下划线
-
overline 上划线
-
line-through 删除线 中划线
-
none 默认
text-decoration属性常用于<a></a>去掉其下划线
-
-
text-align 水平对齐方式 left(默认)/right/center
-
*vertical-align 垂直对齐（基于文字的基线） baseline/bottom/top/middle/sub/super/text-top/text-bottom/百分比
-
text-indent 首行缩进
-
line-height 行高 长度单位
当想让一行文字在某个元素中垂直居中：设置行高=高度的一半 当需要设置行高也要设置font（font把行高也包含在内了） 如： `font:[style/variant/weight] size/line-height family` /*垂直居中*/ line-height:200px; font:30/200px "Microsoft YaHei", sans-serif;
CSS背景属性
-
background-color 背景颜色
-
background-image 背景图片
background-image:url(dist/images/fenju.jpg); -
background-repeat 背景图片的平铺方式
- repeat 默认
- repeat-x
- repeat-y
- repeat
- no-repeat
-
background-position 背景图片定位
-
left/center/right/ 长度单位
-
top/center/bottom/
background-position:right bottom; background-position:right center; background-position:center center; background-position:-30px -30px;
-
-
background-attachment 背景图片固定或滚动
-
scroll 默认
-
fixed
统一设置：background：color image repeat position 无顺序要求 值中间空格
CSS边框属性
-
border-width 边框线的宽度 长度单位
-
border-color
-
border-style 边框线的风格 solid/dotted/dashed/double...
-
border-left/right/top/bottom
border-left- 10px; border-left-style:solid; border-right:10px dotted #369; -
border
统一设置：border:width style color；
CSS鼠标光标属性
- cursor 值 default/pointer/move/crosshair/text/wait
CSS列表属性
- list-style-type 列表项的图形 disc/circle/square/decimal/lower-roman/upper-roman ....
- list-style-postion 列表项图形的位置 outside/inside
- list-style-iamge 自定义列表图形 url
- 最常见的设置
list-style:none
CSS表格属性
-
table-layout 表格布局方式
- auto
- fixed 平均分配表格宽度
-
border-collapse 合并单元格边框
- separate 独立
- collapse 合并
-
border-spacing 单元格间距 长度单位
若设置了collapse,border-spacing的设置就不起作用。 -
caption-side 表格标题位置 top/bottom
-
empty-cells 没有内容的单元格是否隐藏 show/hide
若设置了collapse,empty-cells的设置就不起作用。