10CSS

CSS

学习目标

☁️ 掌握CSS基本语法规范和代码书写风格；

☁️ 掌握CSS选择器的各种用法；

☁️ 熟练使用CSS中的常用属性；

什么是CSS

☁️ CSS，即Cascading Style Sheets（层叠样式表）；

☁️ CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果；

基本语法规范

☁️ 选择器

⚡️ 选择器类似“指针”，“指向谁”就修改谁；

⚡️ 声明决定修改啥；

⚡️ 声明的属性是键值对；键值对（“key = value”），顾名思义，每一个键会对应一个值；

<style>
    /*p代表下面的段落*/
    p{
        /*设置字体颜色*/
        color :red;
        /*设置字体大小*/
        font-size:30px;
    }
</style>
<!--被指向的对象-->
<p>hello</p>
1
2
3
4
5
6
7
8
9
10
11

⚡️ CSS 要写到 style 标签中，style中的内容就是css代码；

⚡️ style标签可以放到页面任意位置，一般放到 head 标签内；

⚡️ CSS 使用 /* */ 作为注释；

引入方式

内部样式表

☁️ 在HTML代码中直接写入<style>标签；

行内样式表

☁️ 通过 style 属性, 来指定某个标签的样式；

<style>
    div {
        color: red;
    }
</style>
<div style="color:green">想要生活过的去, 头上总得带点绿</div>
1
2
3
4
5
6

⚡️ 缺点：不能写太复杂的样式，这种写法优先级较高，会覆盖其他的样式；

外部样式

☁️ 创建一个 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>

1
2
3
4
5
6
7
8
9
10

⚡️ 创建一个style.css

div{
    color:red;
}
1
2
3

⚡️ 使用link标签将style引入demo；

<link rel="stylesheet" href = "style.css">
1

代码风格

样式风格

☁️ 紧凑风格

p { color:red; font-size : 30px; }
1

☁️ 展开风格

p {
    color : red;
    fomt-size : 30px;
}
1
2
3
4

样式大小写

☁️ 虽然CSS不区分大小写，但是我们开发时统一使用小写字母；

空格规范

☁️ 冒号之后要加一个空格（不加空格代码也不会出错，只是一个规范）；

☁️ 选择器和 { 之间也要有一个空格；

选择器

选择器的功能

☁️ 选中页面中指定的标签元素；

选择器的种类

☁️ 基础选择器：标签选择器；类选择器；id选择器；通配符选择器；

☁️ 复合选择器：后代选择器；子选择器；并集选择器；伪类选择器；

基础选择器

标签选择器：

<style>
p {
    color: red;
}
div {
    color: green;
}
</style>
<p>咬人猫</p>
<p>咬人猫</p>
<p>咬人猫</p>
<div>阿叶君</div>
<div>阿叶君</div>
<div>阿叶君</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

类选择器：

<style>
    .blue {
        color: blue;
   }
</style>
<div class="blue">咬人猫</div>
<div>咬人猫</div>
1
2
3
4
5
6
7

⚡️ 类名用 . 开头；

⚡️ 下方的标签使用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

⚡️ style标签里面定义了三个类，下面div标签可以引用这三个类，引用一个两个三个都可以，但是相同的类可能会冲突，比如即引用red又引用green；

☁️ 效果如下图：

在这里插入图片描述

id选择器：

☁️ CSS中以#开头的是id选择器；

☁️ id选择器的值和HTML中某个元素的id值相同；

☁️ HTML的元素id不必带#；

☁️ id是唯一的，不能被多个标签使用；

<style>
    #ha {
        color: red;
   }
</style>
<div id="ha">蛤蛤蛤</div>
1
2
3
4
5
6

通配符选择器：

☁️ 使用*定义，表示选取所有标签；

*{
    color : red;
}
1
2
3

总结：

	作用	特点
标签选择器	能选出所有相同标签	不能差异化选择
类选择器	能选出一个或多个标签	根据需求选择，最灵活，最常用
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>
1
2
3
4
5
6
7
8
9
10

☁️ 如果想把有序列表的字体颜色改了，可以使用：

<style>
	ol li {
    color: red;
	}
</style>
1
2
3
4
5

☁️ 这样就可以把有序列表中的三个元素改为红色，如果只想要修改其中一个呢？

☁️ 可以在想要修改的那个标签中加入一个标签：

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
<ol>
    <li>ddd</li>
    <li>eee</li>
    <li><p>fff</p></li>
</ol>
1
2
3
4
5
6
7
8
9
10

☁️ 在使用css单独修改这一个元素：

ol li p {
    color : yellow;
}
1
2
3

子选择器

☁️ 和后代选择器类似，但是只能选择子标签不能选择孙子标签；

☁️ 例如要修改下面的字体“链接1”：

<div class="two">
    <a href="#">链接1</a>
    <p><a href="#">链接2</a></p>
</div>
1
2
3
4

☁️ 若适用后代选择器：

.two a {
    color: red;
}
1
2
3

在这里插入图片描述

☁️ 若使用子选择器：

.two>a {
    color: red;
}
1
2
3

在这里插入图片描述

并集选择器

☁️ 并集选择器建议竖着写. 每个选择器占一行 (最后一个选择器不能加逗号）；

☁️ 通过逗号分割等多个元素，表示同时选中元素 1 和元素 2，任何基础选择器都可以使用并集选择器；

<div>苹果</div>
<h3>香蕉</h3>
<ul>
    <li>鸭梨</li>
    <li>橙子</li>
</ul>
1
2
3
4
5
6

☁️ 把苹果和香蕉改成红色：

div, h3{
    color: red;
}
1
2
3

☁️ 把鸭梨和橙子也改为红色：

div,
h3,
ul>li{
    color: red;
}
1
2
3
4
5

伪类选择器

☁️ 伪类是基于元素的特征而不是他们的id、class、属性或者内容。一般来说，元素的特征是不可以从DOM树上推断得到的，而且其是动态的，当用户和DOM进行交互的时候，元素可以获得或者失去一个伪类；

链接伪类选择器：

<a href="https://blog.csdn.net/m0_60266328?spm=1000.2115.3001.5343"> hello </a>
1

在这里插入图片描述

☁️ 我们可以看到“hello”这个链接是黑的，如果想要改变它的颜色并去掉下划线呢？

a:link {
    color: pink;
    /* 去掉 a 标签的下划线 */
    text-decoration: none;
}
1
2
3
4
5

在这里插入图片描述

☁️ 再通过以下代码，就可以修改成我们想要的效果了：

/*点击过一次之后就会变成绿色*/
a:visited {
    color: green;
}
/*当鼠标移动到链接之上时会变成红色*/
a:hover {
    color: red;
}
/*链接点击时为黑色*/
a:active {
    color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12

☁️ 注意：这四个选择器的顺序不可调换；

force伪类选择器

☁️ 获取input表单元素：

<div class="three">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
</div>
1
2
3
4
5
6

☁️ 再输入：

.three>input:focus {
    color: red;
}
1
2
3

☁️ 此时在文本框中输入的文字就会变成红色（有时候部分浏览器不兼容，需要换一下浏览器试试）；

常用元素属性

字体属性

设置字体

<div class="font-family">
    <div class="one">
       这是微软雅黑
    </div>
    <div class="two">
       这是宋体
    </div>
</div>
1
2
3
4
5
6
7
8

在这里插入图片描述

☁️ 使用css修改字体：

<style>
    .font-family .one {
        font-family: 'Microsoft YaHei';
   }
    .font-family .two {
        font-family: '宋体';
   }
</style>
1
2
3
4
5
6
7
8

在这里插入图片描述

☁️ 设置字体高度大小：

<style>
    .font-family .one {
        font-size: 40px;
   }
    .font-family .two {
        font-size: 20px;
   }
</style>
1
2
3
4
5
6
7
8

在这里插入图片描述

☁️ 设置字体粗细：

<style>
    .font-family .one {
        font-weight: 900;
   }
    .font-family .two {
        font-weight: 100;
   }
</style>
1
2
3
4
5
6
7
8

在这里插入图片描述

☁️ 设置文字样式：

<style>
    .font-family .one {
        font-style: normal;
   }
    .font-family .two {
        font-style: italic;
   }
</style>

1
2
3
4
5
6
7
8
9

在这里插入图片描述

文本属性

文本颜色

☁️ RGB：计算机中针对 R, G, B 三个分量，分别使用一个字节表示(8个比特位，表示的范围是 0-255, 十六进制表示为 00-FF)；数值越大，表示该分量的颜色就越浓，255, 255, 255 就表示白色；0, 0, 0 就表示黑色；

☁️ 设置颜色的三种表示方式：

color: red;
color: #ff0000;
color: rgb(255, 0, 0);
1
2
3

文本对齐

☁️ 对于下面的文本：

<div class="text-align">
    <div class="one">左对齐</div>
    <div class="two">右对齐</div>
    <div class="three">居中对齐</div>
</div>
1
2
3
4
5

☁️ 有三种对齐方式：

<style>
    .text-align .one {
        text-align: left;
   }
    .text-align .two {
        text-align: right;
   }
    .text-align .three {
        text-align: center;
   }
</style>
1
2
3
4
5
6
7
8
9
10
11

文本装饰

☁️ 对于下面的文本：

<div class="text-decorate">
    <div class="one">啥都没有</div>
    <div class="two">下划线</div>
    <div class="three">上划线</div>
    <div class="four">删除线</div>
</div>
1
2
3
4
5
6

在这里插入图片描述

☁️ 有四种常用的装饰方式：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这里插入图片描述

文本缩进

☁️ 对于下面的文本：

<div class="text-indent">
    <div class="one">正常缩进</div>
    <div class="two">反向缩进</div>
</div>
1
2
3
4

在这里插入图片描述

☁️ 有两种缩进方式：

<style>
    .text-indent .one {
        text-indent: 2em;
   }
    .text-indent .two {
        text-indent: -2em;
   }
</style>
1
2
3
4
5
6
7
8

在这里插入图片描述

☁️ 反向缩进给缩出屏幕外了；

行高

☁️ 行高 = 上边距 + 下边距 + 字体大小；

<div class="line-height">
    <div>
       上一行
    </div>
    <div class="one">
       中间行
    </div>
    <div>
       下一行
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述

☁️ 设置行高：

<style>
    .line-height .one {
        line-height: 40px;
        font-size: 16px;
   }
</style>
1
2
3
4
5
6

☁️ 上下边距是相等的，此处字体大小是 16px，行高 40px，上下边距就分别是 12px；

在这里插入图片描述

☁️ 蓝色为使用鼠标选中效果；

背景属性

背景颜色

<div class="bgc">
    <div class="one">红色背景</div>
    <div class="two">绿色背景</div>
    <div class="three">透明背景</div>
</div>
1
2
3
4
5

在这里插入图片描述

<style>
    body {
        background-color: #f3f3f3;
   }
    .bgc .one {
        background-color: red;
   }
    .bgc .two {
        background-color: #0f0;
   }
    .bgc .three {
        /* 背景透明 */
        background-color: transparent;
   }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这里插入图片描述

背景图片

<style>
    .bgi .one {
        /*文件路径可以是绝对路径也可以是相对路径*/
        background-image: url(rose.jpg);
        height: 300px;
   }
</style>
<div class="bgi">
    <div class="one">背景图片</div>
</div>
1
2
3
4
5
6
7
8
9
10

背景平铺

☁️ repeat：平铺

☁️ no-repeat：不平铺

☁️ repeat-x：水平平铺

☁️ repeat-y：垂直平铺

<div class="bgr">
    <div class="one">不平铺</div>
    <div class="two">水平平铺</div>
    <div class="three">垂直平铺</div>
</div>
1
2
3
4
5

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

☁️ 背景位置：

background-position: x y;
1

☁️ 背景尺寸：

background-size: length|percentage|cover|contain;/*cover: 表示把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；contain: 表示把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域；*/
1

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13

☁️ 效果如下图：

在这里插入图片描述

圆角矩形

☁️ 基本用法： border-radius: length; #length是内切圆的半径，数值越大，弧线越强烈；

<div>蛤蛤</div>
<style>
	div {
    width: 200px;
    height: 100px;
    border: 2px solid green;
    border-radius: 10px;
}
</style>
1
2
3
4
5
6
7
8
9

☁️ 效果如下图：

在这里插入图片描述

☁️ 生成圆形：让 border-radius 的值为正方形宽度的一半即可；

<div>蛤蛤</div>
<style>
	div {
    width: 200px;
    height: 200px;
    border: 2px solid green;
    border-radius: 100px;
}
</style>
1
2
3
4
5
6
7
8
9

☁️ 效果如下图：

在这里插入图片描述

☁️ 生成圆角矩形：让 border-radius 的值为矩形高度的一半即可；

<div>蛤蛤</div>
<style>
	div {
    width: 200px;
    height: 100px;
    border: 2px solid green;
    border-radius: 50px;
}
</style>
1
2
3
4
5
6
7
8
9

☁️ 效果如下图：

在这里插入图片描述

☁️ 展开写法：

border-radius:2em;
1

☁️ 等价于：

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
1
2
3
4

border-radius: 10px 20px 30px 40px;
1

☁️ 等价于：

border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;
1
2
3
4

使用浏览器调试工具查看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>
1
2
3
4
5
6
7
8
9
10

☁️ border的三个参数支持简写，没有顺序要求，如上面的三个参数可以简写为：

border: 10px solid green;
1

内边距

☁️ padding设置内容和边框之间的距离；

☁️ 默认div里面的内容是顶着边框来放置的，用padding来控制这个距离；

<div>
   test
</div>
<style>
	div {
    height: 200px;
    width: 300px;
    border-style: solid;
}
</style>
1
2
3
4
5
6
7
8
9
10

☁️ 效果如下图：

在这里插入图片描述

☁️ 设置内边距：

<div>
   test
</div>
<style>
	div {
    height: 200px;
    width: 300px;
    border-style: solid;
    padding-top: 50px;
    padding-left: 100px; 
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12

☁️ 效果如下图：

在这里插入图片描述

外边距

☁️ 控制盒子和盒子之间的距离；

<div class="first">蛤蛤</div>
<div>呵呵</div>
<style>
	div {
    background-color: red;
    width: 200px;
    height: 200px;
    }
    .first {
        margin: 10px 20px 30px 40px;
        /*依次是上右下左*/
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13

去除浏览器默认样式

☁️ 浏览器会给元素加上一些默认的样式，尤其是内外边距；不同浏览器的默认样式存在差别；为了保证代码在不同的浏览器上都能按照统一的样式显示，往往我们会去除浏览器默认样式；使用通配符选择器即可完成这件事情；

* {
    marign: 0;
    padding: 0;
}
1
2
3
4

相关阅读:
softmax函数计算时减去一个最大值的原因
 Android11 有线网和wifi优先级设置
 数据结构与算法--散列表
 C--六、字符串之strcat
【21天算法学习】折半插入排序
 图解｜勒索软件防范指南
 ESP8266-Arduino编程实例-MCP9808数字温度传感器驱动
 Nacos——注册中心源码详解
 pytorch中正向传播和反向传播的钩子Hook
MySQL 版本8.0.26在centos系统中安装的记录
原文地址：https://blog.csdn.net/m0_60266328/article/details/125622890