本文介绍了CSS编写样式的方式，包括内部样式、内联样式和外部样式。详细讲解了各种选择器，如标签选择器、类选择器、ID选择器，以及后代选择器、子选择器等。此外，还涵盖了常用的CSS属性，如字体、背景和圆角矩形的设置，以及元素的显示模式和盒子模型。最后提到了弹性布局的概念和快捷键的使用。
目录
一、写CSS的三种方式
1、内部样式
使用style标签，直接把CSS写到html文件中。
此时的style标签可以放到任何位置，一般建议放到head标签里
针对的对象为整个html文件中的同一类对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
这是一个段落
</p>
<!--style标签可以放在代码的任意位置-->
<style>
p{
color:red;
font-size:30px; <!--字体大小-->
<!--{}里面的CSS属性，可以写一个也可以写多个。每个属性都是一个键值对，键和值之间使用冒号分隔，键值对之间使用分号分隔，每个键值对可以独占一行，也可以不独占一行-->
}
</style>
</body>
</html>2、内联样式
使用style属性，针对指定的元素设置样式。
此时不需要写选择器，直接写属性键值对，这个时候的样式只是针对当前元素生效。
只针对当前对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="color:red; font-size:40px;">
这是一个段落
</p>
</body>
</html>内联样式的优先级比内部样式优先级高
3、外部样式
创建一个.html文件，再创建一个.css文件，用来写格式
把CSS代码单独作为一个.css文件，再通过link属性，让html引入该css文件。
css1.html源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
这是一个段落
</p>
</body>
</html>style.css源码
p{
color: rgb(229, 255, 0);
font-size:100px;
}通过在css1.html文件中使用link标签，来连接两个文件
<link rel="stylesheet" href="style.css">href属性，描述了.css文件的地址。
运行结果
实际开发中，一般都使用外部样式来写css。
二、 CSS选择器
1、标签选择器
在{}的前面写标签名字，此时意味着会选中当前页面中所有的指定标签。
2、类选择器
创建CSS类，手动指定哪些元素应用这个类
定义类，需要使用 . 开头
引用这个类时，通过属性class属性=“类名”即可，不需要带 .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
/*此处定义了一个CSS类，名字叫做one，CSS类名定义的时候需要使用.开头*/
.one{
color:red;
}
.two{
color:green;
}
.three{
color:blue;
}
</style>
<div class="one">
这是第一个div
</div>
<div class="two">
这是第二个div
</div>
<div class="three">
这是第三个div
</div>
</body>
</html>
3、ID选择器
html页面中的每一个元素，都可以设置一个唯一的id，作为元素的身份标识。
通过操作id来选中元素。
类选择器，可以让多个元素应用同一个类。
id选择器，只能针对唯一的元素生效。同一个页面中id的值不能重复
#id名{属性值}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
#onediv{
color:red;
}
#twodiv{
color:blue;
}
</style>
<div id="onediv">
这是第一个div
</div>
<div id="twodiv">
这是第二个div
</div>
</body>
</html>
4、后代选择器
<style>
ul li{
color:red;
}
</style>先找到ul标签，再找到ul中的li，对li中的元素进行操作。
不一定非要是子元素，只要是后代就行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
ul li{
color:red;
}
</style>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</body>
</html> 
5、子选择器
只找匹配的子元素，不找孙子元素之类的，针对性更强。
选择器1>选择器2{属性}
<style>
.one>li{
color:red;
}
</style>
只在one类中的子元素里找li标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.one>li{
color:red;
}
</style>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
<ul class="one">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</body>
</html>6、并集选择器
多组选择器应用同一个样式
选择器1，选择器2{属性}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.two,.three{
color:red;
font-size:40px;
}
</style>
<div class="one">
<a href="#" class="two">链接1</a>
<p>
<a href="#" class="three">链接2</a>
</p>
</div>
</body>
</html>让two和three都应用同一种样式
7、伪类选择器
复合选择器的特殊用法。
前面的选择器都是选中某一元素。而伪类选择器是选中某个元素的某个特定状态。
:hover 表示鼠标悬停时的状态
:active 表示鼠标按下时的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.one:hover{
color:red;
}
.one:active{
color:green;
}
</style>
<div class="one">
这是一个div
</div>
</body>
</html>鼠标未悬停时，字体的颜色为黑色
悬停之后，颜色变为红色
点击之后，字体变绿
三、CSS常用属性
1、字体属性
a. font-family 设置字体家族
这个属性指定的字体，要求必须是系统已经安装了的。
如果要指定的一些特殊字体系统上没有，则不能正确显示。
这种情况一般是需要通过浏览器请求对应的服务器，获取到指定字体文件，才能设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.one{
font-size: 40px;
font-family:'微软雅黑';
}
</style>
<div class="one">
这是一个div
</div>
</body>
</html>
b. font-size 设置字体大小
浏览器的每一个文字，都可以看作是一个方框。
如果是英文阿拉伯数字，方框比较窄。如果是中文，一般就是一个正方形。
设置font-size:20px； 即文字框高度是20px
c. font-weight 设置字体粗细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.one{
font-size: 40px;
font-family:'微软雅黑';
font-weight:bold;
}
</style>
<div class="one">
这是一个div
</div>
</body>
</html>
d. font-style 设置文字倾斜
e. color 设置文字颜色
RGB，每种颜色都分配一个字节，每个字节的范围是0-255或者00-FF
如果每个分量的两个十六进制数字都相同，则可以把6位十六进制缩写成3位十六进制。
color：rgb(255，0，0);
color: #ff0000;
color: #f00;
color: red;f. text-slign 设置文本对齐方式
text-align: left; //左对齐
text-align: right; //右对齐
text-align: center; //居中g. text-decoration 设置文本装饰
text-decoration: underline; //下划线
text-decoration: none; //什么都没有，可以给a标签（超链接）去掉下划线
text-decoration: overline; //上划线
text-decoration: line-through; //删除线h. text-indent 设置首行缩进
文本缩进的值也可以是负数，则往左缩进
text-indent: 40px;
text-indent: 2em; //em是一个相对的量，是以文字尺寸为基础设置的。i. line-height 设置行高
line-height: 60px;
line-height:calc(100% - 50px);//这种也可以，CSS中减法运算必须加空格2、背景属性
a. background-color 设置背景颜色
background-color: rgb(0,255,0);
background-color:rgba(212, 166, 16,0.3);//a是透明度
background-color: green;
background-color: #00ff00;b. background-image 设置背景图片
background-image: url(图片地址)当引入背景图片之后，默认情况下，图片是平铺的。
如果不想平铺，则使用
background-repeat: no repeat;
//或者
background-repeat: none;禁止平铺之后，图片会出现在左上角，如果想让图片居中，则使用
background-position: center center;
//第一个是水平方向居中，第二个是垂直方向居中
//参数可以是，top,center,bottom,right,left
//也可以写成坐标的形式
background-position: 10px 50px; 
设置背景图片的大小
background-size: contain; //尽可能的大，把文字都铺满
background-size: cover; //充满屏幕
//也可以使用数字
3、圆角矩形
border-radius: 50px;当border-radius的值刚好是矩形高度height的一半时，则得到圆角矩形
如果想生成圆形，则弄一个正方形，然后border-radius设置为高的一半即可。
四、元素的显示模式
display: block; //块级元素
display: inline; //行内元素关于块级元素和行内元素的区别（前端的经典面试题）
1.块级元素会独占一行，行内元素不独占一行。
2.块级元素的高度，宽度，内外边距都可以设置。而行内元素的高度、宽度、行高无效，内边距有效，外边距有时有效有时无效。
3、块级元素默认宽度和父元素一样宽，行内元素默认宽度和里面的内容一样宽。
五、CSS盒子模型
描述了html元素基本的布局规则。
用来控制元素与元素之间或者元素和内容之间的相对位置。
1、content：内容
2、paddig: 内边距
padding: 10px; //表示四个方向都是10px边距
padding: 10px 20px; //表示上下边距都是10，左右边距是20
padding: 10px 20px 30px 40px; //分别对应上、右、下、左（顺时针）
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;3、border: 边框
设置边框时要设置三个方面，边框的粗细，边框的颜色，边框的风格（实线solid、虚线dashed、其他的线）
border:5px rgb(0,255,0) solid边框默认情况下会撑大盒子。如果不想把盒子撑大，则使用
box-sizing: border-box;4、margin: 外边距
写法和padding类似
特殊用法：
把margin-left和margin-right设置为auto（让浏览器自动调节）
此时该元素就能在父元素内部居中放置
六、弹性布局
主要解决水平方向排列问题。
1、开启弹性布局
display: flex;给要水平排列的元素的父元素设置flex
此时，弹性容器里面的元素，不再是块级或者行内元素了，而是成为了弹性元素，是遵守弹性布局的，可以设置尺寸和边距。
2、设置元素水平方向的排列方式
justify-content:flex-start; flex-start表示靠左排列，center表示靠中间排列，flex-end表示靠右排列,space-around让元素等间距排列（左右都有空白）,space-between让元素等间距排列（只有中间有空白）
3、设置元素垂直方向的排列方式
align-items: flex-end;七、快捷键
类的注释/* */，Ctrl+/
直接输入div.one，按下enter，会自动生成一个div标签，class值为one
直接输入div#one,按下enter，会自动生成一个div标签，id值为one
扫一扫
123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
