《前端》css总结（上）

孙同学要努力

已于 2024-02-03 23:53:34 修改

阅读量2.6k

点赞数

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

于 2022-11-14 14:12:05 首次发布

本文链接：https://blog.csdn.net/qq_59702185/article/details/127759196

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言：

css的定义有很多很多，大家不会的就去这个网站现查一下就好：https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration

样式定义方式

行内样式表（inline style sheet）

直接定义在标签的 style 属性内
作用范围：仅对当前标签产生影响
例如：
<img src="/images/大山.jpg" alt="图片无法显示" style="width:300px; height:300px;">

内部样式表（internal style sheet）

定义在 style 标签中，通过选择器影响对应的标签
作用范围：可以对同一页面中的多个元素产生影响

外部样式表（external style sheet）

定义在 css 样式文件中，通过选择器影响对应的标签；可以用 link 标签引入某些页面
作用范围：可以对多个页面产生影响

注释
不能使用 // ，也没有单行注释
只有多行注释
//和/* */在html里也是常用的注释，但只能用在js和CSS语言,不对HTML语言起作用！//只能在js中使用

<!-- 注释 -->

选择器

标签选择器

例如：选择所有的 div 标签

div{
    width: 200px;
    height: 200px;
    background-color: blue;
}

Id选择器

选择ID为 rectangle的标签：

#yellow{
    background-color: yellow;
}

类选择器

选择所有类为rectangle类的标签

.small{
    width: 100px;
    height: 100px;
}

伪类选择器

用于定义元素的特殊状态

链接伪类选择器：

:link：链接访问前的样式（例如：超链接）
:visited：连接访问后的样式（例如：超链接）
:hover：鼠标悬浮时的样式
:active：鼠标点击长按时的样式（例如：button）
:focus：聚焦后的样式（比如输入的文本框，点击时会变大）

建议大家都去动手试一试

.effect:hover{
    transform: scale(1.2);
    transition: 200ms;
    background-color: aqua;
}

位置伪类选择器

:nth-child(n)：选择是其父标签的第n个子元素的所有元素
n为odd表示奇数。even表示所有偶数块（n的取值可以是 an+b的形式，a>0）

目标伪类选择器

:target：当url指向该元素时会生效（就是指链接后会触发target）（前提是我们需要链接）

复合选择器

由两个及以上基础选择器组合而成的选择器

element1，element2：同时选择元素element1和元素element2
element.class（可以串联，element.class1.class2表示同时包含这两个类的标签）：选择包含某类的element元素
element1 + element2：选择紧跟在element1元素后面的那一个element2元素
element1 element2（可以串联）：选择element1内的所有element2元素
element1 > element2（可以串联）：选择父标签是element1的所有element2元素

通配符选择器

*：选择所有标签
[attribute]：选择具有某个属性的所有标签；例如：input[required]{} 选择input里面具有required属性的那一个（例如input标签中具有required标签的）
[attribute=value]：选择attribute值为value的所有标签；例如：input[type=number]{}

伪元素选择器

将特定的内容当做一个元素，选择这些元素的选择器被称为伪元素选择器


:: first-letter	选择第一个字母
::first-line	选择第一行
::selection	选择我们拉动鼠标选中的部分
::after	可以在元素后插入内容（定义在content里面）
::before	可以在元素前插入内容（定义在content里面）

样式渲染优先级

权重大小，越具体的选择器权重越大；!important > 行内样式 > id选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器
权重相同时，后面的样式会覆盖前面的样式
继承自父元素的权重最低

颜色

预定义的颜色值

例如：black、white、red、green、blue、pink等等

十六进制表示法

使用6位16进制数表示颜色；例如：#ADD8E6
其中1-2位表示红色，3-4位表示绿色，5-6位表示蓝色；三原色的取值都是 0-255
#AABBCC等价于#ABC

RGB表示法

rgb(173,216,230)；分别表示红绿蓝

RGBA表示法

rgba(173,216,230,0.5)第四个表示透明度，取值范围为0-1

取色技巧

网页中的颜色，可以在浏览器的调试模式下获取，按F12

其他地方的颜色可以使用qq自带的截图工具获取：按住 ctrl+alt+a进行截图；按c键，可以复制rgb颜色值，按住shift再按c，可以复制16进制的颜色值

文本

text-align

text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。有继承关系，若父标签是居中对齐，则其字标签也是居中对齐。
子标签会继承父标签的对齐方式
text-align: center; 居中对齐
text-align: right；右对齐
text-align: justify; 左右对齐

line-height

行高line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。
子标签会自动继承父标签的字体大小（font-size）
line-height: 1em; 相当于每两行之间的行高为1倍字体的大小
line-height可以实现字体竖直居中（本质就是设置文字占用的实际高度）将行高与元素块高度相同

补充：长度单位

单位	描述
px	设备上的一个像素点
%	相对于父元素的百分比
em	相对于当前元素字体的大小
rem	相对于根元素字体的大小（根元素即为html标签的字体大小）
vw	相对于视窗宽度的百分比
vh	相对于视窗高度的百分比

letter-spacing

文本字符的间距

text-indent

定义一个块元素首行文本内容之前的缩进量。

text-decoration

text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线或闪烁）它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness 属性的缩写。

如果我们不想要下划线，比如超链接，我们可以这样做：
text-decoration: none;

text-shadow

text-shadow为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。（四个组成部分）他的坐标系为：

例如：text-shadow: 4px 4px 2px gray;

字体

font-size： CSS 属性指定字体的大小。因为该属性的值会被用于计算em和ex长度单位，定义该值可能改变其他元素的大小。
font-style： CSS 属性允许你选择 font-family 字体下的 italic （斜体）、normal（正常）或 oblique （斜体）样式。
font-weight： CSS 属性指定了字体的粗细程度。一些字体只提供 normal 和 bold（黑）、light（浅）、lighter（更浅）两种值。
font-family：字体；允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face 指定的可以直接下载的字体。
font-family: serif; 带衬线的字体
font-family: sans-serif; 不带衬线的字体
font-family: monospace; 设置等宽字体
font-family: cursive; 草书

背景

background-color：设置元素的背景色, 属性的值为颜色值或关键字”transparent”二者选其一。
background-image：属性用于为一个元素设置一个或者多个背景图像。（url（’ '）指向图片地址）
渐变色：linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))
background-size：设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，（有两个百分比，第一个是横向的百分比，第二个是纵向的百分比）或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。其中：cover会把图片完全覆盖，contain是指背景不能超过图片的大小
background-repeat： CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。no-repeat、repeat-x、repeat-y
background-position：为背景图片设置初始位置。有 x和 y 两个方向，如果第二个不写，默认是 center；上下为 top和 bottom ，左右为left 和right
background-attachment： CSS 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。fixed 是背景固定
其中，这些选项都可以设置多个背景

补充：opacity是定义透明度的；例如opacity：0.2；

边框

border-style：是一个 CSS 简写属性，用来设定元素所有边框的样式。dotted是点，inset是内嵌，solid是实线，dashed是虚线，可以有四个属性，分为上右下左，也可以是两个，上下为一组，左右为一组；
border-width属性可以设置盒子模型的边框宽度。
border-color：是一个用于设置元素四个边框颜色的快捷属性： border-top-color, border-right-color, border-bottom-color, border-left-color
border-radius：允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。50%就是设置成一个圆形；还有其他特殊的形状，例如：border-radius: 50% 20% / 10% 40%；波浪形…可以看mdn官网
border-collapse： CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。border-collapse: collapse；separate就是分开
注意：以上的每个属性都有四个，如果定义的少了，上下是对应的，左右是对应的；