H5 Mosh教程笔记 - CSS简介
2022-08-17 本文已影响0人
Abububiu
H5 Mosh教程笔记
先列出教程中会用到的网站
网站H5规范验证网站
CSS格式规范验证网站
转义字符查询
免费图片下载网站
免费图片视频下载网站
浏览器HTML标签，CSS属性支持情况查询网站
CSS一致化工具安装
渐变色代码生成网站
CSS形状代码生成网站
字体网站fontsquirrel
字体网站fonts
字体网站myfonts
教程开始
· CSS
CSS是描述网站样式的文件，HTML专注页面元素，CSS专注元素以什么样式展示，分工明确。
CSS样式可以嵌入HTML文件，嵌入元素中，或者单独成为一个文件，供HTML页面引用，这里当然推荐使用CSS单独成为文件供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>
<!-- CSS样式文件引入方式 -->
<link rel="stylesheet" href="../node_modules/normalize.css/normalize.css">
<link rel="stylesheet" href="../css/style.css">
<!-- HTML内嵌CSS -->
<style>
.yellowgreen {
color: yellowgreen;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, optio!</p>
<p class="yellowgreen">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, placeat.
</p>
<!-- 元素内嵌CSS -->
<p style="color: gray;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, temporibus!
</p>
</body>
</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>
<style>
/* 类型选择器，通过元素类型名字选取元素，这里的类型就是p标签*/
/* 类型选择器会选中所有同样类型的元素，这里所有的p标签文字内容都会是orange(没有优先级更高的选择器前提下) */
p {
color: orange;
}
/* 类选择器，每个元素可以有一个或多个类，也就是元素里的class */
/* 一个类也可以供多个元素使用，这样可以统一多个不同元素的样式 */
.describe {
color: yellowgreen;
}
/* ID选择器，每个元素可以且仅可以指定1个ID，1个ID能且仅能与1个元素绑定 */
/* 精确选中选择器，不常用，或者说我用的少，更多的时候需要控制多个元素的样式 */
#graytext {
color: gray;
}
/* 属性选择器，更不常用的一种方式，通过标签及其属性的值来精确选择元素 */
/* 以下是选择href=https://google.com的a标签，属性必须精确匹配 */
/* 也可以有模式匹配，如以什么开头的(href^='xxxx')，或什么结尾的(href$='xxxxx')， */
/* 或匹配单词的(href*='xxx') */
a[href="https://google.com"] {
color: darkorchid;
}
/* 从运行结果看，可能你也发现了，选择器也是有优先级的 */
/* 类选择器和ID选择器就覆盖了类型选择器的样式 */
/* 简单来说，作用范围越小的选择器，优先级越高 */
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, molestiae!
</p>
<p class="describe">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, unde!
</p>
<p id="graytext">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, saepe.
</p>
<a href="https://google.com" target="_blank">Google</a>
</body>
</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>
<!-- 关系选择器是依据元素的位置或层级来选择元素的 -->
<style>
/* 选择ID为products的元素里，所有后代中(也可以理解成嵌套在section里)的p元素 */
/* 这就是依据元素的层级来选择，section标签里的2个p标签会被选中 */
#products p {
color: yellowgreen;
}
/* 选择ID为products的元素里，第一层嵌套的p标签 */
/* 也就是section标签里的直接后代元素中选择p标签 */
/* 并设置文本颜色为orange */
#products > p {
color: orange;
}
/* 选择ID为products的标签(section标签)后面紧跟着的第一个p标签 */
/* 并设置文本颜色为darkorchid */
#products + p {
color: darkorchid;
}
/* 选择与ID为products标签同级的所有p标签 */
/* 并设置文本颜色为darkgray */
#products ~ p {
color: darkgrey;
}
/* 关系选择器可以节省一些代码，不用声明很多类和ID */
/* 但这种代码很脆弱，元素之间的关系一变，样式就失效了 */
</style>
</head>
<body>
<section id="products">
<p>
1 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi, soluta.
</p>
<p>
2 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi, soluta.
</p>
<article>
<p>
3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, aut?
</p>
</article>
</section>
<p>
4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, minima!
</p>
<p>
5 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum, quam.
</p>
</body>
</html>
· 伪类选择器
伪类选择器是浏览器内置的选择器，并不是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>
<style>
/* 在article的子元素中，找到p标签第一次出现的位置，并将文字颜色变成orange */
article p:first-of-type {
color: orange;
}
/* 在article的子元素中，找到p标签最后一次出现的位置，并将文字颜色变成darkorchid */
article p:last-of-type {
color:darkorchid
}
/* 在ul里的li，找到奇数(odd)位置的li，并设置文本颜色为yellowgreen */
/* nth-child的参数可以是odd，event， 3n(这里不一定是3n，也可以是5n，6n等，意思是间隔多少元素算一次有效选中)*/
ul li:nth-child(odd){
color: yellowgreen;
}
/* a标签在点击过以后的颜色 */
a:visited {
color: dodgerblue;
}
/* a标签在未点击过时的颜色 */
a:link {
color: darkorchid;
}
/* a标签鼠标悬停颜色 */
a:hover {
color: orange;
}
/* 使用tab键让a标签获取焦点时的颜色 */
a:focus {
color: orange;
}
</style>
</head>
<body>
<article>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, asperiores.</p>
<p>Lorem ipsum dolor sit amet.</p>
</article>
<a href="https://google.com">Google</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</body>
</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>
<style>
/* 使用p标签的伪元素选择器，选择p标签内容的首字母，设置文字样式，以简化代码，替代span标签 */
p::first-letter {
font-size: 140%;
font-weight: bold;
}
/* 改变p标签内容的第一行的字体样式 */
p::first-line {
font-weight: bold;
}
/* 改变p标签内容被选中后的背景色 */
p::selection {
background-color: dodgerblue;
}
/* 在p标签的内容前增加content的内容，并可以改变元素类型为块级元素 */
p::before {
content: '...';
display: block;
}
/* 在p标签内容后增加content的内容，并可以改变元素类型为块级元素 */
p::after {
content: '...';
display: block;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit delectus vitae saepe perspiciatis nemo sint dolores possimus esse tempora facilis.</p>
</body>
</html>
· 选择器优先级
选择器的优先级是 ID选择器 > 类、属性选择器 > 元素选择器
在vscode中，会显示选择器的权重，从左到右分别是ID选择器，类、属性选择器，元素选择器，分别代表百位，十位，个位，数值越大，权重越高，高权重的会覆盖低权重的
image.png
如果需要强制使被覆盖的选择器生效，有两种方式
- 使用!important关键字(尽量少使用或不使用，难维护)
如下代码中第一个p标签的样式会生效：
p {
color: red !important;
}
p {
color: green;
}
- 使用选择器组合的方式，提高权重，给需要提高权重的选择器增加一个ID选择器(尽量少组合，一个标签的选择器组合太多，也不好维护)
p #paragraph{
color: red;
}
p {
color: green;
}
· 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>
<style>
p {
color: orange;
border: 1px solid black;
}
strong {
/* strong默认会继承p的color，也可以指定不继承 */
/* 使用color的初始值，而不是继承来的值 */
color: initial;
/* border默认不继承，但也可以强制使用继承的值 */
border: inherit;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor, sit amet <strong>consectetur</strong> adipisicing elit. Laudantium, vitae!</p>
</body>
</html>
· 颜色
颜色的表示在CSS中有HEX，RGB，RGBA，HSL，HSLA
<!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>
<style>
div {
width: 200px;
height: 200px;
/* HEX 十六进制表示法 */
background-color: #4287f5;
/* rgb(红，绿，蓝)表示法 */
background-color: rgb(66, 135, 245);
/* 带透明度的rgb表示法，rgba */
background-color: rgba(66, 135, 245, 0.8);
/* hsl(标准色盘偏移度，饱和度，亮度)表示法 */
background-color: hsl(217, 90, 61);
/* 带透明度的hsl表示法 */
background-color: hsla(217, 90, 61, 0.5);
}
</style>
</head>
<body>
<div>
</div>
</body>
</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>
<style>
div {
width: 200px;
height: 200px;
/* 线性渐变的配置linear-gradient(渐变方向，颜色1，颜色2。。。颜色n) */
background-image: linear-gradient(to right, rgb(78, 78, 188), yellow);
background-image: linear-gradient(45deg, rgb(78, 78, 188), yellow, rgb(252, 43, 43));
/* 径向渐变配置(渐变方向，颜色1，颜色2，颜色3) */
background: radial-gradient(circle, orange, yellow, green);
background: radial-gradient(circle at top left, orange, yellow, green);
}
</style>
</head>
<body>
<div>
</div>
</body>
</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>
<style>
div {
width: 200px;
height: 200px;
/* border线的大小，border线的样式，border线的颜色 */
border: 1px solid black;
border: 1px dotted royalblue;
border: 1px dashed greenyellow;
border-top: 1px solid darkorchid;
/* 上，右，下，左 */
border-width: 1, 1, 1, 1;
/* 圆角属性，设置为宽度的一半是正圆，设置100%也是正圆，推荐使用100%，不易出错 */
border-radius: 100%;
}
</style>
</head>
<body>
<div>
</div>
</body>
</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>
<style>
div {
width: 200px;
height: 200px;
background: dodgerblue;
/* 参数为正数，则阴影向右偏移，参数为负数，则阴影向左*/
box-shadow: 10px;
/* 参数为正数，则阴影向右偏移，参数为负数，则阴影向左*/
/* 在x方向和y方向上同时移动阴影 */
box-shadow: 10px 10px;
/* 参数为正数，则阴影向右偏移，参数为负数，则阴影向左*/
/* 阴影颜色为灰色 */
box-shadow: 10px 10px gray;
/* 参数为正数，则阴影向右偏移，参数为负数，则阴影向左*/
/* x轴方向偏移，y轴方向偏移，阴影模糊程度，阴影颜色，用rgba作为阴影颜色更好，有透明度，更容易透出底色，显得更和谐一些 */
box-shadow: 10px 10px 10px gray;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
