小白之旅17-1
Posted demonycw
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小白之旅17-1相关的知识，希望对你有一定的参考价值。
CSS
1. 概述
Cacasding Style Sheet，级联（层叠）样式表
专门用于设置页面标签的样式
注释：/* 注释内容 */
2. 标准格式
格式：
选择器
? 样式名1：值1;
? 样式名2：值2;
? ...
3. CSS的引入
1.1 内联样式
写法：把样式写在标签内
特点：只能影响到这个一个标签
格式：
<标签名 style="样式名1:值1;样式名2:值2;...">
1.2 内部样式表
写法：将style标签写在head中，在这个style标签中使用css的标准书写格式进行样式的统一设置
特点：可以影响到整个页面的标签
格式：
<head>
<style type="text/css">
选择器
样式名1：值1;
样式名2：值2;
...
</style>
</head>1.3 外部样式表
写法：在外部定义一个.css的文件，然后在这个css文件中使用css的标准书写格式进行多个页面样式的统一设置，
最后使用link标签在想要使用该css文件的页面的head中引入。
特点：可以影响到多个页面的标签
格式：
1.4 三种样式写法的优先级
1、内联样式>内部、外部
2、内部、外部谁写在后面样式就跟着谁
4. 选择器
概念：根据指定的形式定位到指定元素的方式
4.1 元素选择器
格式：
? 标签名样式
4.2 类选择器
做法：为指定标签添加class属性，并为这些标签设置相同的class值
格式：
.class值样式
4.3 id选择器
做法：为指定的标签添加id属性，并为这个标签设置id值
格式：
id值样式
4.4 分组选择器
格式：
选择器1,选择器2,选择器3,...样式
4.5 通配符选择器
格式：
*样式
通配符选择器可以将样式设置到所有标签上
4.6 子代选择器、后代选择器
子代：父标签>子标签样式，直接的子标签
后代：父标签 子标签样式，可以有多层次内部标签
4.7 属性选择器
根据属性的有无和属性值的匹配来确定要修改样式的标签
格式：
1、选择器 [属性名1] [属性名2] ...样式
2、选择器 [属性名1=‘值1‘] [属性名2=‘值2‘] ...样式
4.8 伪类选择器
格式：
选择器:xxx样式
1、link，超链接的默认状态
2、active，按住状态
3、visited，超链接访问过的状态
4、hover，鼠标悬停的状态
5、nth-of-type(2n+1)
5. 盒子模型
盒子模型研究的是一个元素的边框、内边距、外边距、内容的位置关系
5.1 边框 border
由3部分组成
- 粗细
- 颜色
- 样式：取值：dotted、dashed、double、solid
边框圆角：border-radius
5.2 内边距 padding
边框到内容的间距
padding：npx，设置4个方向的内边距都是npx
padding-xxx：npx，设置某一方向的内边距是npx
padding：apx bpx cpx dpx，设置上右下左方向的内边距分别是a、b、c、d
padding：npx mpx，设置上下和左右的内边距分别是n、m
注：内边距会使整个盒子的大小发生变化
5.3 外边距 margin
标签之间的距离
用法同padding
注：两个盒子的上下外边距取较大值，两个盒子的左右外边距相加。
6. 浮动样式
float：left/right
清除浮动：clear：left/right/both
7. 行内和块级元素
行内：inline，可以与其他行内元素处于同一行
块级：block，上下换行，独占一整段
行内和块级的切换：style="display:inline/block"
隐藏：display:none
8. 显示和隐藏
显示：
1、visibility：visible
2、display：inline/block
隐藏：
1、visibility：hidden，占位置
2、display：none，不占位置
9. 定位
position
取值：
1、static：默认
2、absolute：绝对定位，根据当前页面做位置上移动
3、relative：相对定位，根据元素所在的原始位置进行移动
4、fixed：固定定位，与绝对定位相同，但是它不会随着页面的向下滚动而发生位置的改变
以上是关于小白之旅17-1的主要内容，如果未能解决你的问题，请参考以下文章