前端入门第一周-CSDN博客

本文链接：https://blog.csdn.net/m0_73638967/article/details/127943941

文章目录

一. HTML和CSS概述
二.HTML核心
三.CSS基础

一. HTML和CSS概述

1.概述

1.扩展

80 20 原则，只有百分之二十的知识，有百分之八十的场景可以用到。百分之八十也会增强竞争力。
2.html css
html+css+javascript=网页
（1）html:hyper text markup language超文本标记语言：定义网页中有什么东西。有什么信息。（盖毛坯房）
（2）css:层叠样式表，定义网页中的东西长什么样子。（装修）
3.如何学习？
（1）心态平和。
（2）多练习。一定一定一定
软件开发：工科
4.学习顺序
（1）HTML
（2）CSS（补充html）
5.VS：编写代码（做笔记）
6.markdown:MD，文档格式标准。
7.【toc】目录的意思
8.#一级标题
9.##二级标题

2. 开发环境的准备

术语

1.web：互联网
2.w3c:万维网联盟，非盈利性的组织
w3.org，为互联网提供各种标准
3.XML:可扩展的标记语言：extension markup language.用于定义文档结构的。
4. <任务> <执行任务>每周一</执行日期> <执行时间>下午两点</执行时间> </任务>
5.什么是html？
答：是w3c组织定义的语言标准：是用于描述页面结构的语言。
结构：有什么东西，该东西表示什么含义。
html.超文本内容（超文本：从文档的某一部分跳到另一个文档）
书写一个一级标题

<h1>一级标题</h1>

MDN:Mozilla开发者社区（字典）
6.什么是CSS?
CSS是w3c定义的语言标准。css是用于页面展示：颜色，边框颜色，布局，显示位置，字体大小。CSS决定了页面长什么样子。
7.执行
HTML CSS交给浏览器执行，结果是看到的页面（浏览器内核）
浏览器：1.shell:外壳
2.core:内核(JS执行引擎，渲染引擎)
独立内核的浏览器：1).IE：trident
2).firfox:Gecko 3).chrome:webkit(之前)/blink
4).safari:webkit 5).opera:presto/blink**
8.版本和兼容性

html5,css3：目前还没有制定完成
xhtml:可以认为是Html的一种一个版本，完全符合xml的规范。（以前的）

二.HTML核心

1.第一个网页

Emmet插件：自动生成HTML代码片段

1)注释

快捷键：Ctrl+/
注释为代码的阅读者提供帮助，注释不参与运行
在HTML中，注释使用如下格式书写

<!-- 注释内容 -->

2)元素

其他叫法：标签，标记

 <a href="http://www.duyiedu.com" title="黑龙江渡一教育有限公司">渡一教育</a>

整体：element(元素)

元素=起始标记(<a>) + 结束标记(</a>)+ 元素内容（渡一教育） + 元素属性（额外信息）

起始标记和结束标记决定元素的名称；
属性=属性名（属性是干什么用例：href）+属性值(例：http://www.duyiedu.com)
title=“黑龙江渡一教育有限公司”(鼠标放在那里，会显示的提示)

属性的分类：
——局部属性：某些元素特有的属性
例：href是a元素特有的属性
——全局属性：所有元素通用（title)

<meta charset="UTF-8">

有些元素没有结束标记，这样的元素叫做：空元素
例：img元素 <img src=“图片地址”>

空元素的两种写法：
1)<meta charset="UTF-8">
2）<meta charset="UTF-8"/>/表示闭合标记

3）元素的嵌套

1）注意元素不能相互嵌套
例：

  <body>
       <div>
             <p>
       </div>
             </p>
  </body>

2)父元素子元素祖先元素后代元素兄弟元素（拥有同一个父元素的两个元素）

4）标准的文档结构

html:页面、HTML文档
1）

<!DOCTYPE html>

文档声明，告诉浏览器，当前文档使用的HTML 标准是HTML5,如果不写文档声明，将导致浏览器进入怪异渲染模式
2）

  <html lang="en">  中文"cmn-hans"
  </html>

html 根元素，一个页面最多只能一个，并且该元素是所有其他元素的父元素或祖先元素（html5版本中没有强制要求写该元素）
lang 属性：全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。
3）head元素

  <head>
  </head>  文档头，文档头内部的内容，不会显示到页面上

4)meta元素

  <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

文档的元数据：附加信息（告诉浏览器的一些信息）；
charset:指定网页内容编码
计算机中低电压（0~2v) 0 高电压（2~5v) 1
计算机，只能存储数字，只能将数字和文字对应
例： a-97 A-64
(该字典叫做字符编码表，GB2312，GBK)
UTF-8是unicode编码的一个版本
<meta>第二行是适配手机端的
第三行解决IE的问题
5）

  <title>Document</title>

网站标题
6) <body> </body> 文档体，页面上所有要参与显示的元素，都应该放到文档体中。

2. 语义化

1）什么是语义化？

每一个HTML元素都有具体的含义

a元素：超链接
P元素：段落
h1元素：一级标题

所有元素与展示效果无关

元素展示到页面中的效果，应该由CSS决定的

因为浏览器带有默认的CSS样式，所以每个元素有一些默认样式。

重要：选择什么元素，取决于内容的含义，而不是显示的效果，效果是由CSS来控制
根据含义选择元素，而不是显示什么选择元素；

2).为什么需要语义化？

为了搜索引擎优化（SEO)
SEO:搜索引擎：百度搜狗 Bing 谷歌

每隔一段时间，搜索引擎会从整个互联网中抓取页面（页面源代码），语义化会让搜索引擎更加容易理解源代码，网页语义化写的越好，搜索引擎就会越理解你的代码
2. 为了让浏览器理解网页

阅读模式、语音模式

3.文本元素

HTML5中支持的元素：HTML5元素周期表

1)h

标题： head
h1~h6：表示1级标题到6级标题

2)p

段落: paragraphs
p乘3>{这是一个段落}——tab键
p乘6>{…}——tab键
Lorem 乱数假文，没有任何实际含义的文字
p乘6>lorem——tab键(测试排版)
如果是p*6>lorem1(每个段落只生成1个单词)

3)span【无语义】

span:没有语义，只用来设置样式
三原色包含：红、绿、蓝
CSS需要识别元素样式
例：

三原色包含：<span style="color:red">红</span>、<span style="color:green">绿</span>、<span style="color:blue">蓝</span>

以前：某些元素会显示时会独占一行（块级元素：会独占一行，会导致换行），而某些元素不会（行级元素：不会换行）——展示效果
现在：到了HTML5，已经弃用这种说法，根据w3c官方标准的描述,元素代表含义，与显示无关，已经不能叫块级元素和行级元素，现在叫块级或行级容器

4)pre

预格式化文本元素

空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格
将源代码的空白和页面上的空白区分开；（为了让源代码的空格不会影响到页面的空格）

例外：在pre元素中不会出现空白折叠
在pre元素内部出现的内容，会按照源代码格式显示到页面上（为了显示图形，源代码）

该元素通常用于在网页显示一些代码

pre元素功能的本质：它有一个默认的CSS属性
因为pre本质是一个无语义代码，为了让浏览器识别代码往往会

<code >
  &lt; pre &gt;
         var i=2;
         if(i){                         
            console.log(i);
         }
  < /pre >
</code >

code会告诉浏览器这里面是代码
显示代码时，通常外面套code元素，code表示代码区域
或者：

<code style="white-space:pre">
        var i=2;
         if(i){                         
            console.log(i);
         }
</code>

4.HTML实体

实体字符，HTML Entity(表格)

实体字符通常用于在页面中显示一些特殊符号

&单词；
&#数字；

小于符号 <
大于符号 >
空格符号  需要几个写几个
版权符号 ©
&符号 &

== 5.a元素==

超链接

1）href属性

hyper reference(引用)表示跳转地址

跳转地址(普通链接)
跳转到某个锚点（跳到当前页面的不同位置）——锚链接

   <h2>章节1</h2>
   <p>
       Lorem 
  </p>

快捷反式可以写成
h2>{章节1})+p>lorem——tab
若要很多次
例：（（h2>{章节$}）+p>lorem1000)*6——tab

目录

a*6>{章节$}——tab
点其中的一个是跳转到其所在的位置

id属性：全局属性，表示元素在文档中的唯一编号；

    <!-- 目录 -->
    /*a[href="#chapter$"]*6>{章节$}——tab*/
    <a href="#chapter1">章节1</a>
    <a href="#chapter2">章节2</a>
    <a href="#chapter3">章节3</a>
    <a href="#chapter4">章节4</a>
    <a href="#chapter5">章节5</a>
    <a href="#chapter6">章节6</a>

   /*((h2[id="chapter$"]>{章节$})+p>lorem1000)*6--tab键*/
    <h2 id="chapter1">章节1</h2>
    <p>Lorem, ipsum.</p>
    <h2 id="chapter2">章节2</h2>
    <p>Nisi, mollitia!</p>
    <h2 id="chapter3">章节3</h2>
    <p>Deleniti, maxime?</p>
    <h2 id="chapter4">章节4</h2>
    <p>Facere, dolorum?</p>
    <h2 id="chapter5">章节5</h2>
    <p>Nihil, enim?</p>
    <h2 id="chapter6">章节6</h2>
    <p>Unde, eligendi?</p>

<a href="#">回到顶部</a>  本质都是页面地址的转变。

<a href="锚链接.html#chapter3">锚链接页面的第三章</a>

功能链接
点击后，触发某个功能
——执行JS代码,javascript:

<a href="javascript:alert('你好!')">弹出：你好！</a>

——发送邮件(要求用户计算机上安装有邮件发送软件：exchange)

<a href="mailto:2345@qq.com">点击给我发送邮件</a>

——拨号,tel(要求用户计算机上安装有拨号软件，或使用的是移动端访问)

<a href="tel:18220093946">点击给我拨打电话</a>

2)target属性

表示跳转窗口位置。
target的取值：
-_self:在当前页面窗口中打开，默认值；

<a href="http://douyu.com" target="_self" title="斗鱼每个人的直播平台">斗鱼直播</a>

-_blank:在新窗口中打开:

<a href="http://douyu.com" target="_blank">斗鱼直播</a>

3) title

全局属性：提示；

6.路径的写法

1). 站内资源和站外资源

站内资源：当前网站的资源；（自己的东西）
站外资源：非当前网站的资源（别人的东西）

2). 绝对路径和相对路径

站外资源：绝对路径；（只可以使用绝对路径）——复制地址
站内资源：相对路径；（也可以使用绝对路径）——./…/

绝对路径的书写格式：

url地址：（方式）

协议名：//主机名：端口号/path

schema://host:port/path

例：在百度中：https://news.sina.com.cn/china/wjwsj/2022-11-15/doc-imqmmthc4615841.shtml
在人人网：http
网页在本地打开：file
http://127.0.0.1:5500/2

协议名：http、https、file(本地文件)——交通工具
2)主机名：域名或IP地址127.0.0.1:——哪一条街多少号
3）端口号：5500——这栋楼的哪一个房间
如果协议是http协议，默认端口号80；如果协议协议是https协议,默认端口号为443；
4）路径：——这个房间的第几个柜子的第几个抽屉

当跳转目标和当前页面的协议相同时，可以省略协议（主机名和端口号类似）

相对路径

以./开头， ./表示当前资源所在的目录
可以书写…/表示返回上一级目录；
1）在相对路径的写法中——跳到a.html

    <a href="./subhtmls/a.html">
        subhtmls ->a.html
    </a>

在a.html中——跳到相对路径的写法

   <a href="./../">——勾选
       相对路径的写法.html
   </a>

相对路径中： ./可以省略

7.图片元素

1).img元素

image缩写，空元素

src属性：source

<img src="https://i-blog.csdnimg.cn/blog_migrate/e0b16d50ae3b35e56b8fb32c2f6111cb.jpeg">

站外资源——绝对路径
alt属性：当图片资源失效时，将使用该属性的文字替代图片
例：这是一张太阳系的图片 ——站内资源——相对路径
（文字是在图片不能显示的情况下才会显示的）

2).和a元素联用

点击图片会跳转到一个地址

<a target="_blank" href="https://www.361478.com/baizi/354225.html">——通过绝对路径从当地图片跳转到百度百科网页
   <img src="./img/solor2.jpg" alt="这是一张太阳系的图片">
</a>

3). map元素

map：地图
map的子元素：area shape coords(坐标) href(点击这个形状的链接地址) alt(当区域显示不出来时所显示的文字内容) target(点击这个链接时所显示的窗口是新窗口还是当前窗口)

坐标系的原点在图片的左上角（向右x增加，向下y增加）
坐标：圆（圆心的距离）（半径）
矩形 rect（左上角坐标右下角坐标）
多边形 poly (依次描述每个点的坐标)

<a target="_blank" href="https://www.361478.com/baizi/354225.html">
    <img usemap="#solarMap" src="./img/solor2.jpg" alt="这是一张太阳系的图片">
</a>

<map name="solarMap">(或solor-map)
    <area shape="circle" coords="360，204，48" href="木星的地址"  alt=""target="_blank">
    <area shape="rect" coords="323，282，395，320" href="木星的地址" alt="" target="_blank">
    <area shape="poly" coords="601，371，645，312，678，338，645，392" href="冥王星的地址"alt="" target="_blank">
</map>

注意：需要量标准的图形的尺寸（QQ截图）%100
衡量坐标时，为了避免误差，需要使用专业的衡量工具：
ps pxcook cutpro（ALT+C

4)和figure元素连用（额外信息）

指代，定义，通常用于把图片，图片标题，描述包裹起来

子元素：figcaption(指代东西的标题)

<body>
  <figure>
      <a target="_blank" href="https://www.361478.com/baizi/354225.html">
          <img usemap="#solarMap" src="./img/solor2.jpg" alt="这是一张太阳系的图片">
      </a>
      <figcaption>——在标题部分加上
         <h2>太阳系</h2>
      </figcaption>

      <p>
      太阳系的一段说明；
      </p>
  </figure>

   <map name="solarMap">(或solor-map)
     <area shape="circle" coords="360，204，48" href="木星的地址" target="_blank">
     <area shape="rect" coords="323，282，395，320" href="木星的地址" target="_blank">
     <area shape="poly" coords="601，371，645，312，678，338，645，392" href="冥王星的地址"target="_blank">
  </map>
</body>

Document

8.多媒体元素

video 视频

audio 音频

1). video

一般情况下，是点击视频右键，点击显示0控件
想要刚开始就要显示控件的话，通过一个属性来控制

controls:控制空间的显示，取值只能为controls
例：

<video controls="controls" src="./media/open.mp4" style="width:500px;">

某些属性，只有两种状态：1.不写 2.取值为书写名——这种属性叫做布尔属性

布尔属性，在HTML5中，可以不用书写属性值

<video controls src="./media/open.mp4" style="width:500px;">

autoplay:布尔属性，自动播放
muted:布尔属性，静音播放

<video controls autoplay muted src="./media/open.mp4" style="width:500px;">

loop:布尔属性，循环播放

2). audio

和视频完全一致

<audio src="./media/open.mp3" style="width:500px;" controls autoplay muted></audio>

3). 兼容性

旧版本的浏览器不支持这两个元素
不同的浏览器支持的音视频格式可能不一致

视频：mp4、webm

如果浏览器不支持：

<video controls autoplay muted loop src="./media/open.mp4" style="width:500px;">
   <source src="media/open.mp4">
   <source src="media/open.webm">
   <p>
   对不起，你的浏览器不支持video元素，请点击这里下载最新版本的浏览器
   </p>
</video>

9.列表元素

1). 有序列表

type属性（不太建议）——1 i（罗马数字）a（英文字母）A
小技巧：ALT+shift+光标的下——可以复制选中的结果
除非列表中序号很重要（比如，在法律或者技术文件中条目通常需要被引用），否则使用CSS lsit-style-type

reversed——布尔属性(倒着进行排序)

ol:ordered list

li:list item
列表的子元素只能是li

   把大象放冰箱，总共分几步？
    <ol reversed>
         <li>打开冰箱门</li>
         <li>大象进去</li>
         <li>冰箱门关上</li>
    </ol>

2).无序列表

把ol改成ul(其余和有序列表一样)

ul:unordered list
好学生条件

    <ul>
        <li>有责任心</li>
        <li>会家务</li>
        <li>学习好</li>
    </ul>

再提示一句：所有元素与显示效果无关
无序列表常用于制作菜单或新闻列表

3). 定义列表

通常用于一些术语的定义
dl:definition list

子元素 1)dt:definition title ——所要定义的名称
2)dd: definition desciption——定义的内容

10.容器元素

容器元素：该元素代表一块区域，内部用于放置其他元素，甚至其他容器

1). div元素——不知道元素就用div

没有语义，只是让浏览器知道这是一块区域，但浏览器不知道这个区域有什么含义
本身不带来任何效果

一个页面一般分为三个区域

  <div>
        <div>
            <img  src="" alt="">
        </div>
        <div>
            <ul>
                <Li>Lorem.</Li>
                <Li>Aperiam.</Li>
                <Li>Alias?</Li>
                <Li>Quibusdam?</Li>
            </ul>
        </div>
    </div>
    <div>
    </div>
    <div>
    </div>

2). 语义化容器元素

header:通常用于表示页头，也可以用于表示文章的头部

 <header>
        <div>
            <img  src="" alt="">
        </div>
        <div>
            <ul>
                <Li>Lorem.</Li>
                <Li>Aperiam.</Li>
                <Li>Alias?</Li>
                <Li>Quibusdam?</Li>
            </ul>
        </div>
    </header>

footer:通常用于表示页脚，也可以用于表示文章的尾部
article:通常用于整篇文章
section:通常用于表示文章的章节
例：

     <article>
        <header>
            <h1>
                文章的标题
            </h1>
            <div>
                元素2
            </div>
        </header>
        <section>
               <p>Lorem ipsum dolor sit amet.</p>
               <p>Nesciunt illum vel velit libero?</p>
               <p>Illum dolor excepturi sapiente dolore?</p>
        </section>
        <section>
            ...
        </section>
     </article>

aside:通常用于表示侧边栏（附加信息）——不是很重要的信息

11.元素包含关系

以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素(行级元素)除外

元素的包含关系由元素的内容类别决定。

例如，查看h1元素中是否可以包含p元素
则：进入百度查h1 mdn

总结：
1.容器元素中可以包含任何元素
2.a元素中几乎可以包含任何元素
3.某些元素有固定的子元素(ul>li,ol>li,dl>dt+dd)
4.标题元素和段落元素不能相互嵌套，并且不能包含容器元素

在百度可查阅：内容类别mdn

三.CSS基础

1.为网页添加样式

1). 术语解释

    <style>
       h1{
            color:red;
            background-color:lightblue;
            text-align: center;
        }
    </style>

CSS规则 = 选择器 + 声明块

2).选择器

选择器：选中元素——确定样式的范围

ID选择器：选中的是对应id值的元素,选中一个元素（范围太窄）

<style>
    #test{
        color:blue;
    }
</style>
<body>
     <p id="test">lorem ipsum dolor sit amet.</p>
</body>

2.元素选择器——可以选择页面上所有同名的元素（范围太广）
3. 类选择器——用的最多，非常灵活，最为推荐
一个元素可以使用多个类选择器
例：

<style>
       .red{       ——选中class为red的元素进行添加样式
        color:red;
       }
       .big-center{
         font-align:3em;
         text-align:center;
       }
    </style>
</head>
<body>
    <h1 class="red">
        现在开始添加样式
    </h1>
    <p class="big-center red">lorem ipsum dolor sit amet.</p>
    <p class="red">lorem ispum.</p>
    <p>lorem ipsum dolor sit amet.</p>
    <p>lorem ipsum dolor sit amet.</p>

3). 声明块

出现在大括号中
声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式。
属性名：属性值；

4). CSS代码书写的位置

内部样表——样式代码不多的时候，好处：少一个文件，第一次读页面时，提高浏览器响应速度，少读一个文件
书写在style元素中，style一般放在 <head> </head>中
内联样式表，元素样式表——JS过后，常用来测试
直接书写在元素的style属性中

    <h1 style="color:red;background-color: lightblue;">
        现在开始添加样式
    </h1>

外部样式表[推荐]
将样式书写到独立的CSS文件中。

<link rel="stylesheet" href="./index.css"> rel类型：样式表

link——空元素，连接一个外部的CSS文件
一般写到 <head> </head>中

1）外部样式表可以解决多页面样式重复的问题；
ctrl+鼠标单击会在新窗口打开
2）有利于浏览器缓存，从而提高页面响应速度；
3）有利于代码分离（HTML和CSS），更容易阅读和维护；

2. 常见的样式声明

小技巧：Alt+shift+F——格式化

1). color

元素内部的文字颜色——测试——右键——检查

预设值：定义好的单词

三原色，色值：光学三原色：（红、绿、蓝）,每个颜色可以使用0~255之间的数字来表示；在三个颜色中，每个颜色组合起来就是色值

rgb表示法
rgb(0,255,0)     例：color:rgb(0,255,0)
hex(16进制)表示法：
#红绿蓝(两位表示一个颜色)
#008c8c

1)淘宝红：#ff4400——如果每个颜色的个位和十位相同的话，可以只写一个，例：#f40
2)黑色：000000——000
3）白色：#ffffff,#fff
4）红色：#ff0000,#f00
5)绿：#0000fff,#00f
6）紫：#ff00ff #f0f
7)青：#00ffff #0ff
8)黄：#ffff00 #ff0
9)灰：#cccccc #ccc

2). background-color

元素背景颜色 background-color:#008c8c

3). font-size

元素内部文字的尺寸大小

1）px:像素,绝对单位，简单的理解为文字的高度占多少个像素例：font-size:10px;
2）em:相对单位，相对于父元素的字体大小在检查中：computed:表示计算过后的值(相对单位到最后都会换算成绝对单位)
在CSS中注释：/* */ ——快捷键ctrl+?
每个元素必须有字体大小
如果父元素没有设置字体大小，会继承父元素的字体大小，如果没有父元素(html)，则使用基准字号（浏览器里面设置的字号中：14个像素）

user agent,UA,用户代理（浏览器）
一个没有样式的元素是不会显示的浏览器给h1元素的默认样式大小为2em;

4). font-weight

文字粗细程度，可以取值数字，可以取值为预设值，默认值为normal相当于400；也可以设置为单词bold相当于700；
不是所有的数字是有效的，一般就是用两个默认值：normal bold

strong,默认加粗。

表示重要的，不能忽略的内容

5). font-family

文字类型：字体例：微软雅黑 arial 翩翩体
必须用户计算机中存在的字体才会有效

使用多个字体，以匹配不同的环境

<style>
    div{
        font-family:consolas(只能用于英文，中文识别不了),翩翩体-简，微软雅黑，Arial，sans-serif（默认的非衬线字体）
    }
</style>

sans-serif,非衬线字体（字体的边缘没有修饰）衬线字体（字体的边缘加了修饰，往往用于打印——宋体

6). font-style

字体样式，通常它用于设置倾斜

i元素：特殊的文本，专业术语——默认样式：倾斜字体；实际使用中，通常用它来表示一个图标(icon);
例：font-style:italic

i元素，e元素：斜体

<em>
    表示强调的内容
</em>

7). text-decoration

文本修饰，给文本加线。
例：text-decoration:overline; line-through;underline

a元素
del元素：错误的内容成语：章张口就来
s元素：过期的内容

<del>章</del>张口就来

呈现效果：

章张口就来

    <p>
        活动价格:1.8,原价:<s>998</s>
    </p>

呈现效果：

活动价格:1.8,原价:~~998~~

8). text-indent

首行文本缩进中文的话首段要缩进两个空格：text-indent: 2em

9). line-height

单位：px;

每行文本的高度，该值越大，每行文本的距离越大

设置行高为容器的高度，可以让单行文本垂直居中

<style>
    /* 单行文本垂直居中 */
    p{
      background:#008c8c;
      color:#fff;
      height: 50px;——容器高度
      line-height: 50px;
    }
</style>

多行文字设置高度时，行高可以设置为纯数字，表示相对于当前元素的字体大小

<style>
 p{
    line-height:1.5;
 }
</style>

10). width

宽度单位：px;

11). height

高度单位：px;

12). letter-spacing

文字间隙单位：em px

13). text-align

元素内部文字的水平排列方式
center right left

3.选择器

选择器：帮助你精准的选中想要的元素

1). 简单选择器

ID选择器
元素选择器
类选择器
通配符选择器

*，选中所有元素：html head body div p h1
例：CSS中：

*{
    color:red;
}

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="./CSS/test1.css">
</head>
<body>
    <div>Lorem .</div>
    <p>Lorem .</p>
    <h1>Lorem .</h1>
</body>
</html>

属性选择器（属性选择器 mdn）

根据属性名和属性值选中元素
选中所有具有href属性的元素超链接访问过了就会使用另一种颜色
例：
1)css文件中

[href]{
   color:red;
}

选中了有href属性的元素
2)CSS:

[href="https://www.sina.com"]{
   color:red;
}

选中了属性href的值为"https://www.sina.com“的元素
3)CSS:

[class~="b"]{    ——属性中包含b的元素，b与其他之间有空格
    color:green;
}

html:

 <a class="a b c d" href="https://baidu.com">百度</a>

4)[attr^=“value”]
表示带有以attr命名的属性，且属性值是以“value”开头的元素

5）[sttr$=“value”]——推荐
表示带有以attr命名的属性，且属性值是以“value”结尾的元素

6)[attr*=“value”]
表示带有以attr命名的属性，且属性值含有“value”元素
与3的区别：b与其他之间没有空格
例：
CSS文件中:

[class*="b"]{   
    color:green;
}

html文件中:

 <a class="abcd" href="https://baidu.com">百度</a>

伪类选择器——用的超级多，1)2)通常用于a元素3)4)所有元素都可以使用

选中某些元素的某种状态 按顺序来书写，不按顺序写要出问题

1). link: 超链接未访问时的状态 ——想要变回去，需要清除浏览器的访问记录
2). visited: 超链接访问过后的状态

   a:link {
    color: chocolate;
}

a:visited {
    color: rgb(113, 133, 0);
}

3). hover: 鼠标悬停状态，鼠标移动上去的状态

:hover{
    color:red;
} ——所有元素都会被hover

a:hover{
    color:red;
}——a元素会被hover

4). active：激活状态，鼠标按下状态

a:active{
    color:#008c8c;
}

爱恨法则：love hate——按顺序来书写

伪元素选择器（前面加两个冒号）
生成并选中某个元素内部第一个子元素或最后一个子元素（通常）

content：属性，只能用于before after

before after
先在span元素中生成一个子元素，这个子元素一定是第一个元素,元素名字叫before，并且选中了这个子元素

袁老师和成老师的 <span> <xx> </xx> HTML和CSS课程</span>真是不错啊

span::before {
    content: "《";    ——第一个子元素的文本内容
    color: red;
}

在span元素中生成一个子元素，这个子元素一定是最后一个元素,元素名字叫after，并且选中了这个子元素

span::after {
    content: "》";
    color: red;
}

呈现效果：
袁老师和成老师的《HTML和CSS》课程真是不错啊

2). 选择器的组合

p.red.center.big

并且
CSS中:

 p { 
    text-indent: 2em;
    line-height: 2;
}  
 p.red {
    color: red;
 }