[前端]-CSS

「已注销」

已于 2022-06-27 21:01:59 修改

阅读量325

点赞数

分类专栏：前端文章标签： css 前端 css3

于 2022-05-29 20:04:24 首次发布

本文链接：https://blog.csdn.net/besthezhaowen/article/details/125028511

版权

本文详细介绍了CSS的语法规范，包括行内样式、内部样式和外部样式。重点讲解了CSS的特性，如继承性、层叠性和优先级。此外，文章详细探讨了选择器的种类，如通用选择器、元素选择器、ID选择器和类选择器等。内容还包括尺寸和边框的设置，框模型的概念，背景属性，渐变效果，文本格式化以及表格的样式。还深入讲解了CSS3的新特性，如复杂选择器、弹性布局、转换、过渡和动画。最后，文章提到了CSS的优化和重置方案。

摘要由CSDN通过智能技术生成

1. CSS语法规范

1.1 使用方式

1.1.1 行内样式/内联样式

将css的样式写在元素的style属性中，key value间使用冒号，结束使用分号

color: 字体颜色
background-color: 背景色
font-size: 字体大小

语法：

<any style="样式声明"/>
样式声明：
  样式属性:样式值;

特点：

内联样式无法重用
内联样式优先级最高
由于内联样式优先级最高，无法被修改，所以项目中基本不用

1.1.2 内部样式

<html>
  <head>
    <style>
      选择器{样式声明}
    </style>
  </head>
  <body>

  </body>
<html>

内部样式只能在本页面内重用，项目中使用少

1.1.3 外部样式

rel必需写，否则不生效

<html>
  <head>
    <link rel="stylesheet" href="xxx.css"/>
  </head>
  <body>

  </body>
<html>

1.2 css的特性

1.2.1 继承性

有嵌套关系的元素之间，子元素可以继承父元素的css效果，css的大部分是可以被子元素继承的，有一些是不能继承的。

例如：a标签的字体颜色是不继承的

1.2.2 层叠性

可以为一个元素设置多个样式，如果不冲突，则会同时作用到元素上

1.2.3 优先级

当样式冲突时，根据优先级应用样式，默认优先级从高到低：

（1）内联样式

（2）内部样式和外部样式采用就近原则（html, css, js是解释型语言，从上往下逐行执行）

（3）浏览器默认样式

1.2.4 调整优先级

!important

2. 选择器

2.1 通用选择器

*{样式声明}  基本不使用，唯一可能使用的场景如下：
*{margin:0; padding:0}  当为0时，单位可以省略

2.2 元素选择器/标签选择器

div{color: red;}
页面中所有对应元素都应用该样式
主要用于设置某种元素的默认样式
特殊用法：可以让它的子元素继承该配置
body{margin:0;padding:0;}

2.3 id选择器

#{id}{样式声明}
只对当前页面的一个元素生效，在项目中很少单独使用，通常会作为子代选择器和后代选择器的一部分

2.4 类选择器

是一种公共样式，谁想使用就增加对应的class即可
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>类选择器</title>
  <style>
    .font36{font-size: 36px;}
    .text-danger{color: red;}
    .bg-warning{background-color: yellow;}
  </style>
</head>
<body>
  <span class="text-danger font36 bg-warning">乐高</span>
</body>
</html>

使用方式：

1. 多类选择器
一个元素引用多个类选择器
<any class="类名1 类名2 ...">

2. 分类选择器
（1）.类名1.类名2{样式声明}
.font36.text-danger{font-style: italic}
表示元素同时有class属性font36和text-danger时，字体使用斜体
（2）元素名.类名{样式声明}

2.5 群组选择器

#id1{color:red;}
.c1{color:red;}
p{color:red;}
等同于
#id1,.c1,p{color:red;}

2.6 后代选择器

通过元素的后代关系匹配元素

ul li a{color: red}
只对ul标签下的，li标签下的，a标签使用该样式，其他的a标签不起作用
由于是后代选择器，上面的方式等同于：
ul a{color: red}

2.7 子代选择器

选择器1>选择器2>选择器3...{样式声明}
子代选择器和后代选择器可以混写: div p>span{}

2.8 伪类选择器

匹配元素不同状态的选择器
1. a标签的未点击状态
a:link{color:red;}
2. a标签访问后的状态
a:visited{color:yellow;}
3. a标签鼠标悬停时的状态
a:hover{color:blue;}
4. a标签激活状态
a:active{color:purple;}

当以上四个选择器同时作用域一个元素上时，需要有严格的编写顺序才能生效
爱恨原则 love & hate
a:link{color:red;}
a:visited{color:yellow;}
a:hover{color:blue;}
a:active{color:purple;}

2.9 选择器权值

选择器默认自带权值，权值越高，优先级越高
1. !important >1000
2. 内联样式  =1000
3. id选择器  =100
4. class和伪类  =10
5. 元素标签选择器  =1
6. *通用选择器  =0
7. 继承的样式  无权值（参与计算的资格都没有）

如果计算出来的权值相同，那么就根据就近原则进行适用

1. 当一个选择器中含有多个选择器时，需要将所有的选择器权值进行相加，然后比较，权值大的优先显示；

2. 权值相同，则适用就近原则

3. 群组选择器的权值单独计算，不能进行相加

4. 样式后面添加“!important”，直接获取最高优先级，不再进行权值计算

内联样式不能使用“!important”

5. 选择器权值计算，不会超过自己的最大数量级

快捷键：

lorem[N] + tab：自动生成对应长度的文本
div#id.class{content}>son+brother...：快速生成html

3. 尺寸和边框

3.1 尺寸属性

3.1.1 作用

设置元素的宽度和高度

3.1.2 属性

width：宽度
max-width：最大宽度（前提是不能定宽度）
min-width：最小宽度（前提是不能定宽度）
height：高度
max-height：最大高度（前提是不能定高度）
min-height：最小高度（前提是不能定高度）

1. 块级元素不写宽度时，默认宽度是父容器宽度的100%
2. 块级元素不写高度时，默认高度靠内容撑起来（没有内容，那么高度为0）
3. 行内元素设置宽高无效（例如：span），宽高完全靠内容撑起
4. 自带宽高属性的元素，设置宽高有效，哪怕是行内元素（例如img，table）

取值：

绝对值：
px：像素
in：英寸 1in = 2.54cm
pt：磅值 1pt = 1/72in
cm: 厘米
mm：毫米

相对值：
百分数：父元素的百分比
em：以父元素的数值作为基本单位（例如，如果父元素的font-size设置为16px，当前元素font-size设置为3em，那么当前元素的font-size实际值为：3 * 16px = 48px），用的很少
rem：以html的数值当作基本单位，用的多

3.2 溢出

overflow: 默认是纵向溢出
   visible：默认是visible，代表内容纵向溢出，但可见
   hidden：隐藏，溢出部分不可见
   scroll：滚动展示，不管溢出不溢出，都有滚动条
   auto：溢出有滚动条，不溢出没有滚动条
overflow-x:
overflow-y:

设置横向溢出：
  将内部容器的宽度设置成大于外部容器的宽度就会造成横向溢出（默认情况下，由于内部容器的宽度是外部容器宽度的100%，不会横向溢出）

3.3 边框

1. 简写
border: width style color;
border: 2px solid red;

style:
   solid: 实线
   dotted：点虚线
   dashed: 短线虚线
   double：双实线
color：
  1. 颜色英文单词
  2. #rrggbb 6位16进制数
     #aabbcc可以简写成#abc  
  3. rgb(r, g, b): 使用十进制，例如：rgb(255, 0, 0) 
  4. rgba(r, g, b, alpha), alpha代表透明度，取值0-1，0是完全透明，1是不透明
  5. transparent: 代表完全透明，等同于rgba(0,0,0,0)

2. 边框单属性定义
border-color
boder-style
border-width

3. 单边定义
border-top
border-bottom
border-right
border-left

4. 边框倒角
border-radius：
  1. px
  2. 百分数：50%及以上就不在变了，因为已经变成了圆
  3. border-top-left-radius
5. 边框阴影
box-shadow
  1. h-shadow: 水平方向的阴影偏移
  2. v-shadow: 垂直方向的阴影偏移
  3. blur：阴影模糊距离
  4. spread：阴影尺寸
  5. color：阴影颜色
  6. inset/outset: 设置内部阴影和外部阴影

倒三角按钮：

#but01 {
      width: 0;
      border: 50px solid transparent;
      border-top: 50px solid red;
}

3.4 轮廓

边框的边框

outline: 属性和border一样
轮廓不占空间，在项目中通常是删除轮廓
outline:0; 即可删除轮廓，也可以写成：outline:none;

4. 框模型/盒子模型

指的是一种计算元素实际占用空间大小的方式

实际占用宽度=左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距

实际占用高度=上外边距+上边框+上内边距+内容区域宽度+下内边距+下边框+下外边距

外边距：margin，表示边框以外的距离，元素与元素之间的距离

内边距：padding，表示边框到内容区域的距离

4.

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录