CSS

最新推荐文章于 2022-05-14 16:15:00 发布

ノラガミ

最新推荐文章于 2022-05-14 16:15:00 发布

阅读量69

点赞数

本文链接：https://blog.csdn.net/weixin_45407027/article/details/102490958

版权

CSS

层叠样式表

CSS语法的使用方式

分类
1. 行内样式表：在元素上添加style属性，属性中定义样式表
2. 内部样式表：在head中添加一对style标签对，定义样式
3. 外部样式表：在外部定义css文件，使用link标签在head中进行引入
  - 使用link标签引入外部的样式表
样式表的优先级
- 离元素近的优先级高

CSS选择器

选中某些元素

样式：

选择器 {
	样式;
	样式;
	样式;
	...
}

基础选择器

id选择器：#id属性值 {样式;…} 根据元素的id属性的值，精确定位到某一个元素
class选择器：.class属性值 {样式;…} 根据元素的class属性的值，匹配一个或者多个元素
- 元素的class属性值可以重复，值列表可以有多个值
元素|标签选择器：标签名 {样式;…} 根据标签名匹配一个，或多个元素
通用选择器：* {样式;…} 匹配页面中的所有元素
- 清除浏览器的默认样式：
```
* {
	padding:0;
	margin:0;
}
```
基础选择器的优先级：
- id > class > 元素

其他选择器

属性选择器
- 选取带有指定属性的元素：[属性名]{…}
- 选取带有指定属性和值的元素：[属性名=属性值]{……}
- 选取属性值中包含指定词汇的元素：[attribute~=value]
- 选取带有以指定值开头的属性值的元素，该值必须是整个单词：[attribute|=value]
- 匹配属性值以指定值开头的每个元素：[attribute^=value]
- 匹配属性值以指定值结尾的每个元素：[attribute$=value]
- 匹配属性值中包含指定值的每个元素：[attribute*=value]
群组|分组选择器
- 选择器1，选择器2，选择器3，…{ 样式;… }
关系|组合选择器
1. 后代选择器：选择器1 选择器2 {…}
2. 子元素(第一代子元素)选择器：选择器1 > 选择器2 {…}
3. 相邻兄弟选择器：选择器1 + 选择器2 {…}
4. 普通兄弟选择器：选择器1 ~ 选择器2 {…}
伪类
1. E:link 未访问显示的样式
2. E:visited 访问后显示的样式
3. E:hover 鼠标悬停在上面的时候显示的样式(常用)
4. E:active 鼠标点击时显示的样式
5. E:checked 被选中时显示的样式(一般指表单元素)
伪元素
- 伪元素是指在HTML的文档指定的信息之外，创建了文档的额外信息
- 语法：选择符：伪对象{属性：属性值}
  - E:before/E::before
  - E:after/E::after

样式

背景样式 background

background-color：背景颜色
- 颜色的英文单词
- 十六进制#
- rgb(0~255， 0~255， 0~255)
- rgba(0~255， 0~255， 0~255， 0~1) a是透明度，0~1，0完全透明，1完全不透明
background-image 背景图片
- url(路径)
background-repeat 背景图像是否平铺
- repeat 平铺
- no-repeat 不平铺
- repeat-x x轴平铺
- repeat-y y轴平铺
background-size 背景图像大小
background-position 背景图像位置

文本 text

color 设置文本的颜色
text-align 设置文本对齐方式，center（居中），left（左对齐），right（右对齐）
text-decoration 规定添加到文本的修饰
- underline 对文本添加下划线
- overline 对文本添加上划线
- line-through 对文本添加中划线
- none 关闭原本应用到元素上的所有装饰
text-indent 设置文本首行缩进

字体 font

font-family 设置文本的字体
font-size 设置文本大小
font-style 字体风格，该属性最常用于规定斜体文本
- normal：文本正常显示
- italic：文本斜体显示
- oblique：文本强制倾斜
font-weight 字体加粗，该属性设置文本的粗细
- bold|bolder：可以将文本设置为粗体
- 100 ~ 900：从细到粗，700等价于bold，其他无太大差别

列表 list

list-style
- list-style-type：列表项目标记样式
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8qeRTJAE-1570713063583)(D:\SHSXT\初级班\WEB\PDF\img\1570705191004.png)]
- list-style-position：列表项目标记位置
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r9cFWrwJ-1570713063585)(D:\SHSXT\初级班\WEB\PDF\img\1570705252223.png)]
- list-style-image：把图像设置为列表中的项目标记
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ghvEolNR-1570713063585)(D:\SHSXT\初级班\WEB\PDF\img\1570705266731.png)]

复合属性

background：推荐使用
- 通过复合属性设置背景的相关样式，没有顺序和内容个数的要求
font：不推荐使用
list-style：none ; 去除列表项标记

对齐方式

text-align 使用在行内元素上无效
- 属性值：left center right
line-height 行高
- 默认一行中的内容在这一行中是垂直居中的
- 保证块元素中的内容的行高与块元素的高度相同，就能达到垂直居中的效果
vertical-align 块元素无效
- 给同行的行内元素设置vertical-algin属性控制其垂直方向的对齐方式
- 属性值：top bottom middle
display
- inline 行内元素
- block 块元素
- inline-block 行内块，块元素和行内元素的特点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-euK9qDes-1570713063586)(D:\SHSXT\初级班\WEB\PDF\img\1570705509416.png)]
块元素中多行文本垂直居中
- 父元素：
  - display：table;
- 子元素：
  - display：table-cell;
  - vertical-align：middle;
以上垂直水平居中都是指行内，行内块，文本的对齐方式
- 如果想要控制块元素在其父级中的对齐方式，需要利用到盒子模型

盒子模型

盒子模型内容

内容 + 内边距padding + 边框border + 外边距margin
- 能看到的元素大小：内容 + 内边距 + 边框
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hcdJgN2D-1570713063586)(D:\SHSXT\初级班\WEB\PDF\img\1570706951132.png)]

padding：内边距

给内外边距设置值：
- padding：50px; 四周的内边距都是50px
- padding：50px 100px; 上下50px 左右100px
- padding：10px 50px 100px; 上右下左边有对边一样50px
- padding：10px 50px 80px 100px; 上右下左
元素设置背景的时候，内容区域设置背景，但是背景会延伸到内边距上

border：边框

边框三要素：宽度样式颜色;
- border-width：
- border-style：
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-47y7eQsu-1570713063587)(D:\SHSXT\初级班\WEB\PDF\img\1570707478927.png)]
- border-color：
其他属性：
- border-collapse：设置是否将表格边框折叠为单一边框
  - separate（默认，单元格边框独立）
  - collapse（单元格边框合并）
- border-spacing：设置分隔单元格边框的距离
  - border-collapse: separate;的状态下才有效
可以单独设置某个方向的边框：
- border-top：宽度样式颜色;
- border-left：宽度样式颜色;
- border-right：宽度样式颜色;
- border-bottom：宽度样式颜色;

margin：外边距

块元素的上下外边距会合并，以大的值为主要
行内元素没有上下外边距
行内元素上下内边距无效

浮动

float 浮动

让元素按照一定的方向进行移动，当遇到周围其他浮动元素|父级的边界的时候停止移动
移动方向：left right none
行内元素设置高度
块元素一行显示
clear
- left 我的元素左边不能有浮动元素
- right 我的元素右边不能有浮动元素
- both 我的元素两边都不能有浮动元素—推荐
文档流：块元素从上倒下行内元素从左到右

定位

CSS 定位 (positioning) 属性允许你对元素进行定位，定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置

CSS 有三种基本的定位机制：普通流、浮动和绝对定位

除非专门指定，否则所有框都在普通流中定位，即普通流中的元素的位置由元素在HTML 中的位置决定

浏览器在读取HTML源代码的时候是根据元素在代码出现的顺序读取，最终元素的呈现方式是依据元素的盒子模型来决定的。行内元素是从左到右，块状元素是从上到下。默认的书写方式即是普通流

position（绝对定位）
- static：没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
- relative：生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
- absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
- fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定