前端之CSS初识
程序员文章站
2022-05-07 19:34:58
...
文章目录
1、定义
- 概念：
CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表） - 作用：
- 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式
- CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式
2、引入CSS样式表（书写位置）
2.1、行内式（内联样式）
-
概念：
称行内样式、行间样式.
是通过标签的style属性来设置元素的样式 -
其基本语法格式如下：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
实际上任何HTML标签都拥有style属性，用来设置行内式
- 案例：
<div style="color: red; font-size: 12px;">hello world</div>
注意：
- style其实就是标签的属性
- 样式属性和值中间是:
- 多组属性值之间用;隔开。
- 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余
缺点：
- 没有实现样式和结构相分离
2.2、内部样式表（内嵌样式表）
- 概念：
称内嵌式
是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义 - 其基本语法格式如下：
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
<style>
div {
color: red;
font-size: 12px;
}
</style>
注意：
- style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
- type=“text/css” 在html5中可以省略。
- 只能控制当前的页面
缺点：
- 没有彻底分离
2.3、外部样式表（外链式）
- 概念：
称链入式
是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，
通过link标签将外部样式表文件链接到HTML文档中 - 其基本语法格式如下：
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
注意：
- link 是个单标签
- link标签需要放在head头部标签中，并且指定link标签的三个属性
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件 |
| type | 定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略 |
| href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径 |
2.4、导入式
<head>
<style>
/*形式一：*/
/*@import "css/mystyle.css";*/
/*形式二：*/
@import url("css/mystyle.css");
</style>
</head>
2.5、三种样式表总结（位置）
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
团队约定-代码风格
样式书写一般有两种：
- 一种是紧凑格式 (Compact)
h3 { color: deeppink;font-size: 20px;}
- 一种是展开格式（推荐）
h3 {
color: deeppink;
font-size: 20px;
}
团队约定-代码大小写
样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写
/* 推荐 */
h3{
color: pink;
}
/* 不推荐 */
H3{
COLOR: PINK;
}
2.6、总结CSS样式规则
使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：
总结：
1. 选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式
2. 属性和属性值以“键值对”的形式出现
3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
4. 属性和属性值之间用英文冒号(:)连接
5. 多个“键值对”之间用英文分号(;)进行区分
3、CSS选择器
3.1、选择器的作用
找到特定的HTML页面元素，选择器是选择标签用的， 把我们想要的标签选择出来
3.2、CSS基础选择器
3.2.1、标签选择器
- 概念：
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。 - 语法：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 作用：
标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签 - 优点：
是能快速为页面中同类型的标签统一样式 - 缺点：
不能设计差异化样式。
总结 口诀：
标签选择器，
页面同选起。
直接写标签，
全部不放弃。
3.2.2、类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名
语法：
- 类名选择器
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
- 标签
<p class='类名'></p>
优点：
- 可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
注意
- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
- 长名称或词组可以使用中横线来为选择器命名
- 不要纯数字、中文等命名， 尽量使用英文字母来表示
命名是我们通俗约定的，但是没有规定必须用这些常用的命名
记忆口诀
差异化选择
一个或多个
上面点定义
类名别写错
谁用谁调用
案例：
<head>
<meta charset="utf-8">
<style>
.blue {
color: blue;
font-size: 100px;
}
.red {
color: red;
font-size: 100px;
}
.orange {
color: orange;
font-size: 100px;
}
.green {
color: green;
font-size: 100px;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
3.2.3、类选择器特殊用法- 多类名
我们可以给标签指定多个类名，从而达到更多的选择目的
注意：
- 各个类名中间用空格隔开
- 多类名选择器在后期布局比较复杂的情况下，还是较多使用的
<div class="pink fontWeight font20">tom</div>
<div class="font20">jack</div>
<div class="font14 pink">lily</div>
<div class="font14">lucy</div>
3.2.4、id选择器
id选择器使用#进行标识，后面紧跟id名
其基本语法格式如下：
- id选择器
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 标签
<p id="id名"></p>
- 元素的id值是唯一的，只能对应于文档中某一个具体的元素
- 用法基本和类选择器相同
id选择器和类选择器区别
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
- 类选择器（class） 好比人的名字，是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜
- id选择器 好比人的身份证号码，全中国是唯一的，不得重复，只能使用一次
id选择器和类选择器最大的不同在于 使用次数上。
总结:
- 类选择器我们在修改样式中，用的最多。
- id选择器一般用于页面唯一性的元素身上，经常和我们后面学习的javascript 搭配使用
3.2.5、通配符选择器
- 概念
通配符选择器用*号表示， * 就是 选择所有的标签 他是所有选择器中作用范围最广的，能匹配页面中所有的元素。 - 其基本语法格式如下：
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
注意：
会匹配页面所有的元素，降低页面响应速度，不建议随便使用
3.2.6、基础选择器总结
| 选择器 | 作用 | 缺点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p { color：red;} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
| id选择器 | 一次只能选择器1个标签 | 只能使用一次 | 不推荐使用 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 不推荐使用 | * {color: red;} |
团队约定
选择器
- 尽量少用通用选择器 *
- 尽量少用 ID 选择器
- 不使用无具体语义定义的标签选择器 div span
/* 推荐 */
.jdc {}
li {}
p{}
/* 不推荐 */
*{}
#jdc {}
div{} 因为div 没有语义，我们尽量少用
3.3、交集选择器
-
作用
给所有选择器选中的标签中，相交的那部分标签设置属性 -
格式：
选择器1选择器2 {
属性: 值;
}
- 注意：
1、选择器与选择器之间没有任何链接符号
2、选择器可以使用标签名称、id、class
3、交集选择器在企业开发中并不多见
因为：p.part1 完全可以用.part1取代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
p.part1 {
color: red;
}
p#p1{
font-size: 100px;
}
</style>
</head>
<body>
<p class="part1">我是段落</p>
<p id="p1">我是段落</p>
<p class="part1">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
3.4、并集选择器
-
作用
给所有满足条件的标签设置属性 -
格式
选择器1,选择器2 {
属性: 值;
}
- 注意：
1、选择器与选择器之间必须用逗号来链接
2、选择器可以使用标签名称、id、class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
.part1,h1,a {
color: red;
}
</style>
</head>
<body>
<h1>哈哈啊</h1>
<p class="part1">我是段落</p>
<p id="p1">我是段落</p>
<p class="part1">我是段落</p>
<a href="#">我是我</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
3.5、序列选择器
-
作用：
css3中新推出的选择器中，最具代表性的的9个，又称为序列选择器，过去的选择器中要选中某个必须加id或class，学习了这9个后，不用加id或class，想选中同级别的第几个就选第几个 -
格式
同级别
:first-child p:first-child 同级别的第一个
:last-child p:last-child 同级别的最后一个
:nth-child(n) 同级别的第n个
:nth-last-child(n) 同级别的倒数第n个
同级别同类型
:first-of-type 同级别同类型的第一个
:last-of-type 同级别同类型的最后一个
:nth-of-type(n) 同级别同类型的第n个
:nth-last-of-type(n) 同级别同类型的倒数第n个 -
其他
:only-of-type 同类型的唯一一个
:only-child 同级别的唯一一个
同级别
<!--1、同级别的第一个-->
<!--1.1 示范一-->
p:first-child {
color: red;
}
代表: 同级别的第一个，并且第一个要求是一个p标签
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
</div>
这样的话第一个p和div中的第一个p都变成红色，
<!--1.2 示范二-->
p:first-child {
color: red;
}
代表: 同级别的第一个，并且第一个要求是一个p标签
<h1>w我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
</div>
这样的话只有div中的第一个p变红，因为在有在div内同一级别的第一个才是p
注意点:
:fist-child就是第一个孩子，不区分类型
<!--2、同级别的最后一个-->
p:last-child {
color: red;
}
代表: 同级别的最后一个，并且最后一个要求是一个p标签
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
</div>
<p>我是段落7</p>
这样的话只有6跟7都变红
<!--3、同级别的第n个-->
p:nth-child(3) {
color: red;
}
代表: 同级别的第3个，并且第3个要求是一个p标签
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是标题</h1>
</div>
<p>我是段落7</p>
这样的话只有“我是段落2”变红
<!--4、同级别的倒数第n个-->
p:nth-last-child(3) {
color: red;
}
代表: 同级别的倒数第3个，并且第3个要求是一个p标签
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是标题</h1>
</div>
<p>我是段落7</p>
这样的话只有“我是段落6.1”和“我是段落5”被选中
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是标题</h1>
</div>
<p>我是段落7</p>
<!--1、同级别同类型的第一个-->
p:first-of-type {
color: red;
}
“我是段落1”和“我是段落6.1”被选中
<!--2、同级别同类型的最后一个-->
p:last-of-type {
color: red;
}
“我是段落7”和“我是段落6.2”被选中
<!--3、同级别同类型的第n个-->
p:nth-of-type(2) {
color: red;
}
“我是段落2”和“我是段落6.2”被选中
<!--4、同级别同类型的倒数第n个-->
p:nth-last-of-type(2) {
color: red;
}
“我是段落5”和“我是段落6.1”被选中
<!--1、同类型的唯一一个-->
p:only-of-type {
color: red;
}
<h1>我是标题</h1>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是标题</h1>
</div>
<p>我是段落7</p>
“我是段落7“被选中
<!--2、同级别的唯一一个-->
p:only-child {
color: red;
}
<h1>我是标题</h1>
<div>
<p>我是段落6.1</p>
</div>
<p>我是段落7</p>
“我是段落6.1”被选中
3.6、属性选择器
-
作用
根据指定的属性名称找到对应的标签，然后设置属性
该选择器，最常用于input标签 -
格式与具体用法：
[属性名]
其他选择器[属性名]
[属性名=值]
[属性名^=值]
[属性名$=值]
[属性名*=值]例1：找到所有包含id属性的标签
[id]例2：找到所有包含id属性的p标签
p[id]例3：找到所有class属性值为part1的p标签
p[class=“part1”]例4：找到所有href属性值以https开头的a标签
a[href^=“https”]例5：找到所有src属性值以png结果的img标签
img[src$=“png”]例6：找到所有class属性值中包含part2的标签
[class*=“part”]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
[id] {
color: red;
}
p[id] {
font-size: 30px;
}
p[class="part1"] {
color: green;
}
a[href^="https"] {
font-size: 50px;
}
img[src$="png"] {
width: 100px;
}
[class*="part"] {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1 id="id1">哈哈啊</h1>
<p id="id2">我是段落</p>
<p class="part1">我是段落</p>
<p class="xxx part2 yyy">我是段落</p>
<a href="#">我是我</a>
<a href="http://www.baidu.com">http://www.baidu.com</a>
<a href="https://www.baidu.com">https://www.baidu.com</a>
<img src="1.png" alt="">
<img src="2.jpg" alt="">
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
3.7、伪类选择器
- 作用
常用的几种伪类选择器
1、没有访问的超链接a标签样式
a:link {
color: blue;
}
2、访问过的超链接a标签样式
a:visited {
color: gray;
}
3、鼠标悬浮在元素上应用样式
a:hover {
background-color: #eee;
}
4、鼠标点击瞬间的样式
a:active {
color: green;
}
5、input输入框获取焦点时样式
input:focus {
outline: none;
background-color: #eee;
}
- 注意
1、a标签的伪类选择器可以单独出现，也可以一起出现
2、a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效
link，visited，hover，active
3、hover是所有其他标签都可以使用的
4、focus只给input标签使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
a:link {
color: #cccccc;
}
a:visited {
color: #55BBBB;
}
a:hover {
color: green;
}
a:active {
color: red;
}
input:hover {
outline: none;
background-color: #cccccc;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/a/b/c/d.html">点击我</a>
<input type="text">
</body>
</html>
3.8、伪元素选择器
常用的伪元素
1、first-letter：杂志类文章首字母样式调整
例如：
p:first-letter {
font-size: 48px;
}
2、before
用于在元素的内容前面插入新内容
例如：
p:before {
content: "*";
color: red;
}
在所有p标签的内容前面加上一个红色的*
3、after
用于在元素的内容后面插入新内容
例如：
p:after {
content: "?";
color: red;
}
在所有p标签的内容后面加上一个蓝色的?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
p:first-letter {
font-size: 50px;
}
/*两个冒号与一个是一样的，老版本用的是一个冒号，考虑到兼容性推荐使用一个冒号*/
a::after {
content: "?";
color: red;
}
a:before {
content: "-";
color: green;
}
</style>
</head>
<body>
<p>hello world</p>
<a href="#" class="help">你好世界</a>
<a href="#" class="help">你好世界</a>
<a href="#" class="help">你好世界</a>
</body>
</html>
上一篇： Android的webView应用与js互调app混合开发用例
下一篇： 前端之jQuery初识