关于CSS样式

know what one is about

已于 2023-11-24 22:50:19 修改

阅读量176

点赞数 8

文章标签： css 前端

于 2023-11-24 22:48:21 首次发布

本文链接：https://blog.csdn.net/weixin_47027760/article/details/134608014

版权

一、概述

1.1 什么是CSS及其作用

1.2 如何在html页面中添加CSS样式代码

7.1.4 盒子模型之Padding内边距

8.2.7 行内元素垂直对齐方式vertical-align

8.2.8 显示层级

一、概述

1.1 什么是CSS及其作用

Cascading Style Sheet:层叠样式表, 作用: 负责美化页面, 如果html是盖房子,CSS相当于是

装修。

1.2 如何在html页面中添加CSS样式代码

（1）三种引入方式

内联:在标签的style属性中添加样式代码, 弊端:不能复用
内部:在head标签里面添加style标签,标签体内写样式代码,通过选择器先找到元素对象, 然后再添加样式, 好处是可以复用, 但是只能在当前页面复用,不能多页面复用
外部:在单独的css样式文件中写样式代码, 在html页面中引入此文件即可, 这样的话是可以实现多页面复用的

（2）工作中因为需要多页面复用所以外部样式会用的更多, 学习过程中内部样式演示方便所以更多使用内部样式

二、选择器

2.1 选择器的作用

-------用来选取页面中的标签

2.2 选择器分类

（1）标签名选择器: 匹配到页面中所有同名标签

格式: 标签名{样式代码}

（2）id选择器: 当需要选择页面中某一个元素时,给元素添加id,然后通过id选择器选择到元素

格式: #id{样式代码}

（3）类选择器: 如果需要选择多个不相关的元素时, 给多个元素添加相同的class属性, 然后通过类

选择器进行选择

格式: .class{样式代码}

（4）分组选择器: 将多个选择器划分为一组(可以理解为将多个选择器合并成一个选择器)

格式: 标签名,#id,.class{样式代码}

（5）任意元素选择器: 匹配页面中所有元素,包括html和body

格式:*{样式代码}

（6）子孙后代选择器: 通过元素和元素之间的关系匹配元素

格式:body div div p{样式代码} 匹配body里面的div里面的div里面的所有p包括后代

（7）子元素选择器:通过元素和元素之间的关系匹配元素

格式:body>div>div>p{样式代码} 匹配body里面的div里面的div里面的所有p子元素不包含后代

（8）伪类选择器: 匹配的是元素的状态,包括:未访问状态/访问过状态/悬停状态/点击状态

格式: a :link未访问/visited访问过/hover悬停/active激活{样式代码}

三、颜色赋值

（1）三原色: 红绿蓝 RGB Red Green Blue , 每个颜色的取值范围0-255

（2）五种颜色赋值方式

颜色单词赋值: red/yellow/pink/purple…
6位16进制赋值: #ff0000
3位16进制赋值: #f00 每一位重复一次等效ff0000
3位10进制赋值: rgb(255,0,0)
4位10进制赋值: rgba(255,0,0,0-1) a=alpha 设置透明度值越小越透明

四、背景样式

background-image:url(“资源路径”); 设置背景图片
background-size: 宽度高度; 设置背景图片尺寸
background-repeat: no-repeat; 禁止重复
background-position: 横向偏移值纵向偏移值; 设置背景图片的位置,可以将偏移值换成偏移的百分比

五、文本和字体相关样式

text-align:left/right/center; 设置水平对齐方式
text-decoration:overline上划线/underline下划线/line-through删除线/none去掉文本修饰; 设置文本修饰
text-shadow:颜色 x偏移值 y偏移值浓度; 设置文本阴影
line-height:20px; 设置行高,默认高度包裹文本, 可以实现垂直居中
font-size:20px; 设置字体大小
font-weight:bold/normal; 设置加粗和去掉加粗
font-style:italic;设置斜体
font-family: xxxx,xxx,xxx; 设置字体
font: 30px xxx,xxx,xxx; 设置字体大小+字体

六、设置元素的显示方式 display

block: 块级元素, 特点: 独占一行并可以修改宽高, 包括:h1-h6,p,div
inline: 行内元素, 特点: 共占一行,不能修改宽高, 包括:span,b,i,u,s,超链接a
inline-block:行内块元素,特点: 共占一行并可以修改宽高,包括:input,img
none: 隐藏元素

七、关于盒子模型

7.1盒子模型的结构及其作用

（1）盒子模型= content内容+margin外边距+border边框+padding内边距

（2）盒子模型用来控制元素的显示效果:

content内容: 控制内容的显示宽高
margin外边距: 控制元素的显示位置
border边框: 控制边框效果
padding内边距: 控制元素内容的位置

7.1.1 盒子模型之Content内容

（1）作用：用来控制元素的显示宽高
（2）相关样式:

width 设置宽度
height 设置高度

（3）两种赋值方式: 1. 像素 2. 上级元素的百分比
注意：行内元素不能修改宽高,如果必须修改则将元素改成块级或行内块。

7.1.2 盒子模型之Margin外边距

（1）作用:用来控制元素显示的位置
（2）元素距上级元素或相邻兄弟元素的距离称为外边距
（3）赋值方式:

margin-left/right/top/bottom:10px; 单独某一个方向添加外边距
margin:10px; 四个方向添加外边距
margin:10px 20px; 上下和左右赋值左右auto时为居中
margin:10px 20px 30px 40px; 上右下左顺时针赋值

（4）上下相邻彼此添加外边距,取最大值. 左右相邻彼此添加外边距两者相加
（5）行内元素上下外边距无效
（6）粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题, 给上级元素添加overflow:hidden解决此问题！！！

7.1.3 盒子模型之border边框

（1）作用:控制边框效果
（2）赋值方式:

border:粗细样式颜色; 四个方向添加边框
border-left/right/top/bottom:粗细样式颜色; 单独某一个方向添加边框

（3）border-radius:10px; 设置圆角值越大越圆

7.1.4 盒子模型之Padding内边距

（1）作用: 控制元素内容的位置
（2）赋值方式: 和外边距类似

padding-left/right/top/bottom:10px; 单独某个方向赋值
padding:10px; 四个方向赋值
padding:10px 20px; 上下和左右赋值
padding:10px 20px 30px 40px; 上右下左顺时针赋值

（3）默认情况下给元素添加内边距会影响元素的宽高, 给元素添加box-sizing:border-box;后则不会影响宽高

八、CSS的三大特性及定位方式

8.1 三大特性

继承性:元素可以继承上级元素文本和字体相关的样式,部分标签自带效果不受继承影响,比如:超链接的字体颜色
层叠性: 多个样式可以作用在同一个元素之上层叠显示, 多个选择器可能选择到同一个元素,如果作用的样式不同则全部生效,如果作用的样式相同则由优先级决定.
优先级: 指选择器的优先级, 作用范围越小优先级越高,继承属于间接选中元素所以优先级最低 !important>id>class>标签名>继承

8.2 定位方式

相对定位
绝对定位
静态定位
固定定位
浮动定位

8.2.1 静态定位(文档流定位)

（1）默认的定位方式
（2）格式: position:static
（3）特点: 元素以左上为基准, 块级元素从上往下依次排列,行内元素从左向右依次排列, 默认情况下无法实现元素层叠效果

8.2.2 相对定位

（1）格式: position:relative;
（2）特点: 元素不脱离文档流(不管元素显示到什么位置,都占着原来的位置) ,通过left/right/top/bottom 相对于元素初始位置做偏移
（3）应用场景: 当需要对页面中某一个元素位置进行微调时使用

8.2.3 绝对定位

（1）格式:position:absolute;
（2）特点: 元素脱离文档流(不占原来的位置), 通过left/right/top/bottom 相对于窗口(默认)或某一个上级元素做位置偏移(如果相对于某个上级元素做偏移需要将上级元素设置为相对定位)
（3）应用场景: 当需要往网页面中添加一个元素并且需要实现层叠效果,这个元素又不能影响其它元素的位置的时候

8.2.4 固定定位

（1）格式: position:fixed;
（2）特点: 元素脱离文档流,通过left/right/top/bottom相对于窗口做位置偏移
（3）应用场景: 当需要将某个元素固定在窗口的某个位置时使用.

8.2.5 浮动定位

（1）格式: float:left/right
（2）特点: 元素脱离文档流, 从当前行向左或向右浮动, 当撞到上级元素的边缘或其它浮动元素时停止.
（3）应用场景: 当需要将纵向排列的元素改成横向排列时使用浮动定位
一行装不下时会自动换行, 换行时有可能被卡主
（4）当元素的所有子元素全部浮动时,自动识别的高度为0, 后面的元素会顶上来导致显示异常, 给元素添加overflow:hidden 解决此问题