1. CSS介绍与基本使用
1. CSS样式
层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2. CSS作用
CSS就像网页的化妆师，可以让页面变得更加美观。
3. 使用方法
- 直接写在标签里
- 写在 style 标签内
- 使用外部.css文件
三种方式优先级：
行内样式>内部样式>外部样式，且是就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的基本使用</title>
<style>
/*内部样式：2、写在style标签里面*/
p{
color: yellow;
}
</style>
<!--外部样式：3、通过link标签链接外部的样式表-->
<link rel="stylesheet" href="./demo1_css.css">
</head>
<body>
<!--行内样式：1、直接写在标签里面-->
<p style="color: red">我现在的样子很好看，不过你可以来改变我</p>
<p>我现在的样子很好看，不过你可以来改变我</p>
</body>
</html>
<!--
三种方式优先级：
行内样式>内部样式>外部样式，就近原则
-->
/*demo1_css.css*/
p{
color: blue;
}
运行结果
2. CSS选择器
2.1. 选择器作用
给指定的元素设置样式，能够更加精准。
2.2. 选择器权重
选择器也有权重差别，当出现冲突样式的时候，选择权重大的样式。
2.3. 选择器种类
有标签选择器、ID选择器、class选择器、兄弟选择器、后代/子代选择器、复杂选择器、伪类选择器。
2.3.1. 简单选择器
ID选择器：通过标签的id属性，选择对应的元素
class选择器：通过标签的class属性，选择对应的元素借助了一个类的概念，一处定义可以多处使用。
选择器优先级概括如下：
1、id选择器>class选择器>标签选择器>通配符选择器
2、复杂选择器的优先级比较如下：
A. 先比id（最高位），再比class，最后比tagname（标签个数）。
B. id个数不等，id越多，优先级越高
C. id相同，class越多，优先级越高
D. id，class都相同，则标签越多，优先级越高，行内样式>内部样式>外部样式，而且是就近原则。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
/*优先级：id选择器>class选择器>标签选择器>通配符选择器*/
/*标签选择器*/
span{
color: red;
}
/*class选择器*/
.p2{
color: yellow;
}
/*id选择器*/
#p1{
color: green;
}
/*通配符选择器*/
*{
color: rebeccapurple;
}
</style>
</head>
<body>
<p id="p1">我昨天晚上梦到你了，梦里面我很爱你，对于我来说，梦是虚假的，但爱你是真的</p>
<p class="p2">我的每一支笔都知道你的名字</p>
<span class="p2">前半生到处浪荡，后半生为你煲汤</span>
<br>
<span>情话是我抄的，但只说给你是真的</span>
</body>
</html>
运行结果
2.3.2. 群组选择器
群组选择器是可以同时选择多个标签的选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
/*群组选择器，用逗号隔开*/
#p1,span{
color: pink;
}
</style>
</head>
<body>
<p id="p1">我昨天晚上梦到你了，梦里面我很爱你，对于我来说，梦是虚假的，但爱你是真的</p>
<p class="p2">我的每一支笔都知道你的名字</p>
<span class="p2">前半生到处浪荡，后半生为你煲汤</span>
<br>
<span>情话是我抄的，但只说给你是真的</span>
</body>
</html>
运行结果
2.3.3. 层次选择器
层次选择器分为：子代、后代、相邻和兄弟等四种选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
/*后代选择器 用空格隔开*/
div p{
color: coral;
}
/*子代选择器，不包括孙子，用>隔开*/
div>span{
color: darkblue;
}
/*兄弟选择器，不包括自己*/
#p1~p{
color: rebeccapurple;
}
/*兄弟相邻选择器*/
#p1+p{
color: yellow;
}
span+p{
color: aqua;
}
</style>
</head>
<body>
<div>
<p id="p1">我昨天晚上梦到你了，梦里面我很爱你，对于我来说，梦是虚假的，但爱你是真的</p>
<p class="p2">我的每一支笔都知道你的名字</p>
<span class="p2">前半生到处浪荡，后半生为你煲汤</span>
<p><span>情话是我抄的，但只说给你是真的</span></p>
</div>
</body>
</html>
运行结果
2.3.4. 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
/*属性选择器*/
[type]{
color: blue;
}
</style>
</head>
<body>
<form action="">
姓名<input type="text">
密码<input type="password">
电话号码<input type="text">
</form>
</body>
</html>
运行结果
2.3.5. 伪类选择器
通过伪类选择器，可以实现划入的时候再显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
/*属性选择器*/
[type]{
color: blue;
}
</style>
</head>
<body>
<form action="">
姓名<input type="text">
密码<input type="password">
电话号码<input type="text">
</form>
</body>
</html>
运行结果
3. CSS字体/文本
3.1. 字体样式
3.2. 字体
font-family：更改字体，字体可以两个或以上备选，用逗号分隔即可。
3.3. 字体粗细与样式
font-weight：更改字体粗细；font-style更改字体类型。
3.4. 复合类型
使用单个类型，比较麻烦，因此可以使用复合类型，便于书写。
【注】复合类型一定要严格按照样式来书写。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<style>
p{
/*!*字体样式*!*/
/*!*倾斜*!*/
/*font-style: italic;*/
/*!*修改大小写*!*/
/*font-variant: small-caps;*/
/*!*变粗*!*/
/*font-weight: bolder;*/
/*!*变细*!*/
/*font-weight: lighter;*/
/*!*字号*!*/
/*font-size: 16px;*/
/*!*字体*!*/
/*font-family: 宋体;*/
/*!*复合类型需要注意顺序：文字呈现、大小写、粗细、字号、字体*!*/
/*font: normal small-caps bold 30px 宋体;*/
}
</style>
</head>
<body>
<span>我是用来对比的</span>
<p>你的随便我都放在心上</p>
<p>The first step is always the hardest</p>
</body>
</html>
3.5. 文本常用样式
3.6. 文本类型
文本类型主要是对于大段文本类型来进行样式设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本常用样式</title>
<style>
p{
/*!*文本常用样式*!*/
/*!*文本位置*!*/
/*text-align: center;*/
/*!*单下划线*!*/
/*text-decoration: underline;*/
/*!*双下划线*!*/
/*text-decoration-style: double;*/
/*!*波浪线*!*/
/*text-decoration: underline;*/
/*text-decoration-style: wavy;*/
/*!*首行缩进2格*!*/
/*text-indent: 2em;*/
/*!*每个字之间都有两个字的距离，一般是英文才使用*!*/
/*!*letter-spacing: 2em;*!*/
/*word-spacing: 2em;*/
/*!*行高，当line-height=height垂直居中*!*/
/*height: 100px;*/
/*line-height: 100px;*/
}
</style>
</head>
<body>
<span>我是用来对比的</span>
<p>你的随便我都放在心上</p>
<p>The first step is always the hardest</p>
</body>
</html>
4. 背景常用样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景样式</title>
<style>
div{
height: 800px;
width: 1000px;
/*background-color: pink;*/
background-image: url("./imgs/1.jpg");
/*!*不自动平铺*!*/
/*background-repeat: no-repeat;*/
/*!*自动平铺*!*/
/*background-repeat: repeat;*/
/*!*背景大小*!*/
/*background-size: 500px;*/
/*
背景大小自适应：
cover：上下铺满，左右隐藏
contain：左右铺满，上下未铺满
100% 100%：图片暴力铺满，但是被拉伸了
*/
/*background-size: cover;*/
/*background-size: contain;*/
/*background-size: 100% 100%;*/
/*!*靠左居中*!*/
/*background-position: left center;*/
/*!*从左往右，从上往下*!*/
/*background-position: 30% 20%;*/
/*!*复合样式：颜色、导入图片、沿y轴平铺、左居中、大小400px*!*/
/*height: 800px;*/
/*width: 1000px;*/
/*background: orange url("./imgs/1.jpg") repeat left center/500px ;*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
文章到这里就结束了！希望大家能多多支持Python（系列）！六个月带大家学会Python，私聊我，可以问关于本文章的问题！以后每天都会发布新的文章，喜欢的点点关注！一个陪伴你学习Python的新青年！不管多忙都会更新下去，一起加油！
Editor：Lonelyroots
网友评论