CSS
学习目标
☁️ 掌握CSS基本语法规范和代码书写风格；
☁️ 掌握CSS选择器的各种用法；
☁️ 熟练使用CSS中的常用属性；
什么是CSS
☁️ CSS，即Cascading Style Sheets（层叠样式表）；
☁️ CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果；
基本语法规范
☁️ 选择器
⚡️ 选择器类似“指针”，“指向谁”就修改谁；
⚡️ 声明决定修改啥；
⚡️ 声明的属性是键值对； 键值对（“key = value”），顾名思义，每一个键会对应一个值；
<style>
/*p代表下面的段落*/
p{
/*设置字体颜色*/
color :red;
/*设置字体大小*/
font-size:30px;
}
</style>
<!--被指向的对象-->
<p>hello</p>
⚡️ CSS 要写到 style 标签中，style中的内容就是css代码；
⚡️ style标签可以放到页面任意位置，一般放到 head 标签内；
⚡️ CSS 使用 /* */ 作为注释；
引入方式
内部样式表
☁️ 在HTML代码中直接写入<style>标签；
行内样式表
☁️ 通过 style 属性, 来指定某个标签的样式；
<style>
div {
color: red;
}
</style>
<div style="color:green">想要生活过的去, 头上总得带点绿</div>
⚡️ 缺点：不能写太复杂的样式，这种写法优先级较高，会覆盖其他的样式；
外部样式
☁️ 创建一个 css 文件，使用 link 标签引入 css；
⚡️ 创建一个demo.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>上帝为你关上一扇门, 然后就去睡觉了</div>
</body>
⚡️ 创建一个style.css
div{
color:red;
}
⚡️ 使用link标签将style引入demo；
<link rel="stylesheet" href = "style.css">
代码风格
样式风格
☁️ 紧凑风格
p { color:red; font-size : 30px; }
☁️ 展开风格
p {
color : red;
fomt-size : 30px;
}
样式大小写
☁️ 虽然CSS不区分大小写，但是我们开发时统一使用小写字母；
空格规范
☁️ 冒号之后要加一个空格（不加空格代码也不会出错，只是一个规范）；
☁️ 选择器和 { 之间也要有一个空格；
选择器
选择器的功能
☁️ 选中页面中指定的标签元素；
选择器的种类
☁️ 基础选择器：标签选择器；类选择器；id选择器；通配符选择器；
☁️ 复合选择器：后代选择器；子选择器；并集选择器；伪类选择器；
基础选择器
标签选择器：
<style>
p {
color: red;
}
div {
color: green;
}
</style>
<p>咬人猫</p>
<p>咬人猫</p>
<p>咬人猫</p>
<div>阿叶君</div>
<div>阿叶君</div>
<div>阿叶君</div>
类选择器：
<style>
.blue {
color: blue;
}
</style>
<div class="blue">咬人猫</div>
<div>咬人猫</div>
⚡️ 类名用 . 开头；
⚡️ 下方的标签使用class属性来调用
☁️ 一个标签可以使用多个类名；
<style>
.box {
width: 200px;
height: 150px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>
⚡️ style标签里面定义了三个类，下面div标签可以引用这三个类，引用一个两个三个都可以，但是相同的类可能会冲突，比如即引用red又引用green；
☁️ 效果如下图：
id选择器：
☁️ CSS中以#开头的是id选择器；
☁️ id选择器的值和HTML中某个元素的id值相同；
☁️ HTML的元素id不必带#；
☁️ id是唯一的，不能被多个标签使用；
<style>
#ha {
color: red;
}
</style>
<div id="ha">蛤蛤蛤</div>
通配符选择器：
☁️ 使用*定义，表示选取所有标签；
*{
color : red;
}
总结：
| 作用 | 特点 | |
|---|---|---|
| 标签选择器 | 能选出所有相同标签 | 不能差异化选择 |
| 类选择器 | 能选出一个或多个标签 | 根据需求选择，最灵活，最常用 |
| id选择器 | 能选出一个标签 | 同一个id在一个HTML中只能出现一次 |
| 通配符选择器 | 选择所有标签 | 特殊情况下使用 |
| 选择器 | 语法 |
|---|---|
| 标签选择器 | 标签名+{ } |
| 类选择器 | . + 类名 + { } |
| id选择器 | # + id名 + { } |
| 通配符选择器 | * + { } |
复合选择器
后代选择器
☁️ 又叫包含选择器，选择某个父元素中的子元素；
☁️ 例如，下面有一个有序列表和一个无序列表：
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<ol>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ol>
☁️ 如果想把有序列表的字体颜色改了，可以使用：
<style>
ol li {
color: red;
}
</style>
☁️ 这样就可以把有序列表中的三个元素改为红色，如果只想要修改其中一个呢？
☁️ 可以在想要修改的那个标签中加入一个标签：
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<ol>
<li>ddd</li>
<li>eee</li>
<li><p>fff</p></li>
</ol>
☁️ 在使用css单独修改这一个元素：
ol li p {
color : yellow;
}
子选择器
☁️ 和后代选择器类似，但是只能选择子标签不能选择孙子标签；
☁️ 例如要修改下面的字体“链接1”：
<div class="two">
<a href="#">链接1</a>
<p><a href="#">链接2</a></p>
</div>
☁️ 若适用后代选择器：
.two a {
color: red;
}
☁️ 若使用子选择器：
.two>a {
color: red;
}
并集选择器
☁️ 并集选择器建议竖着写. 每个选择器占一行 (最后一个选择器不能加逗号）；
☁️ 通过 逗号 分割等多个元素，表示同时选中元素 1 和元素 2，任何基础选择器都可以使用并集选择器；
<div>苹果</div>
<h3>香蕉</h3>
<ul>
<li>鸭梨</li>
<li>橙子</li>
</ul>
☁️ 把苹果和香蕉改成红色：
div, h3{
color: red;
}
☁️ 把鸭梨和橙子也改为红色：
div,
h3,
ul>li{
color: red;
}
伪类选择器
☁️ 伪类是基于元素的特征而不是他们的id、class、属性或者内容。一般来说，元素的特征是不可以从DOM树上推断得到的，而且其是动态的，当用户和DOM进行交互的时候，元素可以获得或者失去一个伪类；
链接伪类选择器：
<a href="https://blog.csdn.net/m0_60266328?spm=1000.2115.3001.5343"> hello </a>
☁️ 我们可以看到“hello”这个链接是黑的，如果想要改变它的颜色并去掉下划线呢？
a:link {
color: pink;
/* 去掉 a 标签的下划线 */
text-decoration: none;
}
☁️ 再通过以下代码，就可以修改成我们想要的效果了：
/*点击过一次之后就会变成绿色*/
a:visited {
color: green;
}
/*当鼠标移动到链接之上时会变成红色*/
a:hover {
color: red;
}
/*链接点击时为黑色*/
a:active {
color: blue;
}
☁️ 注意：这四个选择器的顺序不可调换；
force伪类选择器
☁️ 获取input表单元素：
<div class="three">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
☁️ 再输入：
.three>input:focus {
color: red;
}
☁️ 此时在文本框中输入的文字就会变成红色（有时候部分浏览器不兼容，需要换一下浏览器试试）；
常用元素属性
字体属性
设置字体
<div class="font-family">
<div class="one">
这是微软雅黑
</div>
<div class="two">
这是宋体
</div>
</div>
☁️ 使用css修改字体：
<style>
.font-family .one {
font-family: 'Microsoft YaHei';
}
.font-family .two {
font-family: '宋体';
}
</style>
☁️ 设置字体高度大小：
<style>
.font-family .one {
font-size: 40px;
}
.font-family .two {
font-size: 20px;
}
</style>
☁️ 设置字体粗细：
<style>
.font-family .one {
font-weight: 900;
}
.font-family .two {
font-weight: 100;
}
</style>
☁️ 设置文字样式：
<style>
.font-family .one {
font-style: normal;
}
.font-family .two {
font-style: italic;
}
</style>
文本属性
文本颜色
☁️ RGB：计算机中针对 R, G, B 三个分量，分别使用一个字节表示(8个比特位，表示的范围是 0-255, 十六进制表示 为 00-FF)；数值越大，表示该分量的颜色就越浓，255, 255, 255 就表示白色；0, 0, 0 就表示黑色；
☁️ 设置颜色的三种表示方式：
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
文本对齐
☁️ 对于下面的文本：
<div class="text-align">
<div class="one">左对齐</div>
<div class="two">右对齐</div>
<div class="three">居中对齐</div>
</div>
☁️ 有三种对齐方式：
<style>
.text-align .one {
text-align: left;
}
.text-align .two {
text-align: right;
}
.text-align .three {
text-align: center;
}
</style>
文本装饰
☁️ 对于下面的文本：
<div class="text-decorate">
<div class="one">啥都没有</div>
<div class="two">下划线</div>
<div class="three">上划线</div>
<div class="four">删除线</div>
</div>
☁️ 有四种常用的装饰方式：
<style>
.text-decorate .one {
text-decoration: none;
}
.text-decorate .two {
text-decoration: underline;
}
.text-decorate .three {
text-decoration: overline;
}
.text-decorate .four {
text-decoration: line-through;
}
</style>
文本缩进
☁️ 对于下面的文本：
<div class="text-indent">
<div class="one">正常缩进</div>
<div class="two">反向缩进</div>
</div>
☁️ 有两种缩进方式：
<style>
.text-indent .one {
text-indent: 2em;
}
.text-indent .two {
text-indent: -2em;
}
</style>
☁️ 反向缩进给缩出屏幕外了；
行高
☁️ 行高 = 上边距 + 下边距 + 字体大小；
<div class="line-height">
<div>
上一行
</div>
<div class="one">
中间行
</div>
<div>
下一行
</div>
</div>
☁️ 设置行高：
<style>
.line-height .one {
line-height: 40px;
font-size: 16px;
}
</style>
☁️ 上下边距是相等的，此处字体大小是 16px，行高 40px，上下边距就分别是 12px；
☁️ 蓝色为使用鼠标选中效果；
背景属性
背景颜色
<div class="bgc">
<div class="one">红色背景</div>
<div class="two">绿色背景</div>
<div class="three">透明背景</div>
</div>
<style>
body {
background-color: #f3f3f3;
}
.bgc .one {
background-color: red;
}
.bgc .two {
background-color: #0f0;
}
.bgc .three {
/* 背景透明 */
background-color: transparent;
}
</style>
背景图片
<style>
.bgi .one {
/*文件路径可以是绝对路径也可以是相对路径*/
background-image: url(rose.jpg);
height: 300px;
}
</style>
<div class="bgi">
<div class="one">背景图片</div>
</div>
背景平铺
☁️ repeat：平铺
☁️ no-repeat：不平铺
☁️ repeat-x：水平平铺
☁️ repeat-y：垂直平铺
<div class="bgr">
<div class="one">不平铺</div>
<div class="two">水平平铺</div>
<div class="three">垂直平铺</div>
</div>
<style>
.bgr .one {
background-image: url(rose.jpg);
height: 300px;
background-repeat: no-repeat;
}
.bgr .two {
background-image: url(rose.jpg);
height: 300px;
background-repeat: repeat-x;
}
.bgr .three {
background-image: url(rose.jpg);
height: 300px;
background-repeat: repeat-y;
}
</style>
☁️ 背景位置：
background-position: x y;
☁️ 背景尺寸：
background-size: length|percentage|cover|contain;/*cover: 表示把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；contain: 表示把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域；*/
<style>
.bgs .one {
width: 500px;
height: 300px;
background-image: url(https://www.m1ok.com/upload/netpic2/2016-09-09-15-32-24595925590860.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
</style>
<div class="bgs">
<div class="one">背景尺寸</div>
</div>
☁️ 效果如下图：
圆角矩形
☁️ 基本用法： border-radius: length; #length是内切圆的半径，数值越大，弧线越强烈；
<div>蛤蛤</div>
<style>
div {
width: 200px;
height: 100px;
border: 2px solid green;
border-radius: 10px;
}
</style>
☁️ 效果如下图：
☁️ 生成圆形： 让 border-radius 的值为正方形宽度的一半即可；
<div>蛤蛤</div>
<style>
div {
width: 200px;
height: 200px;
border: 2px solid green;
border-radius: 100px;
}
</style>
☁️ 效果如下图：
☁️ 生成圆角矩形： 让 border-radius 的值为矩形高度的一半即可；
<div>蛤蛤</div>
<style>
div {
width: 200px;
height: 100px;
border: 2px solid green;
border-radius: 50px;
}
</style>
☁️ 效果如下图：
☁️ 展开写法：
border-radius:2em;
☁️ 等价于：
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
border-radius: 10px 20px 30px 40px;
☁️ 等价于：
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;
使用浏览器调试工具查看CSS属性
☁️ 有两种方式可以打开浏览器调试工具：1、直接按F12键；2、鼠标右键单击—>检查元素；
标签页各单词含义
☁️ elements查看标签结构
☁️ console查看控制台
☁️ source查看源码+断点调试
☁️ network查看前后端交互过程
☁️ application查看浏览器提供的一些扩展功能（本地存储等）
盒模型
☁️ 每一个HTML元素相当于是一个矩形的“盒子”；
☁️ 这个盒子由几个部分构成：border边框；content内容；padding内边距；margin外边距；
边框
☁️ 代码如下：
<div>test</div>
<style>
div {
width: 500px; /*这里用来设置盒子的宽度*/
height: 250px; /*这里用来设置盒子的高度*/
border-width: 10px; /*这里设置边框宽度*/
border-style: solid;/*这里设置边框风格：solid 实线边框 dashed 虚线边框 dotted 点线边框*/
border-color: green;/*这里设置边框颜色*/
}
</style>
☁️ border的三个参数支持简写，没有顺序要求，如上面的三个参数可以简写为：
border: 10px solid green;
内边距
☁️ padding设置内容和边框之间的距离；
☁️ 默认div里面的内容是顶着边框来放置的，用padding来控制这个距离；
<div>
test
</div>
<style>
div {
height: 200px;
width: 300px;
border-style: solid;
}
</style>
☁️ 效果如下图：
☁️ 设置内边距：
<div>
test
</div>
<style>
div {
height: 200px;
width: 300px;
border-style: solid;
padding-top: 50px;
padding-left: 100px;
}
</style>
☁️ 效果如下图：
外边距
☁️ 控制盒子和盒子之间的距离；
<div class="first">蛤蛤</div>
<div>呵呵</div>
<style>
div {
background-color: red;
width: 200px;
height: 200px;
}
.first {
margin: 10px 20px 30px 40px;
/*依次是上右下左*/
}
</style>
去除浏览器默认样式
☁️ 浏览器会给元素加上一些默认的样式，尤其是内外边距；不同浏览器的默认样式存在差别；为了保证代码在不同的浏览器上都能按照统一的样式显示，往往我们会去除浏览器默认样式；使用通配符选择器即可完成这件事情；
* {
marign: 0;
padding: 0;
}
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
