Web前端学习

那我懂你的意思啦

已于 2022-09-14 20:16:29 修改

阅读量221

点赞数

文章标签：前端

于 2022-07-20 19:05:19 首次发布

本文链接：https://blog.csdn.net/m0_61894608/article/details/125859262

版权

一、什么是HTML、CSS？

是做网站的编程语言

浏览器把代码解析后的样子就是我们看到的网站，如何看到网站的原始代码呢？通过鼠标右键选择查看网页源代码

一个网站是由n多个网页组成的每个网页.html文件

HTML:结构

CSS:样式

JavaScript:行为

二、VSCode编译器

ctrl+s 保存

ctrl + a:全选
ctrl + z 、ctrl + y ：撤销、前进
shift + end：从头选中一行
shift + home：从尾部选中一行
shift + alt + ↓：快速复制一行
alt + ↑或↓：快速移动一行
tab：向后缩进
tab + shift：向前缩进
alt + 鼠标左键：多光标
ctrl + d：选择相同元素的下一个

三、HTML基本结构和属性

HTML为超文本标记语言

超文本：文本内容+非文本内容（图片、视频、音频等等）

标记（签）：HTML语言中最基本的单位语法为：<单词>
标签的写法有两种：1.单标签：<header> 2.多标签：<header></header>
创建标签的快捷键：tab+单词
标签是可以上下排列，也可以嵌套

标签的属性：修饰标签，设置当前标签的一些功能 <标签属性="值" 属性2="值2">

四、HTML初始代码

每个.html文件都有的代码叫做初始代码
！+ tab键：快速创建HTML的初始代码

<!DOCTYPE html>     文档声明：告诉浏览器这是html文件
<html lang="en">    html文件的最外层标签：包裹着所有html标签代码    lang="en"表示是一个英文网站    lang="zh-CN"表示一个中文网站
<head>
    <meta charset="UTF-8">   元信息：是编写网页中的一些赋值信息   charset="UTF-8"国际编码，让网页不出现乱码情况

    <title>Document</title>  设置网页的标题
</head>
<body>
    显示网页内容的区域
</body>
</html>

五、HTML注释

浏览器中看不到，只能再代码中看到注释

快捷添加注释与删除注释：1.ctrl+/ 2.shift+alt+a

六、标题和段落

h标签：标题

双标签：<h1></h1>...<h6></h6>

在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签

p标签：段落

双标签：<p></p>

六、文本修饰标签

强调：<strong></strong> 加粗

<em></em> 斜体

下标：<sub></sub>

上标：<sup></sup>(平方)

删除文本：<del></del>

插入文本：<ins></ins> 一般情况下，删除文本都是和插入文本配合使用

<!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>
    <p>
        <strong>这是一段需要强调的文本</strong>
        <em>这是一段需要强调的文本</em>
    </p>
    <p>
       a <sup>2</sup>+b <sup>2</sup>=c <sup>2</sup>  H <sub>2</sub>O
    </p>
    <p>
        促销：原价<del>300</del>,现价<ins>100</ins>。
    </p>
</body>
</html>

效果：

七、图片标签与图片属性

img->单标签

src:引入图片地址

alt：当图片出现问题的时候，可以显示一段友好的提示文字

title:提示信息（鼠标移到图片上面就会出现）

width、height:图片的大小(像素)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>第一个段落</p>
    <img src="http://5b0988e595225.cdn.sohucs.com/images/20170819/be09dc82de8f4d5a99e8bc0648a06515.jpeg" alt="徐州"title="这是一张图片"width="300"height="300">
    <p>第二个段落</p>
</body>
</html>

八、引入文件的地址路径

相对路径： .表示当前路径 ..表示上一级路径

绝对路径

九、跳转链接

a-> 双标签 <a></a>

href属性：链接的地址

target属性:可以改变链接打开的方式，默认情况下：在当前页面打开_self 新窗口打开_blank

base->单标签：改变链接的默认行为（一次改变多个链接）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <base target="_blank">
</head>
<body>
    <!-- <a href="http://www.baidu.com">访问百度</a>
    <a href="http://www.qfedu.com">
        <img src="./img/tree.jfif" alt="">
    </a> -->
    <!-- <a href="http://www.baidu.com"target="_blank">访问百度</a> -->
</body>
</html>

十、跳转锚点（点链接跳转当前页对应的位置）

实现一：#号 id属性

实现二：#号 name属性（name属性加给的是a标签）

<!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>
    <a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#javascript">JavaScript</a>

    <!-- <a name="html"></a>
    <h2>HTML超文本标记语言</h2>
 -->
    <h2 id="html">HTML超文本标记语言</h2>
    <p>模拟的段落</p>
    <h2 id="css">CSS层叠样式表</h2>
    <p>模拟的段落</p>
    <h2 id="javascript">JavaScript脚本</h2>
    <p>模拟的段落</p>
</body>
</html>

十一、特殊符号

1.&+字符

2.解决冲突：左右尖括号、添加多个空格的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        &lt;html&gt;
    </p>
    <p>
        hello&nbsp;&nbsp;&nbsp;&nbsp;world
    </p>
</body>
</html>

十二、列表

1.无序列表

<ul>、<li>:列表的最外层容器、列表项（ul和li必须是组合出现的，他们之间是不能有其他标签的）

type属性：改变前面标记的样式（一般都是用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=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul type="circle">
        <li>第一项</li>
        <li>第二项</li>
    </ul> 
</body>
</html>

2.有序列表

<ol>、<li>:列表的最外层容器、列表项

type属性：改变前面标记的样式（一般都是用CSS去控制）

一般用的比较少，可以用无序列表来实现

3.定义列表

<dl>:定义列表

<dt>:定义专业术语或名词

<dd>:对名词进行解释和描述

列表项需要添加标题和对标题进行描述的内容

4.嵌套列表

列表之间可以相互嵌套，形成多层级的列表

<ul>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
</ul>

十三、表格

1.表格标签

<table>:表格的最外层容器

<tr>:定义表格行

<th>:定义表头

<td>:定义表格单元

<caption>:定义表格标题

语义化标签：tHead、tBody、tFood

注：在一个table中，tBody是额可以出现多次的，但是tHead、tFoot只能出现一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <caption>天气预报</caption>
       <tHead>
        <tr>
            <th>日期</th>
            <th>天气情况</th>
        </tr>
    </tHead>
    <tBody>
        <tr>
            <td>2022.7.20</td>
            <td>晴</td>
        </tr>
         <tr>
            <td>2022.7.21</td>
            <td>阴</td>
        </tr>
        </tBody>
        <tFoot></tFoot>
    </table>
</body>
</html>

2.表格属性

border:表格边框

cellpadding:单元格内的空间

cellspacing:单元格之间的空间

rowspan:合并行

colspan:合并列

align:左右对齐方式(left center right)

valign:上下对齐方式(top middle bottom)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" cellpadding="30" cellspacing="30">
        <caption>天气预报</caption>
       <tHead>
        <tr align="right" valign="top">
            <th colspan="2">日期</th>
            <th>天气情况</th>
        </tr>
    </tHead>
    <tBody>
        <tr>
            <td rowspan="2">2022.7.20</td>
            <td>白天</td>
            <td>晴</td>
        </tr>
        <tr>
            <td>夜晚</td>
            <td>晴</td>
        </tr>
         <tr>
            <td rowspan="2">2022.7.21</td>
            <td>白天</td>
            <td>阴</td>
        </tr>
        <tr>
            <td>夜晚</td>
            <td>阴</td>
        </tr>
        </tBody>
        <tFoot></tFoot>
    </table>
</body>
</html>

十四、表单

1.表单input标签

<form>:表单的最外层容器

<input>:标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等（单标签）

<!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>
    <form action="http://www.baidu.com"><!-- 提交数据到百度上去 -->
        <h2>输入框:</h2>
        <input type="text">
        <h2>密码框:</h2>
        <input type="password">
        <h2>复选框</h2>
        <input type="checkbox">苹果
        <input type="checkbox">香蕉
        <input type="checkbox">葡萄
        <h2>单选框</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交按钮和重置按钮</h2>
        <input type="submit">
        <input type="reset">
    </form>
</body>
</html>

2.表单相关标签

<textarea>:多行文本框

<select><option>:下拉菜单

<label>:辅助表单

<!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>
    <form action="http://www.baidu.com"><!-- 提交数据到百度上去 -->
       <!--  <h2>输入框:</h2>
        <input type="text">
        <h2>密码框:</h2>
        <input type="password">
        <h2>复选框</h2>
        <input type="checkbox">苹果
        <input type="checkbox">香蕉
        <input type="checkbox">葡萄
        <h2>单选框</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交按钮和重置按钮</h2>
        <input type="submit">
        <input type="reset"> -->
        <h2>多行文本框</h2>
        <textarea cols="30" rows="10"></textarea>
        <h2>下拉菜单</h2>
        <select>
            <option selected disabled>请选择</option>
            <option>北京</option>
            <option >上海</option>
            <option>杭州</option>
        </select>
        <select size="3"><!-- 显示几项 -->
            <option>北京</option>
            <option >上海</option>
            <option>杭州</option>
        </select>
        <select multiple><!-- 多选 -->
            <option>北京</option>
            <option >上海</option>
            <option>杭州</option>
        </select>
        <input type="file" multiple>

        <input type="radio" name="gender" id="man"><label for="man">男</label>
        <input type="radio" name="gender" id="woman"><label for="woman">女</label>
    </form>
</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>
</head>
<body>
    <form action="">
        <table border="1" cellpadding="30">
            <tbody>
                <tr align="center">
                  <td rowspan="4">总体信息</td>
                  <td colspan="2">用户注册</td>
                </tr>
                <tr align="right">
                    <td>用户名：</td>
                    <td><input type="pssword" placeholder="请输入用户名"></td>
                  </tr>
                  <tr align="right">
                    <td>密码：</td>
                    <td><input type="password" placeholder="请输入密码"></td>
                  </tr>
                  <tr align="center">
                    <td colspan="2">
                    <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset">
                    </td>
                  </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

十六、<div>与<span>

div(块):做一个区域划分的块

span(内联):对文字经行修饰的内联

十七、CSS基础语法

格式：选择器{属性1:值1；属性2：值2}

单位：px（像素）、%（百分比）->外容器 600px 当前容器50% 300px

基本样式：width、height、background-color

css注释：/*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>
        div{width: 100px;height: 100px;background-color: red ;}
        /* span{background-color: blue;} */
    </style>
</head>
<body>
    <div>这是一个块</div>
    <div>又是一个块</div>
    <span>这是一个内联</span>
    
</body>
</html>

十八、CSS样式的引入方式

1.内联（行内、行间）样式

在html标签上添加style属性来实现的

2.内部样式

在<style>标签内添加的样式

注：内部样式的优点，可以复用代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{width:100px;height:100px;background-color:red}
    </style>
</head>
<body>
    <!-- <div> style="width:100px;height:100px;background-color:red">这是一个块</div> -->
    <div>这是一个块</div>
    <div>另外一个块</div>
</body>
</html>

3、外部样式

引入一个单独的css文件，name.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">
    <link rel="stylesheet" href="./common.css">
    <title>Document</title>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

css

div{width: 100px;height:100px ;background-color: red}

十九、CSS中的颜色表示法

1.单词表示法：red blue

2.十六进制表示法：#000000黑色 #ffffff白色 #ff0000红色

3.rgb三原色表示法:rgb(0,0,0); 取值范围0~255

二十、CSS背景样式

background-color:背景色

background-image{url(背景地址)}:背景图默认：会水平垂直都铺满背景图

background-repeat:背景图片的平铺位置 repeat-x:x轴平铺 repeat-y:y轴平铺 repeat:x，y都进行平铺，默认值 no-repeat 都不平铺

background-position:背景图片的位置 xy轴正负（数字，位置单词 left,百分比）

background-attachment:背景图随滚动条的移动方式 scroll:默认值(和正常拉滚动条往下走一样)（背景位置是按照当前元素进行偏移的） fixed:(背景位置是按照浏览器进行偏移的)

<!DOCTYPE html>
<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>
        body{height:2000px}/* 会出现滚动条 */
        div{width:300px ;height: 300px;background-color:red ;background-image: url(.img/tree.jfif);background-repeat: repeat-x;background-position: 100px 50px;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

二十一、CSS边框样式

border-style:边框的样式(solid:实线 dashed:虚线 dotted:点线 )

border-width:边框的大小

border-color:边框的颜色

边框也可以针对某一条边进行单独设置：border-left-style 中间是方向：left、right、top、bottom

<!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: 300px;height: 300px;border-style: solid;border-color: red;border-width: 1px;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

二十二、边框实现三角形

颜色：透明颜色 transparent

<!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>
        body{background-color: green;}
        div{width: 0px;height: 0px;
        border-top-color: black;
        border-top-style: solid;
        border-top-width: 30px;
        border-right-color: red;
        border-right-style: solid;
        border-right-width: 30px;
        border-bottom-color: yellow;
        border-bottom-style: solid;
        border-bottom-width: 30px;
        border-left-color: blue;
        border-left-style: solid;
        border-left-width: 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

二十三、CSS文字样式

font-family:字体类型

英文、中文

衬线体、非衬线体

注意点：1.多个字体类型的设置目的（这个字体类型无法识别，就用下一个） 2.引号的添加的目的（带空格的英文）

<!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{font-family:华文彩云，'Times New Roman',SimSun,微软雅黑 ;}
    </style>
</head>
<body>
    <div>这是一段文字</div>
    <p>这是一段文字</p>
    <div>this is a text</div>
    <p>this is a text</p>
</body>
</html>

font-size:字体大小

默认：16px

写法:18px (字体大小一般为偶数)、单词（small、large）

font-weight:字体粗细

写法：单词（normal、bold（加粗））| number(100 200 ....900,100到500都是正常的，600到900都是加粗的)

font-style:字体样式

模式：正常（normal）斜体（italic）

color:字体颜色

二十四、CSS段落样式

text-decoration:文本修饰

下划线：underline

删除线：line-through

上划线:underline

不添加任何装饰:none

注：添加多个文本修饰：line-through underline underline

text-transform:文本大小写（针对英文段落）

小写：lowercase

大写：uppercase

只针对首字母大写：capitalize

text-indent：文本缩进

首行缩进

em单位：相对单位，1em永远都是跟字体大小相同

text-align:文本对齐方式

对齐方式：left right center justify(两端点对齐)

line-height:定义行高

行高：一行文字的高度，上边距和下边距的等价关系

默认行高不是固定值，而是根据当前字体的大小不断变化

取值：1.number(px) 2.scale(比例值，跟文字大小比)

letter-spacing:字间距

word-spacing:词间距（针对英语）

英文和数字不自动折行问题：

1.word-break:break-all(非常强烈的折行)

2.word-wrap:break-word(不是那么强烈的折行，会产生一些空白区域

<!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{width: 300px;text-decoration: underline;} */
/* p{text-transform: lowercase;} */
/* p{text-indent: 200px;} */
/* p{text-align: left;} */
/* p{line-height:40px ;} */
div{width: 300px;height: 300px;border: 1px solid red;word-break: break-all;}
    </style>
</head>
<body>
    <p>8月22日，记者从知情人士获悉，格力电器已于近日停止对河北经销商供货，此消息已得到多位格力经销商确认。</p>
    <!-- <p>
        faHs  jlfFASDFf jafhASFASfha jafoAGlyv
    </p> -->
    <div>
        asdfsadfsadfsadfsadfqwfschsakhfla    asdf fas fsa 
         asdfsadfsadf wfl oho
    </div>
</body>
</html>

二十五、CSS复合样式

复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border:有的需要关系顺序，例如font(最少要有两个值 size family 顺序固定都写在最后)

如果非要混合去写，要先写混合样式再写单一样式，这样才不会被覆盖掉

<!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: 300px;height:300px;
            background: red; 
        border: 2px black solid;
        font: 30px 宋体;
        }
    </style>
</head>
<body>
  <div>这是一段文字</div>
</body>
</html>

二十六、CSS选择器

(1)ID选择器

css: #elem{} html: id="elem"

注意：1.ID是唯一值，在一个页面中只能出现一次

2.命名规范，由字母，下划线，中划线，数字（第一个不能是数字）

3. 命名方式：驼峰式，下划线式，短线式

<!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>
        #div1{background: red;}
        #div2{background: blue;}
    </style>
</head>
<body>
    <div id="div1">这是一个块</div>
    <div id="div2">这又是一个块</div>
</body>
</html>

（2）CLASS选择器

css: .elem{} html: class="elem"

注：1.class选择器可以相同名字重复使用

2. 一个可以添加多个class样式

3.添加多个样式时，对同一个样式处理的优先级根据CSS顺序决定

4.标签.类的写法只对该标签生效 p.elem{}

(3)群组选择器

可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式

css:div,p,span{}

(4)通配选择器

*{ } 给所有的标签添加样式，慎用

（5）层次选择器

后代:M N{ } （M里所有的N）

父子：M>N{ } （只和孩子有关系，孩子的孩子就没关系了）

兄弟：M~N{ } (当前M下方的所有兄弟N标签)

相邻 M+N{ } (当前M相邻下方的N标签)

（6）属性选择器

（7）伪类选择器

M:伪类{}

:link 访问前的样式（只能添加给a标签）

:visited 访问后的样式（只能添加给a标签）

:hover 鼠标移入时的样式（可以添加给所有的标签）

:active 鼠标按下时的样式（可以添加给所有的标签）

:after、:before 通过伪类的方式给元素添加一个文本内容，使用content属性

：checked、:disabled 一个方框，可以进行打勾(针对表单元素)

:focus 光标点上去就添加样式，移开样式就消失（针对表单元素）

<!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: red;}
     div:hover{background: blue;}
     div:active{background: green;} */
     a:link{color: red;}
     a:visited{color: blue;}
     a:hover{color: green;}
     a:active{color:yellow;}
    </style>
</head>
<body>
    <!-- <div></div> -->
    <a href="#">这是一个链接</a>
</body>
</html>

(8)结构性伪类选择器

nth-of-type():角标是从1开始的，1表示第一项，2表示第二项...，n只表示从0到无穷大（2n就值搞双数行，2n+1就只搞双数行）

nth-of-child():和nth-of-type()差不多，nth-of-type()是只在这个类的整体里面找第几个，nth-of-child()是在全部包扩其他的所有里找第几个，如果找到的那一个不是自己的类就不产生效果

first-of-type():

last-of-type():

only-of-type():

<!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>
li:nth-of-type(2n+1){background: red;}
li:nth-of-type(2n){background: blue;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

二十七、CSS样式继承

文字相关的样式可以被继承（作用父子继承）

布局相关的样式（边框）不能被继承（默认是不能继承的，但可以设置继承属性 inherit值）

<!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: 300px;height: 300px;border: 1px red solid;color: red;font-size: 30px;}
     p{border:inherit ;}  /* p标签可以继承边框的样式 */
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>
</html>

二十八、CSS优先级

1.相同样式优先级

当设置相同样式时，后面的优先级较高，但不建议出现设计重复样式的情况

2.内部样式与外部样式

内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高

3.单一样式优先级

style行间>id>class>tag(标签)>*>继承

<!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="./base.css">
    <style>
        div{color: red;}
       /*  div{color: blue;} */
    </style> -->

    <style>
      /*   #elem{color: red;} */
       /*  .box{color: blue;}
        div{color: green;} */
        /* *{color: red;} */
        body{color: blue;}
    </style>
</head>
<body>
   <!--  <div id="elem" style="color:blue;">这是一个块</div> -->
   <div id="elem" class="box">这是一个块</div>
</body>
</html>

base.css

div{color:yellow;}

4.!important:提高样式优先级，非规范方式，不建议使用(不能针对继承额属性进行优先级的提升)

5.标签+类与单类

标签+类>单类 div.box>.box

6.群组优先级

群组选择器与单一选择器的优先级相同，靠后写的优先级高

div,p{}

7.层次优先级

权重比较约分比较

二十九、CSS盒子模型

组成:content->padding->border->margin 由内向外

物品填充物包装盒盒子与盒子之间间距

content:内容区域 width和height组成的

padding:内边距（内填充）

只写一个值:30px;(上下左右)

写两个值：30px 40px(上下、左右)

写四个值;30px 40px 50px 60px(上、右、下、左)

单一样式只能写一个值：

padding-left

padding-right

padding-top

padding-bottom

margin:外边距（外填充）

单一样式只能写一个值：

margin-left

margin-right

margin-top

margin-bottom

注：1.背景色填充到margin以内的区域（不包含margin区域）

2.文字在content区域添加

3.padding不能为负数，而margin可以为复数（重叠在一起）

<!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>
       /*  #box{
            width: 200px;height: 200px;background: red;border: 10px blue solid;
            padding: 30px 50px;
            margin: 10px;
        }
        #box2{width: 200px;height: 200px;background: black;color: white;} */

        #box{
            width: 200px;height: 200px;background: red;border: 10px blue solid;
            padding: 30px 50px;
            box-sizing: border-box;
        }
        input{width: 100%;padding: 30px;box-sizing:border-box;}

    </style>
</head>
<body>
    <div id="box">这是一个盒子</div>
    <div id="box2">又是一个盒子 </div>
</body>
</html>

box-sizing:

盒尺寸，可以改变盒子模型的展示形态

默认值:content-box 设置width、height针对content

border-box设置width、height针对content padding border

使用的场景：

1.不用再去计算一些值

2.解决一些百分比问题

盒子模型的一些问题：

1.margin叠加问题，出现在上下margin同时存在的时候，会取上下值中较大的作为叠加的值

2.margin传递问题:只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向没有传递的问题(想给上端留空会将父和子一个整体都带下去)

解决方案：1.BFC规范

2.给父容器加边框（可以加透明色transparent）

3.margin换成padding

<!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>
      /*   #box1{width:200px ;height: 200px;background: red;margin-bottom: 30px;}
        #box2{width:200px ;height: 200px;background: blue;
        margin-top: 30px;} */
        /* #box1{width: 200px;height: 200px;background: red;}
        #box2{width: 100px;height: 100px;background: blue;margin-top: 100px;} */
        #box1{width: 200px;height: 1
            00px;background: red;padding-top: 100px;}
        #box2{width: 100px;height: 100px;background: blue;}
        
    </style>
</head>
<body>
   <!--  <div id="box1"></div>
    <div id="box2"></div> -->
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

扩展：

1.margin左右自适应(auto)是可以的，左右同时自适应就会居中放置，上下自适应是不可以的

2.width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码

<!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>
 /*   #box{width: 400px;height: 100px;background: red;
margin-left:auto;margin-right: auto;
margin: 0 auto;} */
#box1{width: 300px;height: 300px;background: red;}
#box2{height: 100px;background: blue;color: white;padding-left: 30px;border-left: 10px black solid;}
    </style>
</head>
<body>
   <!--  <div id="box"></div> -->
   <div id="box1">
    <div id="box2">这是一些内容</div>
   </div>
</body>
</html>

三十、布局模式

(1)Flex弹性盒模型

1.作用于副容器

<!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>
        #parent{width: 300px; height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-direction: column-reverse;}
        #box div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background: red;}
        #box2{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-wrap: nowrap;}
        #box2 div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background: red;}
    </style>
</head>
<body>
    <!-- <div id="parent">
        <div id="box"></div>
    </div> -->

<div id="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
</body>
</html>

2.作用于子容器

3.骰子

<!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>
        #box1{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;justify-content: center;align-items: center;}
        #box1 div{width: 30%;height: 30%;background: black;border-radius: 50%;}

        #box2{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;justify-content: space-between;}
        #box2 div{width: 30%;height: 30%;background: black;border-radius: 50%;}
        #box2 div:last-child{ align-self: flex-end;}

        #box3{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;justify-content: space-evenly;align-items: center;}
        #box3 div{width: 30%;height: 30%;background: black;border-radius: 50%;}
        #box3 div:first-child{align-self: flex-start;}
        #box3 div:last-child{ align-self: flex-end;}

        #box4{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;flex-wrap: wrap;}
        #box4 div{width: 100%;display: flex;justify-content: space-between;}
        #box4 div:last-child{align-items: flex-end;}
        #box4 i{display: block;width: 30%;height: 60%;background: black;border-radius: 50%;}
    
        #box5{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;flex-wrap: wrap;}
        #box5 div{width: 100%;display: flex;justify-content: center;align-items: center;}
        #box5 div:first-child{align-items: flex-start;justify-content: space-between;}
        #box5 div:last-child{align-items: flex-end;justify-content: space-between;}
        #box5 i{display: block;width: 30%;height: 90%;background: black;border-radius: 50%;}

        #box6{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;flex-wrap: wrap;}
        #box6 div{width: 100%;display: flex;justify-content: space-between;}
        #box6 div:first-child{align-items: flex-start;}
        #box6 div:last-child{align-items: flex-end;}
        #box6 i{display: block;width: 30%;height: 90%;background: black;border-radius: 50%;}
    </style>
</head>
<body>
    <div id="box1">
        <div></div>
    </div>
    <div id="box2">
        <div></div>
        <div></div>
    </div>
    <div id="box3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="box4">
        <div>
            <i></i>
            <i></i>
        </div>
       <div>
             <i></i>
             <i></i>
       </div>
    </div>
       <div id="box5">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
        </div>
        <div>
          <i></i>
          <i></i>
        </div>

       </div>
    
       <div id="box6">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
          <i></i>
          <i></i>
        </div>

       </div>
</body>
</html>

4.自适应

<!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>
        *{margin: 0;padding: 0;}
        #main{display: flex;}
        #left{width: 200px;height: 200px;background: red;}
        #center{flex: 1;height: 300px;background: yellow;}
        #right{width: 200px;height: 200px;background: blue;}
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>
</html>