Web 前端—HTML+CSS系列-前端-CSS教程

Web 前端—HTML+CSS系列

一、html+css

1.1什么是HTML、CSS

（1）知识点：是制作网页的编程语言
浏览器把代码解析后的样子就是我们看到的网站
一个网站是由很多个网页组成的
查看网页代码源
（2）.html网页制作
新建一个文件夹——新建记事本——把记事本格式改成demo.html模式——打开方式（打开记事本）——输入要输入的内容——拖拽网页图标到浏览器里

1.2宇宙第一编辑器VS Code

（1）定义
VSCode，全称visual studio code，来自微软，是一个开源的、基于electron的轻量代码编译器。

（2）基本操作
自动换行：设置：文件->首选项->设置（大小、是否换行Word wrap）
学习编辑器基本使用：
创建文件：点击右键
重命名
删除
VScode快捷操作：
Ctrl+S：保存
Ctrl+a：全选
Ctrl+x、Ctrl+c、Ctrl+v：剪切、复制、粘贴
Ctrl+z、Ctrl+y：撤销、前进
shift+end：从头选中一行
shift+home:从尾部向前选中这一行
shift+alt+↓：快速复制一行
shift+↑或↓：快速移动一行
tab：向后缩进
tab+shift：向前缩进
多光标模式：alt+鼠标左键
Ctrl+D：选择相同元素的下一个

1.3Chrome浏览器

Chrome下载地址：google下载地址

1.4、深入了解网站开发

UI设计师：设计稿
web前端开发工程师（HS开发）

设计稿->代码
数据库里的数据->显示到页面
HTML：负责结构
CSS：负责样式
web后端开发工程师

一、HTML基本操作

1.web前端三大核心技术

HTML：结构
CSS：样式
JavaScript:与用户的交互行为
示例：

<style>
    div{color:red;font-style:italic;}
</style>

<div>缓缓飘落的枫叶像思念，你烛火惺忪点燃岁末的秋天</div>

<script>

let div=document.qierySelector('div');
let time=null;
let flag=ture;
div.onmouseover=function(){
    timer=setInterval(()=>{
        if(flag){
            div.style.color='blue';                
            div.style.fontstyle='normal';
        }
        else{
            div.style.color='red';
            div.style.fontstyle='italic';
        }
        flag=!flag;
    },500);
 };
div.onmouseout=function(){
    clearInterval(timer);
 };

</script>

2.HTML初始代码

（1）定义
每一个HTML文件都学要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的
（2）内容

<!DOCTYPE html>     //文档声明：告诉浏览器这是一个html文件
<html lang="en">        //html最外层标签，包裹着所有html标签代码  lang= “en”是用英文网站 lang=“zh-***"表示中文的网站
<head>
    <meta charset="UTF-8">    //元信息：编写网页中的一些赋值信息 charset="UTF-8”国际编码，让网页不出现乱码的情况
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>Document</title>   // 网页的标题
</head>
<body>
    //显示网络内容的区域
</body>
</html>

3.HTML注释

（1）写法： 在浏览器中看不到，只能在代码中看见
快捷方式添加与删除注释：Ctrl+/ （不用选中） shift+alt+a（先选中）
示例：

<body>
    <!-- 注释的内容-->
</body>

(2)意义
a.暂时不用的代码注释起来，方便以后使用
b.对开发人员进行提示

4.HTML语义化

（1）定义：所谓HTML语义化指的是，根据网页中内容的结构，选择合适的HTML标签进行编写（什么样结构采用什么样的标签）
（2）标签的好处：

代码结构得到了优化，即使没有css，也能呈现出完整、清晰的结构，更加
方便阅读和理解，同时提高了团队合作的效率
有利于搜索引擎的优化
爬虫依赖标签确定关键字的权重，可以帮助爬虫爬出更多有效信息
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页
（3）常用标签
< h1>~< h6>标签：标题标签，h1等级最高，h6等级最低
header元素：用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框
nav元素：定义页面的导航链接部分区域
main元素：定义页面的主要内容，一个页面只能使用一次。
article元素：定义页面独立的内容，它可以有自己的header、footer、sections等
section元素：元素用于标记文档的各个部分，例如长表单文章的章节或主要部分
aside元素：一般用于侧边栏
footer元素：文档的底部信息
small元素：呈现小号字体效果
strong元素：用于强调文本
（4）标签元素周期表：

5.标题与段落

（1）h标签：标题
在一个网页中，h1标题最重要，并且一个.html文件只能出现一次h1文件，但是可以有很多h2、h3

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题 </h5>         
<h6>标题</h6>

图片：

（2）p标签：段落

段落标题

<p>english</p>

6.文本修饰标签

(1)strong标签:表示强调，会对文本进行加粗
写法：

<strong>这是一首简单的小情歌</strong>

结果：

（2）em标签：表示强调，会对文本进行加粗
写法：

<em>故事的小黄花</em>

结果：

（3）sub：下标文本、 sup：上标文本
写法：

a<sub>2</sub>+b<sup>2</sup>=c<sub>3</sub>

（4）del：删除文本、 ins：插入文本（一般配合文本使用的）
写法：

<ins>插入文本</ins>

结果：

7.图片标签与图片属性

（1）采用标签img<单标签>：图片
scr：引入图片的地址
alt:当图片出现问题的时候，可以显示一段友好的提示文字
title：提示信息
width，height：调节文件大小
方式：

<img src="" alt="">

示例：

<img src="https://ttpcstatic.dftoutiao.***/ecms/image/20220727/600x447_62e0e760d0bcb.jpeg_.webp" alt="" title="这还是一个图片的信息  " width="xxx" height="xxx">

8.引入文件的地址路径

相对路径：./n
在路径中表示当前路径: …/n

<img src="./5648.png" alt="">   //图片名字

…在路径中表示上一级路径(文件+文件)

<img src="./32323/5648.png" alt="">

图片示例：
绝对路径
看真真正正图片所在的位置

9.跳转链接

链接标签：
标签：双标签、
href属性：链接的地址
示例：

<a href="http://www.baidu.***">访问百度</a>

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

示例：

<a href="http://www.baidu.***" target="_blank">访问百度</a>

base标签：（单标签）改变标签的默认行为，写一个打开许多个窗口
<不写在body里，写在head里>
示例：

访问百度访问百度访问百度访问百度访问百度

10.跳转锚点

实现一：#号、id属性
示例


<a href="#html">HTML</a>
<a href="#css">css</a>
<a href="#javascript">Javascript</a>
<h2 id="html">HTML超文本标记语言</h2>
<p>                         </p>
<h2 id="css">CSS层叠样式表</h2>
<p>      </p>
<h2 id="javascript">Javascript脚本</h2>
<p>    </p>

file:///D:/22210305/10.html#html
实现二：#号、name属性
示例

<a href="#html">HTML</a>
<a href="#css">css</a>
<a href="#javascript">Javascript</a>
<a name="html"></a>
<h2>HTML超文本标记语言</h2>
<p>                         </p>
<a name="css"></a>
<h2>CSS层叠样式表</h2>
<p>      </p>
<a name="javascript"></a>
<h2>Javascript脚本</h2>
<p>    </p>

11.特殊符号

在编写一些文本时，经常会遇到无法输入的字符，还有往一段文字中加多个空格时，页面并不会解析出多个空格。这些特殊字符有专门的代码解决冲突

<body>
    <p>
        &lt;dahaoren&gt;
    </p>
</body>

图片展示（翻译后）：

示例2：

<p>
    
    hello&nbsp;&nbsp;&nbsp;&nbsp;world
    </p>

图片展示：

12.无序列表

ul、li：列表的最外层容器、列表项（ul和li必须是组合出现的，他们之间是不能有其他标签的）。符合嵌套的规范
示例：

<ul>
        <li>第一项</li>
        <li>第二项</li>
    </ul>

结果：

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

练习：

13.有序列表

ol、li:列表的最外层容器、列表项主要用于排行榜
示例：

<ol>
        <li>第一项</li>
        <li>第二项</li>
    </ol>
    </body>

结果：

14.定义列表

列表项需要添加标题和对标题进行描述的内容
dl：定义列表
dt：定义专业术语或名词
dd：对名次进行解释和描述
示例：

<dl>
    <dt>你</dt>
    <dd>是</dd>
   </dl>

结果：

15.嵌套列表

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

<ul>
    <li>
        江苏省
        <ul>
            <li>南京市</li>
            <li>无锡市</li>
            <li>徐州市</li>
        </ul>
    </li>
    <li>
        山东省
        <ul>
            <li>济南</li>
            <li>青岛</li>
        </ul>   
        </li>
</ul>

成果展示：

16.表格标签

table：表格的最外层容器
tr：定义表格行
th：定义表头
td：定义表格单元
caption：定义表格标题

以上之间是有嵌套关系的，要符合嵌套规范

<body>
    <table>
        <tr>
            <th>日期</th>
            <th>天气情况</th>    
            <th>出行情况</th>
        </tr> 
        <tr>
            <td>2022年1月1日</td>
            <td><img src="./img/tianqi_1.png" alt=""></td>
            <td>天气晴朗，适合出行</td>
        </tr>   
        <tr>
            <td>2022年1月2日</td>
            <td><img src="./img/tianqi_2.png "alt=""></td>
            <td>有小雨，记得带伞</td>
        </tr>
    </table>
</body>

语义化标签：tHead、tBody、tFood
注：在一个table中，tBody是可以多次出现的，但是tHead、tFood只能出现一次

17.表格属性

border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式
valign:上下对齐方式

18.表单标签

不需要太多规范。
from;表单最外层容器
input：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等（有一个type属性，决定是什么控件）
还有一些常见的属性：
checked、disabled、name、for…

<body>
    <form>
        <h2>输入框：</h2>
        <input type="text">
        <h2>密码框：</h2>
        <input type="password">
    </form>
</body>

成果展示：

 <form action="http://www.baidu.***"> <!--提交到什么地方-->
        <h2>输入框：</h2>
        <input type="text" placeholder="请输入用户名">
        <h2>密码框：</h2>

成果展示：

复选框

<body>
    <form>
        <h2>输入框：</h2>
        <input type="text">
        <h2>密码框：</h2>
        <input type="password">
        <h2>复选框</h2>
        <input type="checkbox">苹果
        <input type="checkbox">香蕉
        <input type="checkbox">葡萄
    </form>
</body>

成果展示：

单选框：

<body>
    <form>
        <h2>单选框</h2>
        <input type="radio" name="任意值">男
        <input type="radio" name="任意值">女
    </form>
</body>

成果展示：

上传文件：

<body>
    <form>
        <h2>上传文件</h2>
        <input type="file">
    </form>
</body>

成果展示：

提交按钮和重置按钮：

<body>
    <form>
        
        <h2>提交按钮和重置按钮</h2>
        <input type="submit">
        <input type="reset">
    </form>
</body>

成果展示：

textarea：多行文本框

<h2>多行文本框</h2>
        <textarea cols="30" rows="10"></textarea>

成果展示：

<h2>下拉菜单</h2>
       <select size="3"><!--自动出现几个选项-->
        <!--把size换成multpie就是第二个下拉菜单（另起一个select）-->
            <option selected disabled>请选择</option><!--disabled的意思是这个选项不能选-->
            <option>北京</option>
            <option>上海</option>
            <option >徐州</option><!--selected是指将它设为默认选项-->
        </select> 
        <input type="radio" name="任意值" id="man"><label for="mam">男</label>
        <input type="radio" name="任意值" id="woman"><label for="woman">女</label><!--id与for后面是相应的，在这里是sex-->

成果展示：

19.表格表单组合

表格表单之间可以互相组合形成数据展示效果

<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="text" placehodler="请输入用户名"></td>
             </tr>
             <tr align="right">
                 <td>密码：</td>
                 <td><input type="password" placeholder="请输入密码"></td>
             </tr>
             <tr align="center">
                 <td colspan="2">
                     <input type="submit">
                     <input type="reset">
                </td>
            </tbody>        
        </table>
    </form>
</body>

成果展示：

20.div与span

div（块）：
div全称division，“分割、分区”的意思，div标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在div标签中，div中还可以嵌套多层div，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局
span（内联）：用来修饰文字的，div与span都是没有任何默认样式的。需要配合css才行

<body>
    <div>
        <h2><a href="#"><span style="color:red">知乎</span> - 有问题，就会有答案 </a></h2>
        <a href="#"><img src="" alt></a>
        <p>知乎，中文互联网高质量的问答社区和创作者聚集的原创内容平台，于 2011 年 1 月正式上线，以「让人们更好的分享知识、经验和见解，找到自己的解答」为品牌使命。知乎凭借认真、专业 </p>
        <a href="#">https://www.zhihu.***</a>
    </div>
</body>

成果展示：

二、CSS基本语法

格式：
选择器{属性1：值1；属性二：值2}
单位：
px->像素（pixel）、%->百分比
基本样式：
width、height、background-color
CSS注释：
/css注释内容/

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>Document</title>
    <style>
        div{width:100px;height:100px; background-color:red}
    </style>
 </head>
 <body>
    <div>这是一首简单的小情歌</div>
 </body>   
</html>

成果展示：

1.内联样式与内部样式（css样式的引入方式）

内联（行内、行间）样式：
在html标签上添加style属性来实现的

<style>
        div{width:50%；height:50px; background-color:red}
    </style>
 </head>
 <body>
    <div>这是一首简单的小情歌</div>
 </body>

内部样式
在

<div style="width:100px;height:100px;background-color:blueviolet">妹妹说紫色很有韵味</div>
<div style="width:50px;height:50px;background-color:blue">董</div>
<div style="width:50px;height:50px;background-color:red">双</div>
<div style="width:50px;height:50px;background-color:green">玉</div>
<!--另起一个板-->

区别：内部样式的代码可以复用、复合w3c的规范标准，进行让结构和样式分开处理

2.外部样式

引入一个单独的css文件，name，css
link标签：引入外部资源
rel属性：指定资源跟页面的关系（当前文档与被链接的关系）
href属性：资源的地址
@import：通过这种方式引入外部样式（不建议，问题很多）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,inital-scale=1.0">
        <meta http-equiv="X-UA-***patible" content="ie=edge">
        <!--<link rel="stylesheet" href="./***mon.css">-->
        <title>Document</title>
        <style>
            @import url('./***mon.css');
        </style>
    </head>
<body>
    <div>董双玉头顶的颜色就是这块的背景色
    </div>
</body>
</html>
<!--制作链接：将文件模式改为。css模式-->

成果展示

3.css中的颜色表示法

1.单词表示法：red、green等
颜色的英文代码：

2.十六进制表示法：
0 1 2 3 4 5 6 7 8 9 a b c d e f

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>Document</title>
    <style>
        div{ background-color:#000000}
    </style>
 </head>
 <body>
    <div>这是一首简单的小情歌</div>
 </body>   
</html>

成果展示：

3.rgb三原色表示法：rgb(255,255,255)
取值范围：0~255
提取颜色的下载地址：https：//www.daidufe.***/fehelper
photoshop

4.背景样式

1.background-color:背景颜色
2.background-image:背景图片
【url背景地址】
默认：会水平垂直都铺满背景图
3.background-repeat:背景图片的平铺方式
repeat-x：x轴平铺
repeat-y：y轴平铺
repeat（x,y都进行平铺，默认值）
no-repeat:都不平铺
4.background-position:背景图片的位置
x y:number （px、%）单词
x:left、center、right
y：top、center、bottom
5.background-attachment:背景图片随滚动条的移动方式
scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed：（背景位置是按照浏览器进行偏移的）

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>Document</title>
    <style>
        div{ width：3000px；height：3000px； background-color:red; 
            background-image:url(./img/256.jpg);/*图片位置*/
            background-repeat:no-repeat ;
            background-position:right center;  
            background-attachment: scroll   /*fixed*/
        }
    </style>
 </head>
 <body>
    <div></div>
 </body>   
</html>

5.背景实现视觉差

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>Document</title>
    <style>
        div{width:1400px;height:800px;background-image:url(./img/1.jpg);background-attachment: fixed;}
        div{width:1400px;height:800px;background-image:url(./img/2.jpg);background-attachment: fixed;}
        div{width:1400px;height:800px;background-image:url(./img/3.jpg);background-attachment: fixed;}
    </style>
 </head>
 <body>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div1"></div>
</body>   
</html>

6.边框样式

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

border-width:边框的大小（px…）
border-color:边框的颜色(red，#…)
注：针对某一条边进行单独设置
（圆角边框）

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>Document</title>
    <style>
      div{width:300px;height:300px;border-/*right- 上下左右针对某一条边进行设置，放在中间*/style:dashed;border-color:red;
    border-width:10px;}

    </style>
 </head>
 <body>
    <div></div>
</body>   
</html>

成果展示：
练习.利用边框实线三角形
边框加颜色：

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>Document</title>
    <style>
      div{width:300px;height:300px;
        border-top-style:solid;
        border-top-color:green;
        border-top-width:100px;
        border-bottom-style:solid;
        border-bottom-color:red;
        border-bottom-width:100px;
        border-left-style:solid;
        border-left-color:blueviolet;
        border-left-width:100px;
        border-right-style:solid;
        border-right-color:yellow;
        border-right-width:100px;
        
    }

    </style>
 </head>
 <body>
    <div></div>
</body>   
</html>

成果展示：

三角形：
方法一：（将width与height设置为0，在讲其他方块颜色设置为背景色/不是白色，是与背景图相同的颜色/）
方法二：将每个方块颜色设置为透明色（transparent）

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>Document</title>
    <style>
      div{width:0px;height:0px;
        border-top-style:solid;
        border-top-color:transparent;
        border-top-width:100px;
        border-bottom-style:solid;
        border-bottom-color:transparent;
        border-bottom-width:100px;
        border-left-style:solid;
        border-left-color:transparent;
        border-left-width:100px;
        border-right-style:solid;
        border-right-color:black;
        border-right-width:100px;
        
    }

    </style>
 </head>
 <body>
    <div></div>
</body>   
</html>

成果展示：

7.文字样式

1.字体类型：font-family
英文、中文
衬线体与非衬线体：
区别：带衬线有棱角，非衬线体比较圆滑
注：设置多字体的方式
如果设置的字体中有空格要带上单引号

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>Document</title>
    <style>
      div{font-family：Microsoft Yahei;}
    </style>
 </head>
 <body>
    <div>心中有党，成绩理想</div>
</body>   
</html>

成果展示：

2.字体大小：font-size（16px默认像素）
第一种：输入像素数字大小（00px）
第二种：有英文形式：

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>Document</title>
    <style>
        div{font-size: 50px;}

    </style>
 </head>
 <body>
    <div>我怀念的是无话不说</div>
 </body>   
</html>

成果展示：

3.字体粗细：font-weight
模式：正常（normal）、加粗（bold）
写法：单词（normal、bold）/number（100 200…500都是正常的，600…900都是加粗的）/
4.字体样式：font-style
模式：正常（默认）、斜体（italic）
/*oblique也是表示斜体，用的比较少，一般了解即可，没什么差别 */
区别：（1.）italic：带有属性倾斜字体的才可以设置倾斜操作。
（2.）oblique：没有倾斜属性的字体也可以设置倾斜操作

8.css段落样式——文本修饰

text-decoration：文本修饰
下划线:underline
删除线:line-through
上划线:overline

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-***patible" content="ie=edge">
    <title>Document</title>
    <style>
      p{width:300px;text-decoration: line-through;/*添加多个修饰中间直接用空格隔开*/}  
    </style>
 </head>
 <body>
    <p>每个优秀的人的心中都有一段沉默的时光，那段时光是付出了很多努力，却得不到结果的日子，我们把它叫做扎根</p>
 </body>   
</html>

成果展示

9.css段落样式——文本大小写

text-transform：文本大小写（针对英文段落）
小写：lowercase
大写：uppercase
只针对首字母：capitalize

10. css段落样式——文本缩进

text-indent：文本缩进（一个文字16px——对齐）
首行缩进的效果
em相对单位：相对单位，1em永远与字体大小相同
对齐方式：left、right、center、justify（两端点对齐）

 p{ text-align：left: ;}/*调节左右对齐*/

11.css段落样式——定义行高

line-height：
定义：一行文字的高度
默认：不是固定值，而是变化的。根据当前字体大小在不断的变化。
取值：1.number（px）|scale（比例值，跟文字大小成比例的）

p{ line-height:30px ;}

12.css段落样式——字间距与词间距

1.letter-spacing：定义字间距
2.Word-spacing：词之间的间距（针对英文段落）
3.强制折行：（针对英文、数字不自动折行）
（1.）word-break:break-all；（非常强烈的折行）
（2.）word-wrap：break-word；（不是那么强烈的折行，会产生空白区域）

13.css复合样式

一个css属性只控制一种样式，叫做单一样式
一个css属性控制多种样式，叫做复合样式（background、border、font）
复合的写法：是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border；有的是需要关心顺序，例如font

14.css选择器——id

1.ID选择器：

15.css选择器——class

html css

转载请说明出处内容投诉
CSS教程_站长资源网 » Web 前端—HTML+CSS系列

怪兽ai数字人

分享到：

一、html+css

1.1什么是HTML、CSS

1.2宇宙第一编辑器VS Code

1.3Chrome浏览器

1.4、深入了解网站开发

一、HTML基本操作

1.web前端三大核心技术

2.HTML初始代码

3.HTML注释

4.HTML语义化

5.标题与段落

6.文本修饰标签

7.图片标签与图片属性

8.引入文件的地址路径

9.跳转链接

10.跳转锚点

11.特殊符号

12.无序列表

13.有序列表

14.定义列表

15.嵌套列表

16.表格标签

17.表格属性

18.表单标签

19.表格表单组合

20.div与span

二、CSS基本语法

1.内联样式与内部样式（css样式的引入方式）

2.外部样式

3.css中的颜色表示法

4.背景样式

5.背景实现视觉差

6.边框样式

7.文字样式

8.css段落样式——文本修饰

9.css段落样式——文本大小写

10. css段落样式——文本缩进

11.css段落样式——定义行高

12.css段落样式——字间距与词间距

13.css复合样式

14.css选择器——id

15.css选择器——class

怪兽ai数字人

相关推荐

发表评论

一个令你着迷的主题！