CSS 教程
CSS 教程
共勉
不要哀求,学会争取。若是如此,终有所获。
原文
一、前言
二、概念
1. 什么是 CSS
CSS
(Cascading Style Sheets
),中文译为 层叠样式表。它是一种样式表语言,用于美化 HTML
文档的呈现。一般位于 <head>
头部,<title>
标签下添加 <style>
标签,CSS
代码就放在 <style>
中。
2. CSS 引入方式
CSS
引入方式有三种,分别是:
- 内部样式表
- 外部样式表
- 行内样式
(1)内部样式表
将样式代码写在 style
标签中。
效果预览:https://code.juejin.cn/pen/7274512428615303226
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS 教程</title>
<style>
p {
color: tomato;
font-size: 16px;
}
</style>
</head>
<body>
<p>CSS 教程</p>
</body>
</html>
(2)外部样式表
将样式代码写在单独的 CSS
文件中(后缀为 .css
),接着在 HTML
中通过 <link>
标签引入即可。
效果预览:https://code.juejin.cn/pen/7274578705379229759
p {
color: tomato;
font-size: 16px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS 教程</title>
<link ref="stylesheet" href="demo.css">
</head>
<body>
<p>CSS 教程</p>
</body>
</html>
(3)行内样式
在 HTML
基础标签中添加 style
属性,style
属性的值为 CSS
代码。
效果预览:https://code.juejin.cn/pen/7274579350450602045
<div style="color: yellow; font-size: 16px">行内样式</div>
三、选择器
1. 基础选择器
使用标签名作为选择器,然后为其设置相同的样式。比如选择器如果为 a
,则代表所有链接标签都将具有 a
选择器所设置的样式。
2. 类选择器
查找标签,差异化设置标签的显示效果。
使用类选择器的步骤如下。
- 定义类选择器,一般是
.类名
- 使用类选择器,在标签中添加
class="类名"
效果预览:https://code.juejin.cn/pen/7274579791225815095
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS 教程</title>
<style>
.cls1 {
color: tomato;
font-size: 16px;
}
</style>
</head>
<body>
<p class="cls1">CSS 教程</p>
</body>
</html>
注意,一个标签中可以使用多个类选择器,只需要将各个选择器用空格隔开就好。类选择器名自定义,注意不要用纯数字或者中文,尽量用英文。
3. id 选择器
类似于类选择器,用于查找标签,差异化设置标签的显示效果。一般是配合 JavaScript
使用,很少用来设置 CSS
样式。
使用 id
选择器的步骤如下:
- 定义
id
选择器,一般是#id名
- 使用
id
选择器,在表其中添加id="id名"
效果预览:https://code.juejin.cn/pen/7274586257244553273
<html>
<head>
<style>
#demo {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<p id="demo">
JavaPark
</p>
</body>
</html>
注意,同一个 id
选择器,在一个页面中通常只能使用一次。
4. 通配符选择器
用于查找页面中所有的标签,然后给它们设置相同的样式。通配符选择器为 *
,无需调用浏览器就会自动查找页面中的所有标签,设置统一样式。
效果预览:https://code.juejin.cn/pen/7274588738708537403
<html>
<head>
<style>
* {
color: red;
}
</style>
</head>
<body>
<p>村雨遥</p>
<a href="https://github.com/cunyu1943/JavaPark">JavaPark</a>
</body>
</html>
5. 复合选择器
由两个或多个基础选择器通过不同的方式组合而成的选择器,能够更加准确高效地选择目标元素。
可以分为后代选择器、子代选择器、并集选择器。
(1)后代选择器
用于选中某元素的后代元素,书写语法如下,其中,父选择器和子选择器之间用空格分隔。
父选择器 子选择器 { CSS 属性 }
效果预览:https://code.juejin.cn/pen/7278316108086509583
div p {
color: aqua;
}
(2)子代选择器
用于选中某元素的子代元素,书写语法如下,其中,父选择器和子选择器之间用 >
分隔。
父选择器 > 子选择器 { CSS 属性 }
效果预览:https://code.juejin.cn/pen/7278317640706162748
div > p {
color: blueviolet;
text-align: center;
}
(3)并集选择器
用于选中多组标签,设置相同的样式。书写语法如下,选择器之间用 ,
分隔。
选择器1, 选择器2, …, 选择器N { CSS 属性 }
效果预览:https://code.juejin.cn/pen/7278319757644005376
div,
p,
span {
color: cadetblue;
}
四、画盒子
利用合适的选择器画盒子,常用属性如下表。
效果预览:https://code.juejin.cn/pen/7274599388759916603
属性 | 说明 |
---|---|
width | 设置盒子宽度 |
height | 设置盒子高度 |
background-color | 设置背景色 |
<!DOCTYPE html>
<html>
<head>
<title>CSS 教程</title>
<style>
.div1 {
width: 100px;
height: 100px;
background-color: violet;
}
.div2 {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="div1">盒子 1</div>
<div class="div2">盒子 2</div>
</body>
</html>
五、文字控制属性
属性 | 描述 |
---|---|
font-size | 字体大小 |
font-weight | 字体粗细 |
font-style | 字体倾斜 |
line-height | 行高 |
font-family | 字体族 |
font | 字体复合属性 |
text-indent | 文本缩进方式 |
text-align | 文本对齐方式 |
text-decoration | 文本修饰线 |
color | 字体颜色 |
1. 字体大小
用于指定文字尺寸大小,必须带有单位,否则不会生效,常用单位为 px
。
效果预览:https://code.juejin.cn/pen/7275347343271002167
p {
font-size: 30px;
}
2. 字体粗细
用于设置字体粗细,单位既可以使用数字,也可以使用关键字。不过在正式开发时,一般都推荐使用数字的形式。
效果预览:https://code.juejin.cn/pen/7275351160939577405
.cls1{
font-weight: 800;
}
.cls2{
font-weight: bold;
}
3. 字体倾斜
设置文字倾斜效果。
效果预览:https://code.juejin.cn/pen/7275713613934329914
.cls1{
/* 正常 */
font-style: normal;
}
.cls2{
/* 倾斜 */
font-style: italic;
}
4. 行高
设置多行文本的间距,属性值有两种写法,一种是 数字 + px
的方式,而另一种则是直接数字的方式,表示为标签 font-size
属性值的倍数。
预览效果:https://code.juejin.cn/pen/7275715629028802616
.cls1{
line-height: 12px;
}
.cls2{
line-height: 2;
}
5. 字体族
设置文本字体,属性值为字体名。注意,属性值可以有多个字体名,只需要用逗号隔开即可,执行顺序是从左往右依次查找。
效果预览:https://code.juejin.cn/pen/7275720518836158523
p {
font-family: Microsoft YaHei, sans-serif;
}
6. 复合属性
用于设置网页文字的公共样式,使用语法如下:
font: 是否倾斜 是否加粗 字号/行高 字体;
使用时,属性一定要按照顺序写,而且字号和字体必须要有,否则 font
属性将无效。
效果预览:https://code.juejin.cn/pen/7275723268651548709
p {
font: italic 500 18px/2 楷体;
}
7. 文本缩进
设置文本首行缩进效果,属性值可以是两种形式,一种是 数字 + px
,而另一种则是 数字 + em
的形式,其中 1em
= 当前标签的字号大小。
效果预览:https://code.juejin.cn/pen/7276092884367966269
.cls1 {
text-indent: 20px;
}
.cls2 {
text-indent: 2em;
}
8. 文本对齐
控制文本水平对齐方式,主要有左对齐、居中对齐、右对齐等形式,其中默认效果是左对齐。各属性值说明如下:
属性值 | 说明 |
---|---|
left | 左对齐 |
center | 居中对齐 |
right | 右对齐 |
效果预览:https://code.juejin.cn/pen/7276094993277091852
.left-align {
text-align: left;
}
.center-align {
text-align: center;
}
.right-align {
text-align: right;
}
9. 修饰线
用于给文本添加修饰线,常用的有以下几个属性值:
属性值 | 说明 |
---|---|
none | 无效果 |
underline | 下划线 |
line-through | 删除线 |
overline | 上划线 |
预览地址:https://code.juejin.cn/pen/7276097261292945408
.cls1 {
text-decoration: underline;
}
.cls2 {
text-decoration: line-through;
}
.cls3 {
text-decoration: overline;
}
.cls4 {
text-decoration: none;
}
10. 颜色
设置文本颜色,属性值主要有 4 种表示方式:
表示方式 | 属性值 | 说明 |
---|---|---|
颜色关键字 | 英文单词 | green 、blue 、red |
rgb | rgb(r, g, b) | r 、g 、b 表示红绿蓝三原色,取值范围是:0 -255 |
rgba | rgba(r, g, b, a) | 相比于 rgb 表示法多了一个 a ,用于表示透明度,取值范围是:0 - 1 |
十六进制 | #RRGGBB | 如 #000000 表示黑色,#FFFFFF 表示白色 |
效果预览:https://code.juejin.cn/pen/7276102359267639331
.cls1 {
color: Cyan;
}
.cls2 {
color: rgb(143,188,143);
}
.cls3 {
color: rgba(245,222,179, 0.5);
}
.cls4 {
color: #FF6347;
}
⏳ 联系
想解锁更多知识?不妨关注我的微信公众号:村雨遥(id:JavaPark)。
扫一扫,探索另一个全新的世界。