CSS位置与基本
位置：
内联样式
内部样式：在<head>里放<style>标签，style中存放网页标签的样式，不支持HTML语法标签。
外部样式：适用于多个样式共享样式，使用最多；在网页中使用<link>引入外部样式：<link rel="styleSheet" href="./css/text.css">。
基础：
CSS优先级：内联样式>id>class>元素选择器
CSS单位：像素px
CSS选择器
1. 元素选择器：通过元素选择
2. id选择器：只能在元素中唯一命名，不能重复，id=""；使用#+id选中。
3. 类/class选择器：可以重复命名；一个元素中可以使用多个类名，用空格隔开：class="a c m"，使用.+class名选中。
4. 伪类选择器：是一种特殊类，表示元素特殊状态，点击时效果，鼠标引入时效果
选中规则：选择器：伪类名
- first-child：同类元素的第一个元素
- last-child：同类元素的最后一个元素
- nth-child()：选中同类元素的指定元素；()里写n表示选中0到正无穷，2n表示偶数行，2n+1表示奇数行。
超链接的伪类：
- a:link{}：link表示未访问过的链接，a标签独有
- a:visited{}：visited表示访问过的链接，一般不会去修改访问过的链接样式，a标签独有
- a:hover{}：鼠标移入效果，所有元素都可使用
- a:active{}：鼠标点击效果，所有元素都可使用
盒子模型
box model：用于CSS布局，在CSS中将所有元素设计为一个矩形的方块
内容区：content
边框：border
1. border-width：默认3px
- 设置四个值：对应上、右、下、左
- 设置三个值：对应上、左右、下
- 设置2个值：对应上下、左右
- 设置一个值：上下左右都一样
2. border-color：如果未设置边框颜色，默认使用color属性的值
3. border-style
- 边框样式，默认为none
- dotted: 定义一个点线边框
- dashed: 定义一个虚线边框
- solid: 定义实线边框
- double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
- 简写：border-style:dotted solid double dashed;对应上右下左
4. 边框-单独设置各边
- 上边框：border-top-style
- 右边框：border-right-style
- 下边框：border-bottom-style
- 左边框：border-left-style
内边框：padding
指边框与内容区的距离，会改变盒子的大小
- padding-top：上内边框，上边框与内容区的距离
- padding-bottom：下内边框，下边框与内容区的距离
- padding-right：右内边框，右边框与内容区的距离
- padding-left：左内边框，左边框与内容区的距离
- 简写：Padding属性，可以有一到四个值。对应上右下左
外边框：margin
- auto：设置浏览器边距
- length：定义一个固定的margin（使用像素，pt，em等）
- %：定义一个使用百分比的边距
- margin-top：移动相邻元素，自身位置不变
- margin-bottom：移动相邻元素，自身位置不变
- margin-right：移动相邻元素，自身位置不变
- margin-left：移动相邻元素，自身位置不变
扫一扫
156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
