CSS

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

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 属性

字体

含义 语法 值 备注
字体大小 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 "字体族;" 字体大小必须倒数第二位，字体族必须倒数第一位

文本

文本颜色

color: 值;

值可以是

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

文本间距

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

letter-space: 值px;

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

word-space: 值px;

文本修饰

就是用线条进行装饰

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 的百分比

列表

属性名 含义 值
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 背景

鼠标

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

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

元素显示模式

显示模式

块元素（block）：

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

块元素各标签：

  • 主体结构标签：<html、<body>
  • 排版标签：<h1> ~ <h6>、<hr>、<p>、<pre>、<div>
  • 列表标签：<ul>、<ol>、<li>、<dl>、<dt>、<dd>
  • 表格标签：<table>、<tbody>、<thead>、<tfoot>、<tr>、<caption>
  • <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
赏
评论
  目录