文章目录
CSS是什么
CSS全称叫：层叠样式表 (Cascading Style Sheets)，CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离
总的来说：
1、css控制页面的展示效果
2、html决定页面结构
基本语法规范
选择器 + {一条/N条声明}
1、选择器决定针对谁修改 (找谁)
2、声明决定修改啥(干啥)
3、声明的属性是键值对，使用 ; 区分键值对，使用 : 区分键和值
注意：
1、CSS 要写到 style 标签中(后面还会介绍其他写法)
2、style 标签可以放到页面任意位置，一般放到 head 标签内
3、CSS 使用 /* */ 作为注释(使用 ctrl + / 快速切换)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS</title> <!-- style一般放在head中 --> <style> /* 这个是注释 */ /* p是选择器，color等是声明 */ p { /* 设置字体颜色 */ color: red; /* 设置字体大小 */ font-size: 40px; } </style> </head> <body> <p>hello world</p> <p>你好</p> <h1>你好</h1> </body> </html>
引入方式
内部样式表
将css嵌入到 html 页面中，写在 style 标签中，理论上来说 style 放到 html 的哪里都行，但是一般都是放到 head 标签中，这种写法不常用
**优点：**这样做能够让样式和页面结构分离
**缺点：**分离的还不够彻底，尤其是 css 内容多的时候
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<!-- 将style放到head中 -->
<style>
p {
color: red;
font-size: 40px;
}
</style>
</head>
行内样式表
通过 style 属性，来指定某个标签的样式，这种写法只适合于写简单样式，针对某个标签生效，并且这种写法优先级较高，会覆盖其他的样式
缺点: 不能写太复杂的样式
<body>
<!-- 行内优先级高 -->
<p style="color: green;">hello world</p>
<p>你好</p>
<!-- 行内样式表 -->
<h1 style="color: blue; font-size: 40px;">你好</h1>
</body>
外部样式
实际开发中最常用的方式
- 创建一个 css 文件.
- 使用 link 标签引入 css
<link rel="stylesheet" href="[CSS文件路径]">
**优点：**样式和结构彻底分离了
**缺点：**受到浏览器缓存影响, 修改之后 不一定 立刻生效
关于缓存:
这是计算机中一种常见的提升性能的技术手段
网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的，如果频繁访问该网站，那么这些外部资源就没必要反复从服务器获取，就可以使用缓存先存起来(就是存在本地磁盘上了)，从而提高访问效率
可以通过 ctrl + F5 强制刷新页面, 强制浏览器重新获取 css 文件
创建html02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=p, initial-scale=1.0">
<title>外部样式引入</title>
<!-- rel表示引入的文件是样式表，href表示路径 -->
<link rel="stylesheet" href="./html02.css">
</head>
<body>
<p>hello css</p>
</body>
</html>
创建html02.css
p {
color: red;
font-size: 40px;
}
代码风格
**样式大小写：**CSS不区分大小写，但开发时统一使用小写字母
**空格规范：**冒号后面带空格，选择器和 { 之间也有一个空格
选择器的种类
选择器要先选中指定的元素，才能设置元素属性
基础选择器：单个选择器构成
标签选择器
能快速为同一类型的标签选择出来，但不能差异化选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=p, initial-scale=1.0">
<title>外部样式引入</title>
<!-- rel表示引入的文件是样式表，href表示路径 -->
<link rel="stylesheet" href="./html02.css">
</head>
<body>
<p>hello css</p>
<p>hello html</p>
<p>hell JavaScript</p>
<h2>这是h2标题</h2>
</body>
</html>
p {
color: red;
font-size: 40px;
}
类选择器
差异化表示不同标签，多个标签可以使用统一标签
类名用 . 开头的，下方的标签使用 class 属性来调用，一个类可以被多个标签使用，一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让
代码更好复用)，如果是长的类名，可以使用 - 分割，不要使用纯数字、中文以及标签名来命名类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<link rel="stylesheet" href="./html03.css">
</head>
<body>
<!-- class命名类名 -->
<p class="eat">吃饭</p>
<p class="sleep">睡觉</p>
<!-- 多个类名要使用空格分割 -->
<!-- 可以多个命名，从而进行样式叠加，如果出现同一样式多个声明，以最后的声明定义生效 -->
<p class="typing code">打代码</p>
</body>
</html>
/* .开头，接class类名 */
.eat {
color: red;
}
.sleep {
color: green;
}
.code {
color: blue;
}
.typing {
color: red;
font-size: 40px;
}
id选择器
在CSS 中使用 # 开头表示 id 选择器，id 选择器的值和 html 中某个元素的 id 值相同，html 的元素 id 不必带 #，id 是唯一的，不能被多个标签使用 (是和 类选择器 最大的区别)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<link rel="stylesheet" href="./html03.css">
</head>
<body>
<p id="front">前端开发</p>
<p id="server">后端开发</p>
</body>
</html>
/* #开头，接id名字 */
#front {
color: red;
}
#server {
color: green;
}
通配符选择器
使用 * 的定义，不需要被页面结构调用，选取所有的标签，主要用来争对页面中所有元素默认样式进行消除，主要用来消除边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<link rel="stylesheet" href="./html03.css">
</head>
<body>
<p id="haha">哈哈哈哈</p>
<p id="fr">前端开发</p>
</body>
</html>
#haha {
color: red;
}
/* *开头，接花括号 */
* {
background-color: beige;
}
小结
| 作用 | 特点 | |
|---|---|---|
| 标签选择器 | 能选出所有相同标签 | 不能差异化选择 |
| 类选择器 | 能选出一个或多个标签 | 根据需求选择，最灵活，最常用 |
| id选择器 | 能选出一个标签 | 同一个id在一个HTML中只能出现一次 |
| 通配符选择器 | 选出所有标签 | 特殊情况下使用 |
复合选择器：把多种基础选择器综合运用起来
后代选择器
又叫包含选择器，选择某个父元素中的某个子元素
样式：元素1 元素2 {样式声明}
元素 1 和 元素 2 要使用空格分割
元素 1 是父级，元素 2 是子级，只选元素 2，不影响元素 1
<!-- 修改ol的颜色，不改变ul的颜色 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 会全部变颜色 */
/* li {
color: red;
} */
/* 后代选择器 */
/* 方法1:类名 */
/* .red {
color: red;
} */
/* 方法2:修改ol中的li */
/* ol li {
color: red;
} */
/* 方法3:组合选择器 */
/* .hobby li {
color: red;
} */
/* 方法4:爷爷和孙子 */
ol a {
color: red;
}
</style>
</head>
<body>
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打代码</li>
</ul>
<ol class="hobby">
<li class="red">吃饭</li>
<li class="red">睡觉</li>
<li class="red">
<a href="#">打代码</a>
</li>
</ol>
</body>
</html>
伪类选择器
用来定义元素状态
链接伪类选择器
a：link 选择未被访问过的链接
a：visited 选择已经被访问过的链接
a：hover 选择鼠标指针悬停上的链接
a：active 选择活动链接(鼠标按下了但是未弹起)
如何让一个已经被访问过的链接恢复成未访问的状态?
清空浏览器历史记录即可，快捷键为：ctrl + shift + delete
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
a {
color: black;
}
/* 选择鼠标指针悬停上的链接 */
a:hover {
color: red;
}
/* 选择活动链接(鼠标按下了但是未弹起) */
a:active {
color: green;
}
</style>
</head>
<body>
<a href="#">不跳转</a>
</body>
</html>
:force 伪类选择器
选取获取焦点的 input 表单元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 被选中的表单的字体就会变成红色 */
.three>input:focus {
color: red;
}
</style>
</head>
<body>
<div class="three">
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text">
</div>
</body>
</html>
小结
| 选择器 | 作用 |
|---|---|
| 后代选择器 | 选择后代元素，可以是孙子元素 |
| 链接伪类选择器 | 选择不同状态的链接 |
| :force 伪类选择器 | 选择被选中的元素 |
更多选择器的学习可以通过以下链接进行学习：
常见元素属性
元素有很多，不用硬背，借助参考文档学习：CSS 参考手册 (w3school.com.cn)
字体属性
font-family：设置字体
font-size：字体大小
font-weight：字体粗细
normal：默认值
bold：粗体
bolder：更粗的字体
lighter：更细的字体
100（数字）：数字越大越粗
inherit：从父元素继承字体
font-style：字体倾斜度
normal：默认值，不倾斜
italic：斜体
oblique：倾斜字体
inherit：从父元素继承字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体属性</title>
<style>
div {
/* 如果字体相关修改写错的话,会显示默认的大小 */
/* 字体修改可以写中文,但不推荐 */
font-family: '宋体';
/* 字体大小 */
font-size: 40px;
/* 字体粗细 */
font-weight:700;
/* 字体样式 */
font-style: italic;
}
</style>
</head>
<body>
<div>这是宋体</div>
</body>
</html>
文本属性
color：设置字体颜色
预定义的颜色值：直接是单词
（最常用） 十六进制形式：每两位表示一种三原色(可以简写成3个16进制数)，三原色顺序为红绿蓝，数字越大颜色越深RGB 方式：和十六进制形式一样，变成3个 0-255 的值
text-align：控制文字水平方向对齐
center: 居中对齐
left: 左对齐
right: 右对齐
text-decoration：表示文本装饰
underline 下划线 [常用]
none 啥都没有，可以给 a 标签去掉下划线
overline 上划线 [不常用]
line-through 删除线 [不常用]
text-indent：控制文本缩进
单位可以使用 px 或者 em
使用 em 作为单位更好，1 个 em 就是当前元素的文字大小
缩进可以是负的，表示往左缩进(会导致文字就冒出去了)
line-height：表示行高，上下文之间的基线距离
行高 = 上边距 + 下边距 + 字体大小
行高也可以取 normal 等值
行高等与元素高度，就可以实现文字居中对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本属性</title>
<style>
.color {
font-size: 40px;
/* 直接写颜色名称 */
color: red;
/* 16进制表示颜色,两位表示一种三原色(可以简写成3个16进制数) */
/* 表示的颜色顺序为红绿蓝,数字越大颜色越深 */
color: #0000ff;
/* 和上面的表示方法是一样的 */
color: rgb(0, 255, 0);
}
h1 {
text-align: left;
text-decoration: overline;
}
h2 {
text-align: center;
text-decoration: line-through;
}
h3 {
text-align: right;
}
p {
text-indent: 2em;
text-decoration: underline;
line-height: 50px;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="color">这是文本属性</div>
<h1>靠左</h1>
<h2>居中</h2>
<h3>靠右</h3>
<!-- lorem 可以生成一大串文字 -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo perspiciatis sunt molestiae porro cum quaerat tempore neque, voluptatibus dolorem ipsam vero at quam praesentium. Labore, atque? Aperiam a asperiores libero?</p>
<a href="#">不跳转</a>
</body>
</html>
背景属性
背景颜色和图片：
background-color：设置背景颜色
background-image: url(……)：设置背景图片
比 image 更方便控制位置(图片在盒子中的位置)
注意：url 不要遗漏，url 可以是绝对路径，也可以是相对路径，url 上可以加引号，也可以不加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景属性</title>
<style>
/* 全局换背景色 */
body {
background-color: #6fb7e7e7;
}
/* 添加div的背景图片 */
div {
font-size: 40px;
background-image: url(./img.png);
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div>
这是我学习背景属性
</div>
</body>
</html>
background-repeat：设置背景平铺方式
重要取值:
repeat：平铺（默认）
no-repeat：不平铺
repeat-x：水平平铺
repeat-y：垂直平铺
背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方
<!-- 在上述代码的基础上修改 -->
<style>
/* …… */
div {
font-size: 40px;
/* background-image: url(./img.png); */
background-image: url(../Html/female.png);
background-repeat: repeat-y;
width: 700px;
height: 400px;
}
</style>
background-position：修改背景图片的位置
参数有三种风格:
方位名词: (top, left, right, bottom)
精确单位: 坐标或者百分比(以左上角为原点)
混合单位: 同时包含方位名词和精确单位
关于坐标系:
计算机中的平面坐标系, 一般是左手坐标系
<style>
/* …… */
div {
/* …… */
/* 设置背景图片位置 */
/* 坐标 */
background-position: 200px 200px;
/* 方位名词 */
background-position: top;
/* 混合 */
background-position: 100px center;
}
</style>
background-size：设置背景尺寸
1、可以填具体的数值：如 40px 60px 表示宽度为 40px，高度为 60px
2、可以填百分比：按照父元素的尺寸设置.
3、cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
4、contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
<style>
/* …… */
div {
/* …… */
/* 设置背景图片尺寸 */
/* 具体数值 */
background-size: 700px 400px;
/* cover */
background-size: cover;
/* contain */
background-size: contain;
}
</style>
圆角矩形
通过 border-radius 使边框带圆角效果
border-radius: length（length 是内切圆的半径，数值越大，弧线越强烈）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角矩形</title>
<style>
div {
width: 400px;
height: 200px;
border: 2px red solid;
/* 圆角矩形 */
border-radius: 20px;
/* 生成圆角矩形 */
/* 让 border-radius 的值为矩形高度的一半即可 */
border-radius: 100px;
/* 也可以用百分比表示 */
border-radius: 50%;
/* 生成圆形 */
width: 200px;
height: 200px;
/* 让 border-radius 的值为正方形宽度的一半 */
border-radius: 100px;
/* 展开写法,对四个角分别设置 */
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;
/* 等价于(顺时针排列) */
border-radius: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
rder: 2px red solid;
/* 圆角矩形 /
border-radius: 20px;
/ 生成圆角矩形 /
/ 让 border-radius 的值为矩形高度的一半即可 /
border-radius: 100px;
/ 也可以用百分比表示 */
border-radius: 50%;
/* 生成圆形 */
width: 200px;
height: 200px;
/* 让 border-radius 的值为正方形宽度的一半 */
border-radius: 100px;
/* 展开写法,对四个角分别设置 */
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;
/* 等价于(顺时针排列) */
border-radius: 10px 20px 30px 40px;
}
</style>
