CSS 的基础应用

css基本语法格式

• 样式要写在{} 内联样式表和外联样式表
• 样式以键值对的形式出现，键值对以:分开，结尾一定要写;
• 最好一个属性写一行
• css文件中不要写style
• 注释/* 注释的内容 */

常用的选择器

元素选择器

•                       通用选择器，会选择所有的元素，不建议使用
  

类型选择器 也叫标签选择器
id选择器 根据标签的id属性值进行选择，不能重复
class选择器 根据标签的class属性进行选择，可以重复，并且可以有多个

关系选择器
E F 选择被E元素包含的所有的F元素（常用）
E > F 选 择所有作为E元素的子元素F（常用）
E+F 选择紧贴在E元素之后的F元素
E~F 选择E元素后面的额所有F的兄弟元素

属性选择器

E[attr] 选择具有attr属性的元素
E[attr=“val”] 选择具体attr属性并属性值为val的元素
E[attr~=“val”] 选择具有attr属性并且属性值为用空格分开的字词列表
E[attr^=“val”] 选择具体attr属性并属性值为val开头的字符串的元素
E[attr$=“val”] 选择具体attr属性并属性值为val结尾的字符串的元素
E[attr*=“val”] 选择具体attr属性并属性值为包含val的字符串的元素

尺寸单位
px 像素，绝对单位
% 百分比,相对单位
em 相对于父元素的倍数
rem 相对于HTML元素的倍数

字体设置
font-style 字体的样式normal正常 italic 斜体
font-weight normal正常，bold加粗，而且写100-900
font-size 字体的大小，可以使用相对单位em rem %
font-family 字体族，设置字体的系列

文本修饰
text-indent 首行缩进
text-align 水平对齐方式
line-height 行高，可以实现单行文本的垂直居中对齐
text-decoration 文本的划线处理
vertical-align 设置内联元素在行内垂直的对齐方式
overflow 超过背景的时候可以下

背景设置
background-color 背景颜色
background-image 背景图片
background-repeat 背景图片重复平铺的效果
background-size 背景图片的尺寸

列表设置
list-style-type 小图标类型 none disc circle square
list-style-position 小图标位置
list-style-image 小图标的图片

表格设置
table-layout 设置显示单元、行和列的算法。
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 表格的间隙
empty-cells 是否显示空单元格的边框

定位设置
static 默认的一种情况，定位的偏移不起作用
relative 相对于自身文档流中的偏移 （常用）
absolute 相对于离自身最近父元素进行偏移
fixed 相对于窗口定位，不会随着窗口内容滚动而滚动

布局相关（重要）
overflow 溢出容器部分的处理，auto,hidden,visible,scroll
visibility 用来控制元素的显示与隐藏
display 设置元素的显示情况
float 浮动
clear 清除浮动

盒子模型
border 边框
padding 内边距
margin 外边距