CSS
CSS（Cascading Style Sheet）：层叠样式表语言
CSS的作用：修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
HTML引入CSS的三种方式
第一种
在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式
语法格式：
<标签 style = "样式名:样式值; 样式名:样式值; 样式名:样式值; ..."></标签>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一种方式：内联定义方式</title>
</head>
<body>
<div id="d1" style="color: pink;font-size: 100px;">
Hi
</div>
</body>
</html>
第二种
在head标签中使用style块，这种方式被称为样式块方式
语法格式：
<head>
<style type = "text/css">
选择器 {
样式名:样式值;
样式名:样式值;
......
}
选择器 {
样式名:样式值;
样式名:样式值;
......
}
</style>
</head>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#d2{
color: yellow;
font-size: 100px;
}
</style>
</head>
<body>
<div id="d2">
Hello
</div>
</body>
</html>
第三种
链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了）
语法格式：
<link type = "text/css" rel = "stylesheet" href = "css文件的路径" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style1.css"/>
</head>
<body>
<div id="d3">
Oh~~~
</div>
</body>
</html>
#d3{
color: saddlebrown;
font-size: 100px;
}
CSS引入样式方法总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 结构样式混写 | 较少 | 控制一个标签 |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，吐血推荐 | 控制多个页面 |
css代码风格
样式书写格式
- 紧凑格式
h3 { color:deeppink;font-size 20px;}
- 展开格式（推荐）
h3 {
color: pink;
fpnt-size: 20px;
}
样式大小写
推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外
空格规范
- 属性值前面，置号后面，保留一个空格
- 选择器和大括号中间保留空格
选择器
作用：简单来说就是选择标签用的
基础选择器
标签选择器
指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
语法
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
优点：能快速为页面中同类型的标签统一设置样式
缺点：不能设计差异化样式，只能选择全部的当前标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础选择器之标签选择器</title>
<style type="text/css">
/* 标签选择器：写上标签名 */
p {
color: green;
}
div {
color: pink;
}
</style>
</head>
<body>
<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
</html>
类选择器
如想要差异化选择不同的标签，单独选一个或者选几个标签，可以使用类选择器
语法
.类名 {
属性1: 属性值1;
...
}
注意：
- 类选择器使用"."(英文点号)进行标识，后面紧跟类名（自定义，我们自己命名的）
- 可以理解为给这个标签起了一个名字，来表示
- 长名称或词组可以使用横线来为选择器命名
- 不要使用纯数字、中文等命名，尽量使用英文字母来表示
- 命名要有意义，尽量使别人一眼就知道这个类名的目的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础选择器之类选择器</title>
<style type="text/css">
/* 类选择器口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用 */
.red {
color: red;
}
.start-sing {
color: yellow;
}
.green {
color: green;
}
</style>
</head>
<body>
<ul>
<li class="red">冰雨</li>
<li class="red">来生缘</li>
<li class="start-sing">李香兰</li>
<li>兰亭序</li>
<li class="green">一路向北</li>
</ul>
<div class="red">我也想变成红色</div>
</body>
</html>
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>利用类选择器画三个盒子</title>
<style type="text/css">
.red {
width: 100px;
height: 100px;
/* 背景颜色 */
background-color: red;
}
.green {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</body>
</html>
多类名
使用方式
<div class="red font20">亚瑟</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多类名的使用方式</title>
<style type="text/css">
.red {
color: red;
}
.font35 {
font-size: 35px;
}
</style>
</head>
<body>
<div class="red font35">刘德华</div>
</body>
</html>
使用场景
- 可以把一些标签元素相同的样式（共同部分）放到一个类里面
- 这些标签都可以调用这个公共的类，然后再调用自己独有的类
- 从而节省CSS代码，统一修改也非常方便
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>利用类选择器画三个盒子</title>
<style type="text/css">
.box {
width: 150px;
height: 100px;
font-size: 30px;
}
.red {
/* 背景颜色 */
background-color: red;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="box red">红色</div>
<div class="box green">绿色</div>
<div class="box red">红色</div>
</body>
</html>
id选择器
可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义
语法
#id名 {
属性1: 属性值1;
...
}
注意：id属性只能在每个HTML文档中出现一次
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础选择器之id选择器</title>
<style type="text/css">
/* id选择器的口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用 */
#pink {
color: pink;
}
</style>
</head>
<body>
<div id="pink">迈克尔.杰克逊</div>
<!-- <div id="pink">阿波</div> 错误-->
</body>
</html>
id选择器与类选择器的区别
- 类选择器好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
- id选择器好比人的身份证号码，全中国是唯一的，不得重复
- id选择器和类选择器最大的不同在于使用次数上
- 类选择器在修改样式中使用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用
通配符选择器
使用"*"定义，表示选取页面中所有元素（标签）
注意：通配符选择器不需要调用，自动就给所有的元素使用样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础选择器之通配符选择器</title>
<style type="text/css">
* {
color: red;
}
/* *号这里把html、body、div、span li等等的标签都改为了红色 */
</style>
</head>
<body>
<div>我的</div>
<span>我的</span>
<ul>
<li>还是我的</li>
</ul>
</body>
</html>
基础选择器总结
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p {color: red;} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav {color: red;} |
| id选择器 | 一次只能选择1个标签 | id属性只能在每个HTML文档中出现一次 | 一般和js搭配 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 特殊情况使用 | * {color: red;} |
29万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
