文章目录
- 一、CSS是什么？
- 二、基本语法
- 三、介绍方法
-
- 3.1内部样式表
- 3.2内联样式
- 3.3外部样式
- 四、代码风格
-
- 4.1样式格式
- 4.2样式大小写
- 4.3空格规范
- 五、选择器
-
- 5.选择器的功能
- 5.选择器的类型
- 5.3基础选择器
-
- 5.3.1标签选择器
- 5.3.2类选择器
- 5.3.3id选择器
- 5.3.四通配符选择器
- 5.3.5基本选择器后记
- 5.4复合选择器
-
- 5.4.1后代选择器
- 5.4.2子选择器
- 5.4.3并集选择器
- 5.4.4伪类选择器
- 5.4.5复合选择器后记
- 六、常用元素属性
-
- 6.1字体属性
-
- 6.1.1设置字体
- 6.1.2大小
- 6.1.3粗细
- 6.1.4样式
- 6.2文本属性
-
- 6.2.1颜色
- 6.2.2文本对齐
- 6.2.3文本装饰
- 6.2.4文本缩进
- 6.2.5行高
- 6.3背景属性
-
- 6.3.1背景颜色
- 6.3.2背景图片
- 6.3.3背景平铺
- 6.3.4背景位置
- 6.3.5背景图片尺寸
- 6.3.6圆角矩形
- 七、元素显示模式
-
- 7.1块级元素
- 7.2行内元素
- 7.3行内块元素
- 八、盒模
-
- 8.1边框
- 8.2内边距
- 8.3外边距
- 九、弹性布局
-
- 9.1flex
- 9.22水平方向的排列模式justify-content
- 9.33垂直方向的排列模式align-item
- 9.4实现典型的页面布局
提示：以下是本文的文本内容，以下案例可供参考
一、CSS是什么？
CSS是层叠样式表（Cascading Style Sheets） CSS 能够准确控制网页中元素位置的排版， 美化页面的效果. 页面的样式和结构可以分开.
说句人话：
如果说HTML只表示页面的结构和内容，所以CSS描述页面的样式 具体来说，它描述了任何网页的元素：大小/位置/字体/颜色/背景/边框…
二、基本语法
选择器 引用属性： 1)选择器决定修改谁 (找谁) 2)声明决定修改什么. (干啥) 3)声明的属性是键值对. 使用 ; 区分键值对， 使用 : 区分键和值.
<style> p {
/* 设置字体颜色 */ color: red; /* 设置字体大小 */ font-size: 30px; } </style> <p>hello</p> 
ps: CSS 要写到 style 标签中(后面还会介绍其他写法) style 标签可以放在页面的任何位置. 一般放到 head 标签内. CSS 使用 /* */ 作为注释. (使用 ctrl / 快速切换) .
三、介绍方法
3.1内部样式表
通过style标签来写CSS 这种方法并不常见，但如果你只是写一些简单的东西CSS也没毛病
写法：写在 style 标签中. 嵌入到 html 内部
: 这样可以将样式与页面结构分离. : 分离不够彻底. 尤其是 css 内容多的时候. 比如我们现在就让hello字体变红
<style> p{
color: red; } </style> <p> hello </p> 嵌入到html中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style> p{
color: red; } </style>
<p>
hello
</p>
<p>
world
</p>
</body>
</html>
注: p 是选择器，会带p标签的
实际网页效果如下：
3.2内联样式
通过html标签中的style属性来应用 我们这里同样的让hello字体变成红色
示例如下：
<p style="color: red;">hello</p>
这种内联样式，是属于一种比较特殊的用法（通常会搭配JS使用）， 这种写法只适用于比较简单的情况（如果样式比较复杂，就会显的很乱）
内联样式只是针对当前元素生效（不需要写选择器，也不用写{}，直接写CSS属性和值即可）举个例子
<p style="color: red;">hello</p>
<p>
world
</p>
内联样式，我们style里面只放了hello,所以字体颜色变红只会针对hello生效，world并不会改变 这和3.1说的内部样式（针对所有选择器）有着很大区别
3.3外部样式
外部样式是实际开发用的最多的 把CSS代码单独抽出来，放到一个.css文件中，然后在html代码中，通过link标签来引入该CSS文件。 这种方式，可以让多个html复用同一个样式
比如写一个网站，这个网站里可能有很多页面，这些页面样式都是相似的 这种写法类似于java中定义一个方法，不光要定义，还要调用 调用方法就是，在head里面加上link标签 link标签中，默认ret=“stylesheet” 表示样式表的意思，然后你在href后面加上你要引入哪个css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p>
hello
</p>
<p>
world
</p>
</body>
</html>
四、代码风格
4.1样式格式
1.紧凑风格
p { color: red; font-size: 30px;}
2.展开风格(推荐)
p {
color: red;
font-size: 30px;
}
如果多了一下换行，虽然对程序员友好了，但是整体的css文件就会变大，由于css文件都是通过网络传输给浏览器，然后由浏览器来进行解析的，如果css文件变大了，也就更吃网络带宽，从而影响效率
因此通过开发者工具，你去看一些网站，你会发现网站的CSS一般都是紧凑风格，然而我们在开发代码阶段一般用的是宽松的换行风格
实际上我们是通过第三方工具自动进行风格转换的（前端的打包工具）
ps:不光css如此，js更加丧心病狂，js不仅会把你的换行给弄掉，并且你的变量名都会变成a、b、c这种短名字
4.2样式大小写
HTML和CSS都是不区分大小写的，我们习惯上使用小写 而正因为同一使用小写，所以就不存在“驼峰命名法”，eg：numCount 如果写numcount就很难看出是两个词语了，那怎么写呢？
我们CSS中会通常用“脊柱命名法”，也就是用“-”来分割两个单词,eg:font-size
脊柱命名法在日常开发中并不常见，因为大部分编程语言都不允许使用“-”，防止与减号混淆。而css中并没有运算，所以“-”可以使用
4.3空格规范
冒号后面带空格 选择器和 { 之间也有一个空格.
五、选择器
5.1选择器的功能
选中页面中指定的标签元素. 要先选中元素, 才能设置元素的属性. 就好比 SC2, War3 这样的游戏, 需要先选中单位, 再指挥该单位行动.
5.2选择器的种类
- 基础选择器: 单个选择器构成的 标签选择器 类选择器 id 选择器 通配符选择器
- 复合选择器: 把多种基础选择器综合运用起来. 后代选择器 子选择器 并集选择器 伪类选择器
参考文档: https://www.w3school.com.cn/cssref/css_selectors.asp>
5.3基础选择器
5.3.1标签选择器
这种选择器就是html的一个标签名 : 能快速为同一类型的标签都选择出来，但是不能差异化选择
<style> p {
color: red; } div {
color: green; } </style>
<p>咬人猫</p>
<p>咬人猫</p>
<p>咬人猫</p>
<div>阿叶君</div>
<div>阿叶君</div>
<div>阿叶君</div>
网页效果如下：
5.3.2类选择器
类选择器是最常用的，也是最灵活的 通过类选择器，我们可以随心所欲选择任意想要的元素，理论上来说只要这一种选择器就可以了 : 差异化表示不同的标签，可以让多个标签的都使用同一个标签.
：首先需要在CSS代码中，创建一个类名，在对应的html元素中，通过class属性来引用这个类名，此时具有该类名的元素，就都会应用上相关的CSS属性。
<style> /* .开头的就是css中的类名 */ .red{
color: red; } </style>
<p class="red">
hello
</p>
<p>
world
</p>
网页效果如下：
5.3.3id选择器
：CSS 中使用 # 开头表示 id 选择器 id 选择器的值和 html 中某个元素的 id 值相同 html 的元素 id 不必带 # id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别
：给被选择的元素设一个id属性（id在一个页面中，不能重复） 因此id选择器只能选择一个元素，不能使用多个
<style> #red{
color:red; } </style>
<p id="red">
hello
</p>
<p>
world
</p>
网页效果如下：
5.3.4通配符选择器
通配符选择器就是一个单纯的“ * ” 通配符是什么呢？ 大家联想一下mysql模糊查询里的%和_ 你想查询到李字开头的人，你就可以用like 李%，这个%就可以代表所有的字
而我们的*就是css里面的通配符 它是用来直接选择页面上所有元素的
*{
margin:0;
padding:0;
box-sizing:border-box;
}
这就表示对所有页面的html都应用上述的样式
5.3.5基础选择器后记
CSS中选择器非常多，我们这里只介绍最简单也最常见的，了解上述的4个基本上就够用了。
5.4复合选择器
5.4.1后代选择器
我们可以通过多个选择器的组合，能够选择某个元素里面的子孙元素（后代元素）
：
选择器1 选择器2 {样式声明}
选择器 1 和 选择器 2 要使用空格分割 选择器 1 是父级, 选择器 2 是子级, 只选选择器 2 , 不影响选择器 1 选择器1和2都可以是标签选择器/类选择器/id选择器
写法1
eg：将ul 中li字体变成红色，ol的不变
<style> ul li{
color: red; } </style>
<ul>
<li>
aaa
bbb
ccc
</li>
</ul>
<ol>
<li>
ddd
eee
fff
</li>
</ol>
网页效果如下：
写法2
这里选择器1 .选择器2,两者必须有空格，如果你不加空格完全是两个意思，如下图
<style> ul .zimu{
color: red; } </style>
<ul>
<li class="zimu">
aaa
bbb
ccc
</li>
</ul>
<ol>
<li class="zimu">
ddd
eee
fff
</li>
</ol>
网页效果如下：
5.4.2子选择器
我们可以通过多个选择器的组合，能够选择某个元素里面的子元素 ：和后代选择器类似, 但是只能选择子标签.
选择器1>选择器2 { 样式声明 }
使用大于号分割 示例1
<style> ul>li{
color: red; } </style>
<ul>
<li class="zimu">
aaa
bbb
ccc
<a href="#">aaa</a>
<!-- a标签相对于ul是孙子辈标签 -->
</li>
</ul>
<ol>
<li class="zimu">
ddd
eee
fff
</li>
</ol>
网页效果如下： 示例2：
<style> ul>a{
color: red; } </style>
<ul>
<li class="zimu">
aaa
bbb
ccc
<a href="#">aaa</a>
<!-- a标签相对于ul是孙子辈标签 -->
</li>
</ul>
<ol>
<li class="zimu">
ddd
eee
fff
</li>
</ol>
这里由于a是ul的孙子辈标签，你要在ul里面找a，要找的这个a是儿子辈的，显然是没有啊，所以没有红色字体
5.4.3并集选择器
用于选择多组标签. (集体声明) ：
选择器1, 选择器2 { 样式声明 }
eg：将ul和ol里的li都变成红色
<style> ul>li, ol>li{
color: red; } </style>
<ul>
<li class="zimu">
aaa
bbb
ccc
<a href="#">aaa</a>
<!-- a标签相对于ul是孙子辈标签 -->
</li>
</ul>
<ol>
<li class="zimu">
ddd
eee
fff
</li>
</ol>
网页效果如下： 第一行第二个aaa为什么没有变成红色？因为我们用的是ul>li,原因同5.4.2子选择器
5.4.4伪类选择器
1) 链接伪类选择器
a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)
link和visited实际用的并不多，我们主要演示 hover和active
hover
<style> div{
color: black; } div:hover{
color: red; } </style>
<div>
我是一个div
</div>
鼠标没放上去时，是黑色
鼠标放上去时，是红色 active
<style> div{
color: black; } div:active{
color: red; } </style>
<div>
我是一个div
</div>
2) :force 伪类选择器 选取获取焦点的 input 表单元素
<div class="three">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
.three>input:focus {
color: red;
}
此时被选中的表单的字体就会变成红色
5.4.5复合选择器后记
六、常用元素属性
属性有很多，不要求全部背下来，在使用中进行学习 参考文档：https://www.w3school.com.cn/cssref/index.asp
6.1字体属性
6.1.1设置字体
font-family语言上看，字体家族，说白了就是字体种类
设置字体的时候，需要保证，你设置的字体，对方的电脑上存在， 系统是自己默认带一些字体的，但还会有一些额外的第三方字体。 如果你想用第三方字体，你需要确认别人的机器上有没有这个。 那怎么确认呢？也好办，我们可以通过html中的link属性来从网络上加载字体文件。
<style> .one{
font-family: '微软雅黑'; } .two{
font-family: '宋体'; } </style>
<div class="one">
我是第一行字
</div>
<div class="two">
我是第二行字
</div>
网页效果如下：
ps:font-family的值是可以设置多个的，如果设置多个，系统会依次检测第一个字体有没有，如果没有就往后检测第二个字体有没有…如果都没有，就会使用默认字体
6.1.2大小
font-size字体大小
<style> .one{
font-size: 50px; } .two{
font-size: 20px; } </style>
<div class="one">
我是第一行字
</div>
<div class="two">
我是第二行字
</div>
6.1.3粗细
font-weight字体粗细
<style> .one{
font-weight: 900; } .two{
font-weight: 300; } </style>
<div class="one">
我是第一行字
</div>
<div class="two">
我是第二行字
</div>
除了用数字来表示，还可以用lighter、normal、bold、bolder表示粗细
<style> /* 更细 */ .one{ font-weight: lighter; } /* 正常 */ .two{ font-weight: normal; } /* 粗 */ .three{ font-weight: bold; } /* 更粗 */ .four{ font-weight: bolder; } </style> <div class="one"> 我是第一行字 </div> <div class="two"> 我是第二行字 </div> <div class="three"> 我是第三行字 </div> <div