这篇文章详细介绍了CSS的概念，包括它在网页内容呈现中的作用，以及与HTML和JavaScript的关系。内容涵盖了CSS的选择器类型，如通配选择器、标签选择器、ID选择器、类选择器、属性选择器、伪类选择器，以及如何通过外链、嵌入和内联方式在页面中使用CSS。此外，还讨论了颜色、字体、文本样式等属性的设置方法，以及CSS的特异度和调试技巧。
1 - CSS的概念和语法
什么是 CSS
JS、CSS、HTML 的关系
- JS（JavaScript）：行为
- CSS（Cascading Style Sheets）：样式
- HTML（HyperText Markup Language）：内容
CSS 的用途
- 定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
CSS 的基本结构
h1 {
color: white;
font-size: 14px；
}
h1：选择器（Selector），用来选中页面中的元素并定义其样式
color: "white";：一对属性（Property）和属性值（value）被称为一条规则，Property: "value”;
在页面中使用 CSS
1. 外链
<link rel="stylesheet" href="/assets/style.css">
css样式放置在外部文件，使用link标签调用
2. 嵌入
<style>
li { margin: 0; list-style:none; }
p { margin: lem 0; }
</style>
使用style标签，直接将CSS代码嵌入HTML文件内
3. 内联
<p style="margin: lem 0">Example</p>
使用style属性，将CSS代码嵌入到标签内
CSS 是如何工作的
CSS 语法
选择器（Selector）
- 作用：找出页面中的元素，以便设置样式
- 使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照 DOM 树中的位置
1. 通配选择器
<style>
*{
color: red;
font-size: 20px;
}
</style>
选定所有元素
2. 标签选择器
<h1>This is heading</h1>
<p>this is some paragraph</p>
<style>
h1 {
color: orange;
}
p {
color: gray;
font-size: 20px;
}
</style>
根据标签名筛选
3. id选择器
<h1 id="logo">
<img src="https://assets.codepen.io/59477/h5-logo.svg" alt="HTML5 logo" width="48" />
HTML5 文档
</h1>
<style>
#logo {
font-size: 60px;
font-weight: 200;
}
</style>
根据元素的
id属性选定
4. 类型选择器
<h2>Todo List</h2>
<ul>
<li class="done">Learn HTML</li>
<li class="done">Learn CSS</li>
<li>Learn JavaScript</li>
</ul>
<style>
.done {
color: gray;
text-decoration: line-through;
}
</style>
根据元素的
class属性筛选
5. 属性选择器
<label>用户名：</label>
<input value="zhao" disabled />
<label>密码：</label>
<input value="123456" type="password" />
<style>
[disabled] {
background: #eee;
color: #999
}
</style>
选定包含
disabled属性的元素
<p>
<label>密码：</label>
<input type="password" value="123456" />
</p>
<style>
input[type="password"] {
border-color: red;
color: red;
}
</style>
选定
type属性的属性值为password的元素
<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>
<p><a href="Askba.jpg">图片2</a></p>
<style>
a[href^="#"] {
color: #f54767;
background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
padding-left: 1.1em;
}
a[href$=".jpg"] {
color: deepskyblue;
background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
padding-left: 1.2em;
}
a[href*="kba"] {
color: red;
background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
padding-left: 1.2em;
}
</style>
href^="#"：选定href属性的属性值以#开头的元素
href$=".jpg"：选定href属性的属性值以.jpg结尾的元素
href*="kba"：选定href属性的属性值包含kba的元素
6. 伪类选择器
- 不基于标签和属性定位元素
1. 状态伪类
<a href="http://example.com">example.com</a>
<label>
用户名：
<input type="text">
</label>
<style>
a:link {
color: black;
}
a:visited {
color: gray;
}
a:hover {
color: orange;
}
a:active {
color: red;
}
:focus {
outline: 2px solid orange;
}
</style>
:link：未访问的链接
:visited：已访问的链接
:hover：鼠标悬停的元素
:activate：选中的元素
:focus：获得焦点的元素
2. 结构性伪类
<ol>
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>星球大战：原力觉醒</li>
<li>复仇者联盟 3</li>
<li>侏罗纪世界</li>
</ol>
<style>
li {
list-style-position: inside;
border-bottom: 1px solid;
padding: 0.5em
}
li:first-child {
color: coral
}
li:last-child {
border-bottom: none;
}
</style>
根据 DOM 节点在 DOM 树中的位置来决定是否选中该元素
first-child：如果当前li是父集的第一个元素则选中
last-child：如果当前li是父集的最后一个元素则选中
7. 组合
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足 A 同时满足 B | input:focus |
| 后代组合 | A B | 选中 B，如果他是 A 的子孙（不限制层数） | nav a |
| 亲子组合 | A > B | 选中 B，如果他是 A 的子元素（仅一代） | section > p |
| 兄弟选择器 | A ~ B | 选中 B，如果他在 A 后且和 A 同级 | h2 ~ p |
| 相邻选择器 | A + B | 选中 B，如果他紧跟在 A 后面 | h2 + p |
8. 选择器组
body, h1, h2, h3, h4, h5, h6, ul, ol, li {
margin: 0;
padding: 0;
}
[type="checkbox"], [type="radio"] {
box-sizing: border-box;
padding: 0;
}
同时选中多个元素
颜色（Color）
1. RGB
{
color: rgb(143, 172, 135)
}
直接使用RGB值
2. HEX
{
color: #8fac87;
}
16位RGB值
3. HSL
-
H（Hue）：色相，取值范围：0 - 360 -
S（Saturation）：饱和度，取值单位：0 - 100% -
L（Lightness）：亮度，取值范围：0 - 100%
{
color: hsl(18, 91%, 84%);
}
4. 关键字
{
color: blue;
}
5. 透明度
{
color: #ff000078;
color: rgba(255, 0, 0, 0.47);
color: hsla(0, 100%, 100%, 0.47)
}
透明度（alpha）：直接置于颜色值的第四个参数即可，取值范围：0.00 - 1.00
字体（Font）
1. font-family - 字体族
<h1>卡尔斯巴德洞窟（Carlsbad Caverns）</h1>
<p>卡尔斯巴德洞窟（Carlsbad Caverns）是美国的
一座国家公园，位于新墨西哥州东南部。游客可以通过天
然入口徒步进入，也可以通过电梯直接到达230米的洞穴
深处。</p>
<style>
h1 {
font-family: Optima, Georgia, serif;
}
body {
font-family: Helvetica, sans-serif;
}
</style>
font-family：接受多个属性值，从前往后依次尝试寻找本地字体进行渲染，可以使用字体名或者通用字体族，一般建议将英文字体放置于中文字体之前，以保证不会使用中文字体渲染英文字母
通用字体族
Serif（衬线体）：Georgia、宋体Sans-Serif（无衬线体）：Arial、Helvetica、黑体、微软雅黑Cursize（手写体）：Caflsch Script、楷体Fantasy（创意字体）：Comic Sans MS、Papyrua、Zapfino- Monospace（等宽字体）：Consolas、Courier、中文字体
一般建议font-family的属性值至少包含一个通用字体族，以保证可以渲染出文字（因为直接指定字体可能因为用户端本地没有该字体而无法渲染）
2. Web-Fonts - 网络字体
<h1>Web fonts are awesome!</h1>
<style>
@font-face {
font-family: "Megrim";
src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
}
h1 {
font-family: Megrim, Cursive;
}
</style>
@font-face：网络字体族
font-family：网络字体族名称
src：网络字体源，浏览器将尝试从该地址下载字体并渲染
- 使用 Web fonts 则需要在渲染时从源下载该字体，这可能会导致渲染延时
3. font-size - 字体大小
- 关键字
- small、medium、large
- 长度
- px、em
- 百分数
- 相对于其父元素字体大小
<!--section-->
<section>
<!--section h2-->
<h2>A web font example</h2>
<!--section .note-->
<p class="note">Notes: Web fonts ...</p>
<p>With this in mind, let's build...</p>
</section>
<style>
section {
font-size: 20px;
}
section h2 {
font-size: 2em;
}
section .note {
font-size: 80%;
color: orange;
}
</style>
px：像素值
em：相比其父元素的倍率，该示例中为20px * 2 = 40px
80%：相比其父元素的比值，该示例中为20px * 80% = 16px
4. italic - 斜体
<p class="normal">Normal Text</p>
<p class="italic">Italic Text</p>
<style>
p {
font-size: 36px;
font-family: "Helvetica Neue", sans-serif;
}
.normal {
font-style: normal;
}
.italic {
font-style: italic
}
</style>
font-style：默认值为normal，斜体则使用italic
- 也可以使用
oblique <angle>来指定倾斜角度，接受范围：-90deg至90deg，如未指定则14deg
5. font-weight - 字体粗细
<ul>
<li class="w1">锦瑟无端五十弦（100）</li>
<li class="w2">锦瑟无端五十弦（200）</li>
<li class="w3">锦瑟无端五十弦（300）</li>
<li class="w4">锦瑟无端五十弦（400-normal）</li>
<li class="w5">锦瑟无端五十弦（500）</li>
<li class="w6">锦瑟无端五十弦（600）</li>
<li class="w7">锦瑟无端五十弦（700-bold）</li>
<li class="w8">锦瑟无端五十弦（800）</li>
<li class="w9">锦瑟无端五十弦（900）</li>
</ul>
<style>
.w1 { font-weight: 100 }
.w2 { font-weight: 200 }
.w3 { font-weight: 300 }
.w4 { font-weight: 400 }
.w5 { font-weight: 500 }
.w6 { font-weight: 600 }
.w7 { font-weight: 700 }
.w8 { font-weight: 800 }
.w9 { font-weight: 900 }
</style>
font-weight：字体粗细，接受范围：1 - 1000、关键字
- 关键字：
normal、blod、- 相对于父元素的关键字：
lighter、bolder- 使用
<number>作为属性值时，需要所使用的字体本身支持可变字体粗细，一般的字体仅接受400(normal)和700(bold)
6. line-height - 行高
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TkwVddK5-1676170352749)(https://cdn.jsdelivr.net/gh/LianQi-Kevin/Markdown_Image_Hosting@main/images/202301191231953_line-height.png)]
<section>
<h1>Font families recap</h1>
<p>As we looked at in fundamental text and font styling, the fonts applied to your HTML can be controlled using the font-family property. This takes one or more font family names. </p>
</section>
<style>
h1 {
font-size: 30px;
line-height: 45px;
}
p {
font-size: 20px;
line-height: 1.6;
}
</style>
line-height: 45px：行高
line-height: 1.6：当使用无单位的数字作为行高的时候，将会用该数 * 自身字体大小，即1.6 * 20px = 32px
7. font - 字体
h1 {
/* 斜体 粗细 字体大小/行高 字体族 */
font: italic bold 14px/1.7 Helvetica, sans-serif；
}
p {
/* font至少包含字体大小和字体族即可 */
font: 14px serif;
}
font：直接使用font属性进行集中设置顺序：
font: 斜体 粗细 字体大小/行高 字体族;
font属性最少只需要接受字体大小和字体族两个属性值即可，其余属性值按需书写
文本（Text）
1. text-align - 文本对齐
<p>
Whether fullwidth colon punctuation and fullwidth dot punctuation should
be considered fullwidth closing punctuation or fullwidth middle dot
punctuation depends on where in the glyph’s box the punctuation is drawn.
</p>
<style>
p {
text-align: right;
}
</style>
text-align：文本对齐
属性值 说明 left左对齐 right右对齐 center中心对齐 justify两端对齐（不强制最后一行左对齐） justify-all两端对齐（强制最后一行左对齐）
2. letter-spacing - 字间距
{
letter-spacing: normal;
letter-spacing: 0.3em;
letter-spacing: 1px;
letter-spacing: -1px;
}
3. word-spacing - 词间距
{
word-spacing: normal;
word-spacing: 0.3em;
word-spacing: 1px;
word-spacing: -1px;
}
4. letter-indent - 首行缩进
{
letter-indent: 15%;
letter-indent: 3mm;
letter-indent: 20px;
}
5. text-decoration - 修饰线
text-decoration属性包含以下四个属性值：[text-decoration-line](# text-decoration-line（装饰线的位置）)、[text-decoration-color](# text-decoration-color（修饰线的颜色）)、[text-decoration-style](# text-decoration-style（修饰线的形式）)和 [text-decoration-thickness](# text-decoration-thickness（装饰线的粗细）)
{
text-decoration: underline overline #FF3028 dotted 1px;
}
text-decoration：允许自由组合其包含的四个子属性的属性值
6. text-decoration-line（修饰线的位置）
{
text-decoration-line: none;
}
| 属性值 | 说明 |
|---|---|
none | 无修饰线 |
underline | 下方有一条修饰线 |
overline | 上方有一条修饰线 |
line-through | 有一条贯穿文本的修饰线 |
blink | 文本闪烁（不推荐使用） |
7. text-decoration-color（修饰线的颜色）
{
text-decoration-color: red;
}
具体可用的值参考[颜色（Color）](# 颜色（Color）)
8. text-decoration-style（修饰线的形式）
{
text-decoration-style: solid;
}
| 属性值 | 说明 |
|---|---|
solid | 实线 |
double | 双实线 |
dotted | 点画线 |
dashed | 虚线 |
wavy | 波浪线 |
9. text-decoration-thickness（装饰线的粗细）
{
text-decoration-thickness: auto;
}
| 属性值 | 说明 |
|---|---|
auto | 由浏览器自动选择 |
from-font | 如果字体包含首选厚度，则使用字体厚度，否则同auto |
<length> | px、em、mm 等长度值 |
<percentage> | 10%，百分比值 |
10. white-space - 空白处理
{
white-space: normal;
}
- 如何处理空白字符
- 是否采用软换行
| 属性值 | 换行符 | 空格和制表符 | 文字自动换行 | 行尾空格 |
|---|---|---|---|---|
normal | 合并 | 合并 | 换行 | 删除 |
nowrap | 合并 | 合并 | 不换行 | 删除 |
pre | 保留 | 保留 | 不换行 | 保留 |
pre-wrap | 保留 | 保留 | 换行 | 挂起 |
pre-line | 保留 | 合并 | 换行 | 删除 |
break-spaces | 保留 | 保留 | 换行 | 换行 |
CSS 选择器的特异度
选择器的特异度
<artical>
<h1 class="title" id="title1">拉森火山国家公园</h1>
</artical>
<style>
#title1 {
color: orange;
}
.title {
color: blue;
}
artical h1{
color: red;
}
</style>
-
这三条选择器均能选定到该元素。但是最终使用
id值，即#title1会生效，因为在三类选择器（id、属性、（伪）类）中，id的权重最高，另外两类权重相同，做计数判断。 -
以接下来两个选择器为例，1号选择器的权重就高于2号选择器
示例 # (id选择器). 类/伪类选择器标签选择器#nav .list li a:link1 2 2 .hd ul.link a0 2 2
基于选择器特异度实现基础样式的样式覆盖
<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
.btn {
display: inline-block;
padding: .36em .8em;
margin-right: .5em;
line-height: 1.5;
text-align: center;
cursor: pointer;
border-radius: .3em;
border: none;
background: #e6e6e6;
color: #333;
}
.btn.primary {
color: #fff;
background: #218de6;
}
</style>
.btn：基础样式
.btn.primary：高级样式，仅覆盖基础样式的color和background
如何调试CSS
- 右键点击页面元素，选择
检查 - 快捷键
Ctrl + Shift + I（Windows）Cmd + Opt + I（Mac）
扫一扫
287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
