一、CSS简介CSSCascading Style Sheets 层叠样式表是一组样式设置规则用于控制页面的外观样式二、基本用法1. CSS语法headstyle选择器{属性名:属性值;属性名:属性值;}/style/head选择器要修饰的对象东西属性名修饰对象的哪个属性样式属性值属性的取值2. CSS应用方式​ 也称为CSS引用方式有三种方式内部样式、行内样式、外部样式2.1 内部样式​ 也称为内嵌样式在页面头部通过style标签定义​ 对当前页面所有符合样式选择器的标签都起作用2.2 行内样式​ 也称为嵌入样式使用HTML标签的style属性定义​ 只对设置style属性的标签起作用2.3 外部样式​ 使用单独的.css文件定义然后在页面中使用link标签引入外部样式表linkrelstylesheethrefcss样式文件的路径​ 所有引入样式表文件的页面都起作用三、选择器1. 基础选择器1.1 标签选择器​ 也称为元素选择器使用HTML标签作为选择器名称​ 以标签名作为样式应用依据1.2 类选择器​ 使用自定义名称以.作为前缀然后通过HTML标签的class属性调用类选择器​ 以标签的class属性值作为样式应用依据​ 注意调用时不能添加.号同时调用多个类选择器时以 空格 隔开1.3 ID选择器​ 使用自定义名称以#作为前缀然后通过HTML标签的id属性进行名称匹配​ 以标签的id属性值作为样式应用依据一对一的关系2. 复杂选择器2.1 复合选择器​ 标签选择器和类选择器、标签选择器和ID选择器一起使用​ 必须同时满足两个条件才能应用样式2.2 组合选择器​ 也称为集体声明​ 将多个具有相同样式的选择器放在一起声明使用逗号,隔开2.3 嵌套选择器​ 在某个选择器内再设置选择器通过空格隔开​ 只有满足层次关系最里层的选择器所对应的标签才会应用样式四、常用CSS属性1. 字体属性​ 定义字体相关的样式属性含义说明font-size大小、尺寸可以使用多种单位font-weight粗细取值normal、boldfont-family字体取值黑体、楷体等2. 文本属性属性含义解释color颜色使用英文单词、16进制的RGB值特定情况下可以缩写如#FFFFFF -- #FFFline-height行高行内容的高度text-align水平对齐方式取值left、center、rightvertical-align垂直对齐方式取值top、middle、bottom可用于图片和文字的对齐方式text-decoration文本修饰取值underline、overline、line-through、none3. 背景属性属性含义解释background-color背景颜色background-image背景图片必须使用url(路径)background-repeat背景图片的重复方式取值repeat(默认)、repeat-x、repeat-y、no-repeatbackground简写一般顺序颜色 | 图片 | 重复方式 | 显示位置4. 元素的显示通过display属性设置元素是否显示以及是否独占一行常用取值none 不显示inline 将块级元素变为行内元素不再独占一行block 将行内元素变为块级元素独占一行inline-block 在inline的基础上允许设置宽和高flex 弹性布局/弹性盒子常用属性justify-content水平对齐、align-items垂直对齐注行级元素默认无法设置宽和高可以为行级元素设置display:inline-block然后就可以设置宽和高了五、盒子模型1. 概念盒子模型是网页布局的基础将页面中所有的元素都看作成一个盒子盒子都包含以下几个属性width 宽度height 高度border 边框padding 内边距margin 外边距2. 盒子属性2.1 border表示盒子的边框分为四个方向border-top、border-right、border-bottom、border-left每个方向都包含三种样式颜色color、粗细width、样式style按方向简写border-top、border-right、border-bottom、border-left书写顺序border-方向 : width style color如果四个边都一样简写border : width style color2.2 padding表示盒子的内边距即内容与边框之间的距离同样也分为四个方向可以简写按顺时针方向、默认上下一样左右一样2.3 margin表示盒子的外边距即盒子与盒子之间的距离同样也分为四个方向可以简写按顺时针方向、默认上下一样左右一样3. 元素所占空间页面中的元素实际所占空间宽width左右padding左右border左右margin高height上下padding上下border上下margin