CSS

CSS
前端
发布日期:   2024-06-16
更新日期:   2024-12-26

CSS 样式

CSS 应用于文档的三种方法：使用外部样式表、使用内部样式表和使用内联样式

优先级：后来者居上

内联样式

直接写在标签里，用 style 标记的

<example style="属性: 值;"></example>

尽量不要写这种

  • CSS 维护效率低下
  • CSS 与 HTML 混淆

内部样式

在 <head> 中编写 <style> 标签

<head>
    <style>
        选择器 {
            属性: 值;
        }
    </style>
</head>

外部样式

在单独的 CSS 文件中引用 CSS，在 <head> 中使用 <link> 标签加载 CSS 文件

<link rel="stylesheet" href="CSS路径.css" />

CSS 选择器

用来指定网页上我们想要样式化的 HTML 元素

优先级：行内样式 > ID 选择器 > 类选择器 > 元素选择器 > 通配选择器

基础选择器

通配选择器

选中 HTML 元素，基本只有清除样式时才会有用

* {
	属性: 值;
}

元素选择器

为某个标签设置统一样式

标签 {
    属性: 值;
}

类选择器

根据元素 class 选中某些元素

// CSS 格式
.类名 {
    属性: 值;
}

// html
<example class="类名"></example>
<example class="类名1 类名2"></example>  <!--使用多个类格式-->

id 选择器

精准选择某个元素，多个元素 id 值不推荐相同

// CSS 格式
#id值 {
    属性: 值;
}

// html
<example id="id"></example>

组合选择器

交集选择器

选中同时符合多个条件的元素但一般不含 id，都 id 了直接固定选出了

标签.类名#id {
   属性: 值;
}

并集选择器

选中多个选择器对应的元素

选择器1,
选择器2,
选择器3 {
    属性: 值;
}

后代选择器

选中指定元素的后代元素

选择器1 选择器2 选择器3 {  // 按祖孙顺序排列
   属性: 值;
}

子代选择器

选中指定元素的子代元素儿子的儿子不是我的儿子

选择器1 > 选择器2 {
    属性: 值;
}

相邻兄弟选择器

选中指定元素的紧随其后元素只看标签之后的，而且两选择器之间不包含其他选择器

选择器1 + 选择器2 {
    属性: 值;
}

通用兄弟选择器

选中指定元素的所有同级元素

选择器1 ~ 选择器2 {
    属性: 值;
}

属性选择器

根据标签属性值选取元素

[属性]       // 选中具有属性的元素
[属性="值"]   // 选中具体属性具体值的元素
[属性^="值"]  // 选中以"值"为属性开头的元素
[属性$="值"]  // 选中以"值"为属性结尾的元素
[属性*="值"]  // 选中属性值包含"值"的元素

伪类选择器

定义元素特殊状态的属性比如是否被访问等

所谓伪类，就是很像类但不是类——比如元素是否为访问，是两种不同状态，但没有用 class 的类作具体区分。

动态伪类

这种选择器根据用户操作变化

语法 含义
选择器:link {} 未被访问
选择器:visited {} 已经被访问过
选择器:hover {} 鼠标悬停
选择器:active {} 元素激活(鼠标按下没弹起)
选择器:focus {} 获取焦点(输入框输入中)
选择器: checked {} 选择按钮选中
选择器:target{} 点击超链接后目标更改
  • link、visited、hover、active 元素按照顺序定义，不然会出现某些元素不响应的可能
  • link 和 visited 只能应用在 <a> 标签上
  • focus 只能应用在表单标签上
  • checked 只能用于复选框和单选按钮

结构伪类

根据元素父子结构选中的元素

语法 含义
祖宗选择器 子选择器:first-child {} 祖宗选择器的后代中任意一个嫡长子——子选择器父亲是谁无所谓，但必须是第一个儿子
祖宗选择器 子选择器:last-child {} 祖宗选择器的后代中任意一个嫡幺子——子选择器父亲是谁无所谓，但必须是最后一个儿子
祖宗选择器 子选择器:nth-child(n) {} 祖宗选择器的后代中任意排 $n$ 的儿子——也可以是公式
祖宗选择器 子选择器:nth-last-child(n) {} 祖宗选择器的后代中任意排倒数 $n$ 的儿子——也可以是公式
祖宗选择器 子选择器:only-child(n) {} 祖宗选择器后代中没有兄弟的子选择器
祖宗选择器 子选择器:first-of-type(n) {} 祖宗选择器后代的这种类型的第一个儿子，不一定非得是第一个儿子
祖宗选择器 子选择器:last-of-type(n) {} 祖宗选择器后代的这种类型的最后一个儿子
祖宗选择器 子选择器:nth-of-type(n) {} 祖宗选择器后代的这种类型的第 $n$ 个儿子
祖宗选择器 子选择器:nth-last-of-type(n) {} 祖宗选择器后代的这种类型的第倒数 $n$ 个儿子
祖宗选择器 子选择器:only-of-type {} 祖宗选择器后代中没有同类型兄弟的选择器
:root {} 选中 html 元素
选择器:empty {} 选中没有内容的元素

否定伪类

在选中元素中排除某些元素

选择器规则1:not(选择器规则2) {
    属性: 值;
}

属性伪类

语法 含义
选择器:disabled {} 选中不可用的表单元素
选择器:lang(值) {} 选中指定 lang 属性的元素

伪元素选择器

选中元素中特定的元素

语法 含义
::first-letter {} 选中元素中第一个文字
::first-line {} 选中元素的最后一个文字
::selection {} 被鼠标选中文字
::placeholder {} <input> 元素中提示文字
::before {content:"值"} 在元素开头插入值
::after {content:"值"} 在元素最后插入值

常用 CSS 属性

颜色

渐变色

语法 含义
background-image: linear-gradient(to 方向, 颜色i 位置i) 线性渐变
· 方向：可以用一个或两个方向来做横纵渐变或斜向渐变（可选）
· 位置：从哪个位置开始渐变（可选）
background-image: linear-gradient(角度, 颜色i 位置i) 线性渐变
· 角度：渐变方向的角度（可选）
· 位置：从哪个位置开始渐变（可选）
radial-gradient(圆心位置, 横轴 px, 纵轴 px, 颜色i, 位置i) 径向渐变
· 圆心位置：（可选）
· 形状：通过横纵轴半径确定形状（可选）
· 位置：从哪个位置开始渐变（可选）
repeating- 重复渐变（从没有渐变的位置开始重新渐变）

字体

字体属性

含义 语法 值 备注
字体大小 font-size: 值px; Chrome 支持最小 12px，默认 16px
字体家族 font-family: "字体1", "字体2", sans-serif; · serif衬线字体，有笔锋的
· sans-serif非衬线字体，没笔锋的		 使用字体英文名更好
字体会逐个查找使用
最后写默认衬线字体
最好都使用衬线或非衬线
字体风格 font-style: 值; · normal：正常
· italic：使用字体自带斜体
· oblique：强制斜体
字体粗细 font-weight: 值; 数值：100 ~ 1000
· lighter：细（100 ~ 300）
· normal：正常（400 ~ 500）
· bold：粗（600+）
· bolder：很粗很多字体都没有		 数值越大字体越粗
字体 font: 字体风格 字体粗细 字体大小px "字体族;" 字体大小必须倒数第二位，字体族必须倒数第一位

自定义字体

上述属性中 font-family 只能用用户自己的字体，但是可以将 .ttf 文件作为网页文件自定义设置字体

@font-face {
    font-family: "字体名称";
    src: url('字体路径');
}

这样 font-family 就可以调用自定义的字体族了

但是整个 .ttf 文件特别大，所以可以通过方法只获得想要几个字的字体

字体图标

有些图标，会设置成字体，比图标更清晰，可以方便更改大小、颜色、风格

可以在[阿里图标][iconfont.cn]查看使用

文本

文本颜色

color: 值;

值可以是

  • 颜色名
  • RGB 或RGBA
  • HEX 或 HEXA
  • HSL 或 HSLA

文本描边

这么土的效果真有人做吗

语法 含义
text-stroke-width 文字描边宽度
text-stroke-color 文字描边颜色
text-stroke 文字描边

目前该属性只有 webkit 内核浏览器支持

文本间距

字母间的间距：每个汉字视作一个字母

letter-space: 值px;

单词间的间距：按空格划分

word-space: 值px;

文本换行

文本中换行方式比如手动换行后到底显示中换不换行

white-space: 值;
值 含义
normal 文本超出边界自动换行
文本中的手动换行识别为一个空格
pre 原样输出而且会超出边界
pre-wrap 原样输出但是超出边界会自动换行
pre-line 原样输出超出边界自动换行；识别出换行并且会忽略首尾空格
nowrap 强制不换行

文本溢出

设置文本内容溢出时候怎么做

text-overflow: 值;
值 含义
clip 默认值，将溢出部分裁掉
ellipsis 溢出部分替换为 ...

该属性生效前提：

  • 块容器得设置溢出会显示：overflow: visible;
  • 文本得显示不换行：```white-space: nowrap;`

文本修饰

就是用线条进行装饰

text-decoration: 线位置 线类型 线颜色;

线位置可选：

  • none：无装饰线
  • underline：下划线
  • overline：上划线
  • line-through：删除线

线类型可选

  • dotted：虚线
  • wavy：波浪线

文本缩进

text-indent: 值px;
  • 缩进值是字体大小值的多少倍，就缩进多少个字体

文本对齐

水平对齐：

text-align: 值;

值一般可选：

  • left：左对齐默认
  • center：居中对齐
  • right：右对齐

垂直对齐：

指定同一行元素或单元格内部垂直对齐

vertical-align: 值;

值可选：

  • baseline：默认值，基线和父元素基线对齐
  • top：顶部对齐
  • middle：元素中部和父元素基线加父元素字母 x 的一半对齐
  • bottom：底部对齐

文本垂直对齐：

height: 值;

值一般如此确定：

  • 顶部：不需要设置属性，默认

  • 居中：height 值和行高 line-height 一致即可

  • 底部：让 line-height = (height × 2) - font-size - x（x 根据字体族动态确定）

    底部对齐还是用定位做吧

但是不能控制块元素的对齐

行高

line-height: 值;

值可以写作：

  • normal：由浏览器根据文字大小决定
  • 像素 px：line-height不能和 font-size 一样，不然字会超出所在行
  • 数字：font-size 的倍数（1.5 ~ 2 比较合适）
  • 百分比：font-size 的百分比

文本阴影

给文本添加阴影20 世纪的效果还有人用？

text-shadow: h-shadow v-shadow blur color;
值 含义
h-shadow 水平阴影位置
v-shadow 垂直阴影位置
blur 模糊距离（可选）
color 阴影颜色（可选）

列表

属性名 含义 值
list-style-type 设置列表符号 · none：不显示前面符号
· square：实心方块
· disc：圆形
· decimal：数字
· lower-roman：小写罗马数字
· upper-roman：大写罗马数字
· lower-alpha：小写字母
· upper-alpha：大写字母
list-style-position 设置列表符号位置 inside：在 li 里面
· outside：在 li 外面
list-style-image 自定义列表符号 url(图片地址)
list-style 列表设置

边框

属性名 含义 值
border-width 边框宽度 长度值
border-color 边框颜色 颜色值
border-style 边框样式 · none：默认值
· solid：实线
· dashed：虚线
· dotted：点线
· double：双实线
border 边框

表格

属性名 含义 值
table-layout 列宽度 · auto：默认值，列宽根据内容计算
· fixed：固定列宽，平均分
border-spacing 单元格间距 长度值
生效前提：单元格边框不合并
border-collapse 合并相邻单元格边框不然两个叠起来会变粗 · collapse：合并
· separate：不合并
empty-cells 隐藏无内容的单元格 · show：默认，显示
· hide：隐藏
生效前提：单元格不合并
caption-side 设置标题位置 · top：默认，上面
· bottom：下面

背景

属性名 含义 值
background-color 背景颜色 颜色值
默认 transparent 透明
background-image 背景图片 url(图片地址)
background-repeat 设置重复方式 · repeat：重复铺满
· repeat-x：只在水平重复
· repeat-y：只在垂直重复
· no-repeat：不重复
background-position 背景图位置 通过关键字设置：
· 水平：left、center、right
· 垂直：top、center、bottom
通过长度设置：元素与背景图左下角为原点的 x 和 y 值
background 背景 复合属性
background-origin 设置背景图原点 · padding-box：默认，从 padding 开始显示背景图
· border-box：从 border 开始显示背景图
· content-box：从 content 开始显示背景图
background-clip 裁切 · border-box：默认，从 border 区域裁切
· padding-box：从 padding 区域裁切
· content-box：从 content 区域裁切
· text：背景图只显示在文字
background-size 背景图大小 · 长度
· 百分比
· auto：图片真实大小
· contain：图片等比例缩放充满容器，选宽高的小值
· cover：图片等比缩放，选宽高的大值
url(....) no-repeat, url(...) no-repeat... 多个背景图

鼠标

鼠标移动到该元素的鼠标样式

属性名 含义 值
cursor 鼠标光标样式 · pointer：小手
· move：移动图标
· text：文字输入
· crosshair：十字
· wait：等待
· help：帮助
cursor: url('图标路径'), cursor样式值 自定义鼠标样式

CSS 变换

2D 变换

位移

语法 含义
transform: translateX(长度); 水平位移
transform: translateY(长度); 垂直位移
transform: translate(长度, 长度); 位移

  • 和相对定位类似，不脱离文档流，不影响其他元素

  • 相对定位百分比值参考其父元素

    2D 位移百分比值参考其自身

  • 对行内元素无效

可以通过位移作出水平垂直居中

.box {
    position: absolute;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
}

缩放

语法 含义
transform: scaleX(值) 水平缩放
transform: scaleY(值) 垂直缩放
transform: scale(值) 一个值则同比例缩放
两个值则分别是横纵比例缩放

  • 值 = 1 则大小不变

    值 < 1 则大小放大

    值 > 1 则大小缩小

  • 可以通过缩放实现小于 12px 文字

旋转

语法 含义
transform: rotate(值) 正值顺时针旋转
负值逆时针旋转

锚点

语法 含义
transform-origin: 位置值 位置值; 默认在元素中心
第一个位置可以是 left、right
第二个位置可以是 top、bottom
两个也可以都是长度值，距离左上角位置
只写一个值时，第二个值默认 50%

不透明度

不透明度设置是整个元素包括内容的不透明度，rgba 设置仅仅是本身

语法 含义
opacity: 值; 0~1之间数值

3D 变换

元素要开启 3D 模式，父元素要开启 3D 空间

语法 含义
transform-style: 值; · flat：默认，2D 空间
· preserve-3d：开启 3D 空间
perspective: 值; 开启透视
· none：默认，没有透视
· 长度：观察者距离 z=0 的距离
perspective-origin: 长度 长度; 默认 400px 300px

3D 操作

可以通过 translateZ、rotateZ、scaleZ 调整 Z 轴方向的参数，也可以直接一起调整

语法 含义
transform: translate3d(参数1 参数2 参数3); 三维移动
transform: rotate3d(参数1 参数2 参数3); 三维旋转
transform: scale3d(参数1 参数2 参数3); 三维缩放

CSS 动画

CSS 过渡

语法 含义 值
transition-property: 值; 过渡属性 · none
· all
· 属性1, 属性2, ...
过渡属性只能是连续值
transition-duration: 值; 过渡时间 · 0，默认，立即过渡
· s 或 ms
transition-delay: 值; 过渡延迟时间 · s 或 ms
transition-timing-function: 值; 过渡曲线 · ease：默认，平滑过渡
· linear：线性过渡
· ease-in：慢 → 快
· ease-in-out：快 → 慢
· cubic-bezie(值, 值, 值, 值)：贝塞尔曲线贝塞尔曲线网站
transition: 属性 过渡时间 延迟时间 曲线 过渡

CSS 动画

动画使用

给元素使用动画只需要给出动画名即可

语法 含义
animation-name 动画名
animation-duration 动画时间
animation-delay 延迟时间

动画定义

只定义动画名没有，需要对动画进行具体定义

定义动画方式如下

  • 只定义头尾
@keyframes 动画名 {
    from {
        属性: 值;
    } to {
        属性: 值;
    }
}
  • 也可以定义关键帧
@keyframes 动画名 {
    0% {
        属性: 值;
    } 
    时间比例% {
        属性: 值;
    } 
    100% {
        属性: 值;
    } 
}

动画属性

语法 含义 值
animation-timing-function: 值; 动画曲线 · ease：默认，平滑过渡
· linear：线性过渡
· ease-in：慢 → 快
· ease-in-out：快 → 慢
· cubic-bezie(值, 值, 值, 值)：贝塞尔曲线贝塞尔曲线网站
animation-iteration-count 动画播放次数 · number：动画循环次数
· infinite：无限循环
animation-direction 动画方向 · normal：正常方向
· reverse：反方向
· alternate：先正再反，交替运行
· alternate-reverse：先反再正，交替运行
animation-fill-mode 不动时候停在哪儿、 · forwards：静止在最后一帧
· backwards：静止在第一帧
animation-play-state 默认播放 · running：运动，默认
· paused：暂停

元素显示模式

显示模式

块元素（block）：

  • 页面中独占一行哪怕设置宽高也独占一行
  • 默认宽度撑满父元素
  • 默认高度由内容撑开
  • 可以设置宽高

块元素各标签：

  • 主体结构标签：<html、<body>
  • 排版标签：<h1> ~ <h6>、<hr>、<p>、<pre>、<div>
  • 列表标签：<ul>、<ol>、<li>、<dl>、<dt>、<dd>
  • 表格标签：<table>、<tbody>、<thead>、<tfoot>、<tr>、<caption>
  • H5 语义标签：<header>、<section>、<footer>、<aside>、<nav>、<main>、<article>、<figure>
  • <form> 和 <option>

行内元素（inline）：

  • 不独占一行
  • 默认宽高由内容撑开
  • 不能设置宽高

行内元素各标签：

  • 文本标签：<br>、<em>、<strong>、<sup>、<sub>、<del>、<ins>
  • <a> 与 <label>

行内块元素（inline-block）：

  • 不独占一行
  • 默认宽高由内容撑开
  • 可以设置宽高

行内块元素各标签：

  • 图片：<img>
  • 单元格：<td>、<th>
  • 表单控件：<input>、<textarea>、<select>、<button>
  • 框架：<iframe>

修改显示模式

通过修改 dispkay 属性修改元素显示模式

值 含义
none 元素被隐藏
block 元素修改为块级元素
inline 元素修改为内联元素
inline-block 元素修改为行内块元素
文章作者: Jarrycow
文章链接: http://jarrycow.top/posts/CSS.html
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Jarrycow !
CSS
赏
评论
  目录