css：层叠样式表
设置标签样式
css注释
/*这里是注释*/
语法结构
选择器 { 属性:样式;属性:样式;}
引入css样式的方式
1 在head内style标签内直接写css
2 在head内link标签引入外部css样式
3 在标签内直接写style属性来设置样式
通常标签应该有的属性
id，name，任何标签都可以自定义属性
class类属性，可以有多个
查找标签
基本选择器 元素选择器 p {color:red;} ID选择器 #i1 {background-color:red;} 类选择器 .c1 { font-size: 12px;} 通用选择器 * { color:white;} 组合选择器 后代选择器 li内部的a标签设置字体颜色 li a {color:green;} 儿子选择器 选择所有父级是div标签的p标签 div>p {font-size:12px;} 毗邻选择器 选择紧跟着div标签之后的p标签 div+p {margin:5px;} 弟弟选择器 li后面所有的p标签 #i1~p {border:2px solid royalblue;} 属性选择器 用于选取带有指定的元素 p[title] {color:red;} 用于选取带有指定属性和值的元素 p[title="123"] {color:green;} 分组 div, p {color:red;} 嵌套 .c1 p {color:red;} 伪类选择器 a:link a:visited a:hover a:active input:focus 伪元素选择器 first-letter before after
选择器的优先级
内联样式>id选择器>类选择器>元素选择器
css属性相关
width：属性可以为元素设置宽度
height：属性可以为元素设置高度
块级标签才能设置宽度，行内标签的宽高由内容决定
文字字体
font-family:"Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
文字大小
font-size:12px;
文字颜色
color
1 通过十六进制指定
2 通过RGB指定
3 通过RGBA指定
4 通过颜色名称
文字粗细
font-weight
normal 默认
bold 粗体
bolder 更粗
文字对齐
text-align
left 左对齐 是默认值
right 右对齐
center 居中对齐
justify 两端对齐
文字装饰
text-decoration
none 默认
underline 定义下方一条线
overline 定义上方一条线
lline-through 定义穿过文本的一条线
段落缩进
text-indent
背景属性
背景颜色
background-color:red;
背景图片
background-image:url("图片地址");
背景重复
background-repeat:no-repeat;
repeat：默认背景图片铺满网页
repeat-x：背景图片只在水平方向上平铺
repeat-y:背景图片只在垂直方向上平铺
no-repeat：背景不平铺
背景位置
background-position：left top;
简写方式
background: #336699 url("1.png") no-repeat left top;
边框
边框属性
border-width 边框粗细
border-style 线样式
border-color 边框颜色
简写方式
border:2px solid red;
边框样式
none 无边框
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
设置圆角边
border-radius
display属性
none：HTML文档中元素存在，但不在浏览器中显示。一般配合JavaScript代码使用
block：默认占满整个页面宽度
inline：按行内元素显示
inline-block：使元素同时具备行内元素和块级元素的特点
css盒子模型
margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉上达到相互隔开的目的
padding：用于控制内容与边框之间的距离
border：围绕在内边距和内容外的边框
content：盒子的内容显示文本和图像
margin属性
margin-top 上
margin-left 左
margin-right 右
margin-bottom 下
简写
margin:5px 10px 15px 20px;
顺序：上右下左
margin:10px 20px;
第一个是上下，第二个是左右
常见居中
margin:0 auto;
padding属性
padding-top
padding-right
padding-left
padding-bottom
与margin类似，但是没有居中