css-选择器、常见样式、标签分类

咸鱼不咸鱼2023-08-24 9:09

CSS

CSS简介

  • 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
  • CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2]

1.层叠

  • 多个样式可以作用在同一个html的标签上

2.样式表

提供了丰富的样式修饰内容

3.作用

  • 样式丰富，功能强大
  • 内容和样式分离(解耦)

CSS的使用

1.行内样式

  • 在标签中使用style属性进行CSS样式设置
  • 样式名与样式值之间用冒号隔开
  • 样式与样式之间用分号隔开
HTML 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div style="width:500px;height:500px;background-color: rgb(90, 139, 102);"></div>
</body>
</html>

2.内部样式

复制代码 
在<head>标签中使用<style>标签进行设置
HTML 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

3.外部样式

  • 将CSS样式独立到.css的文件中
  • 再将这个文件导入到需要使用这些样式的HTML文件中，使用标签。

（1）index.html 页面

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="css/demo.css" rel="stylesheet">
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

(2) demo.css css文件

css 复制代码 
div{
    width: 200px;
    height: 200px;
    background-color: red;
}

4.三种样式的优先级 (就近原则)

  • 行内样式>(内部样式&外部样式)

5.三种样式的生效范围

  • 外部样式>内部样式>行内样式

CSS选择器

1.CSS选择器

（1）为什么需要选择器

  • 内部样式和外部样式中，需要去找到要设置样式的标签，这时就需要选择器。

（2）语法

复制代码 
选择器{

	样式名1:样式值1;

	......

}

2.基本选择器

（1）标签选择器

  • 通过标签名来获取标签
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

(2) ID选择器

  • 通过标签的ID属性的值来获取标签
  • 注意：ID属性值在当前页面上是唯一的
  • 使用 '*'
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #test{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <div id="test">div3</div>
    <div>div4</div>
</body>
</html>

（3）class选择器

  • 通过标签的class属性值来获取标签
  • 注意：class属性值可以重复
  • 使用 '.'
html 复制代码 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .demo{
            color: red;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div class="demo">div2</div>
    <div>div3</div>
    <div>div4</div>
    <p class="demo">p1</p>
</body>
</html>

（4）三大基本选择器的优先级

  • ID选择器>class选择器>标签选择器

2.其他选择器

（1）全局选择器

  • 选中当前页面上所有的标签
  • 使用 '*'
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        *{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>这是DIV</div>
    <div>这是DIV</div>
    <div class="last">这是DIV</div>
    <p>这是P标签</p>
    <p class="last">这是P标签</p>
</body>
</html>

（2）组合选择器

  • 选中当前页面上 所选中的标签
  • 使用 ','
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的选择器</title>
    <style>
        #test,p,span{
            color: red;
        }
    </style>
</head>
<body>
    <div>这是DIV</div>
    <div id="test">这是DIV</div>
    <div>这是DIV</div>
    <p>这是P标签</p>
    <p>这是P标签</p>
    <span>这是span</span>
</body>
</html>

（3）层级选择器（后代选择器）

  • 使用 空格
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的选择器</title>
    <style>
        div span{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <span>这是最里面的span</span>
        </p>
        <span>这是div的儿子span</span>
    </div>
    <span>这是div的兄弟span</span>
</body>
</html>

（4）子选择器

  • 选择定位到的标签
  • 使用 '>'
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的选择器</title>
    <style>
        div>span{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <span>这是最里面的span</span>
        </p>
        <span>这是div的儿子span</span>
    </div>
    <span>这是div的兄弟span</span>
</body>
</html>

（5）属性选择器

  • 使用：[属性名=属性值]
  • 获取所有属性名是属性值的标签
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的选择器</title>
    <style>
        [title=last]{
            color: red;
        }
    </style>
</head>
<body>
    <div title="first">这是DIV</div>
    <div>这是DIV</div>
    <div title="last">这是DIV</div>
    <div>这是DIV</div>
    <div title="last">这是DIV</div>
    <p title="last">这是P</p>
</body>
</html>

（6）伪类选择器

  • 主要针对超链接

  • a:link{}：未被访问时

  • a:visited{}：访问过后

  • a:hover{}： 鼠标悬浮时（hover也可以用于其他标签）

  • a:active{}：鼠标激活时，点击未释放

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的选择器</title>
    <style>
        a:link{
            color: black;
            text-decoration: none;
        }
        a:visited{
            color: gainsboro;
        }
        a:hover{
            color: pink;
        }
        a:active{
            color: aqua;
        }
    </style>
</head>
<body>
    <a href="http://www.taobao.com">淘宝</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的选择器</title>
    <style>
        div:hover{
            color: pink;
        }
    </style>
</head>
<body>
    <div>这是DIV</div>
</body>
</html>

CSS常见样式

1.尺寸样式

  • height：设置元素的高度

  • width：设置元素的宽度

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>这是DIV</div>
    这是测试
</body>
</html>

2.字体样式

  • font-size：字体大小
  • font-style：字体风格(取值：italic/normal...)
    • italic 斜体
    • normal : 默认值。正常的字体
  • font-family：字体类型(取值：隶书/微软雅黑...)
  • font-weight：字体粗细取值:Normal 默认值。
    • bold 粗体字符
    • bolder 更粗的字符
    • lighter 定义更细的字符
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        span{
            font-size: 42px;
            font-style: italic;
            font-family: '宋体';
            font-weight: bold;
        }
    </style>
</head>
<body>
    <span>这是SPAN</span>
</body>
</html>

3.字体样式

  • color：文本颜色（取值：colorname或#0000FF）
  • text-align：文本对齐（取值：left/right/center...）
  • text-decoration：文本装饰，取值:none默认。
    • underline下划线。
    • overline上划线
    • line-through删除线
  • line-height：设置行高
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        div{
            width: 400px;
            height: 200px;
            background-color: aquamarine;
            color: red;
            text-align: center;
            text-decoration: line-through;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div>
        这是DIV
    </div>
</body>
</html>

4.边框样式

  • border-width：边框宽度，按方向设置：border-(left/right/top/bottom)-width
  • border-color：边框颜色，按方向设置：border-(left/right/top/bottom)-color
  • border-style：边框风格，按方向设置：border-(left/right/top/bottom)-style
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            /* border: 10px black solid; */
            border-top-width: 10px;
            border-right-width: 20px;
            border-bottom-width: 30px;
            border-left-width: 40px;
            border-top-color: red;
            border-right-color: gray;
            border-bottom-color: yellow;
            border-left-color: orange;
            border-top-style: solid;
            border-right-style: double;
            border-bottom-style: dashed;
            border-left-style: dotted;
        }
    </style>
</head>
<body>
    <div>这是DIV</div>
</body>
</html>
  • border-radius：圆角边框按方向设置值：border-(top/bottom)-(left/right)-radius
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /* border-radius: 1px; */
            border-top-left-radius: 10px;
            border-top-right-radius: 20px;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 40px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

5.背景样式

  • background-color：yellow;背景颜色
  • background-image：url(img/1.jpeg);背景图片
  • background-repeat：背景是否平铺，
    • 取值:repeat-x:水平方向平
    • repeat-y :垂直方向平，
    • repeat :水平和垂直方向同时平
    • no - repeat : 不平铺
  • background-size：背景图片大小
  • background-position：center;背景偏移
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: red;
            background-image: url(img/gouza.png);
            background-size: 50px 50px;
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

6.盒子模型

  • content：内容
  • padding：内边距
  • border：边框
  • margin：外边距

（1）内边距

  • padding：内容与边框之间的距离

  • 常用样式

    • padding：
    • padding-top：
    • padding-right：
    • padding-bottom：
    • padding-left：

  • 主要作用：调整标签内容的位置，但是，会导致整个标签大小的变化

    padding:10px;代表四个方向的内边距都是10个像素

    padding:10px 20px;代表上下内边距是10像素，左右内边距是20像素

    padding:10px 20px 30px;代表上内边距10像素，右内边距20像素，下内边距30像素，左内边距同右

    padding:10px 20px 30px 40px;分别代表上，右，下，左内边距

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            border: 10px black solid;
            /* padding: 50px; */
            /* padding: 50px 100px; */
            /* padding: 50px 100px 150px; */
            padding: 50px 100px 150px 200px;
        }
    </style>
</head>
<body>
    <div>
        这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
        这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
        这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
        这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
    </div>
</body>
</html>

（2）外边距

  • margin：边框与父容器之间的距离
  • 常用样式
    • margin
    • margin-top
    • margin-right
    • margin-bottom
    • margin-left
  • 主要作用：调整标签本身相对于父标签的位置
  • 外边距的常用方式：设置标签水平居中

    • margin: auto;

      margin:10px;代表四个方向的外边距都是10个像素

      margin:10px 20px;代表上下外边距是10像素，左右外边距是20像素

      margin:10px 20px 30px;代表外内边距10像素，右外边距20像素，下外边距30像素，左外边距同右

      margin:10px 20px 30px 40px;分别代表上，右，下，左外边距

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            border: 10px black solid;
            /* margin: 50px; */
            /* margin: 50px 100px; */
            /* margin: 50px 100px 150px; */
            /* margin: 50px 100px 150px 200px; */
             
        }
    </style>
</head>
<body>
    <div>
        这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
        这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
        这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
        这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
    </div>
</body>
</html>

7.布局样式

（1）样式

  • float

（2）常用值

  • left
  • right

（3）理解

  1. 在Z轴上往人的方向移动，再进行左移和右移。
  2. 左移或右移时，碰到父标签边框或者碰到另一个浮动框的边框就会停下来。
  3. 实现框横向排列：将需要横向排列的框往同一个方向浮动就行了。

（4）出现问题

  • 由于浮动脱离了原本的平面，所以原本的位置会被后面的标签挤占掉，能不能让后面的标签不去挤占呢？

（5）解决方案

  • 清除前面浮动对后面的标签造成的影响

  • 样式：clear

  • 常用值：left，right，both

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        #first{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #second{
            width: 200px;
            height: 200px;
            background-color: gray;
            float: left;
        }
        #third{
            width: 300px;
            height: 300px;
            background-color: pink;
            float: left;
        }
        #fourth{
            width: 400px;
            height: 400px;
            background-color: purple;
            float: left;
        }
        #five{
            width: 1000px;
            height: 500px;
            background-color: black;
            clear:left
        }
    </style>
</head>
<body>
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
    <div id="fourth"></div>
    <div id="five"></div>
</body>
</html>

8.定位样式

  • 为了将标签放到指定的位置上。
  • 通常情况下，能用盒子模型解决，就不要用定位。

（1）样式

  • position

（2）常用值

  • absolute：绝对定位
  • relative：相对定位
  • fixed：固定定位

（3）调整位置的样式

  • left
  • right
  • top
  • bottom

（4）绝对样式

  • Z轴上往人的方向移动，原本的位置会空出来，后面的标签就会去挤占掉
  • 相对于页面的顶点进行移动
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        #first{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #second{
            width: 200px;
            height: 200px;
            background-color: gray;
            position: absolute;
            left: 100px;
            top: 50px;
        }
        #third{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
</body>
</html>

（5）相对定位

  • 原本的位置会一直保留
  • 相对于原来的位置进行偏移
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        #first{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #second{
            width: 200px;
            height: 200px;
            background-color: gray;
            position: relative;
            left: 0px;
            top: 0px;
        }
        #third{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
</body>
</html>

（6）固定定位

  • 原来的位置不保留
  • 相对于页面的顶点进行偏移
  • 不受滚动条的影响
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        #first{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #second{
            width: 200px;
            height: 1000px;
            background-color: gray;
        }
        #third{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        #fourth{
            width: 50px;
            height: 50px;
            position: fixed;
            right: 50px;
            bottom: 50px;
        }
    </style>
</head>
<body>
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
    <div id="fourth">
        <a href="#" style="font-size:40px;text-decoration: none;color: black;">^</a>
    </div>
</body>
</html>

9.列表修饰

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        li{
            list-style-type: none;/*取消图标*/
            /* list-style-image: url(img/gouza.png); */
            float: left;
        }
    </style>
</head>
<body>
    <ul>
        <li>橘子</li>
        <li>香蕉</li>
        <li>火龙果</li>
    </ul>
</body>
</html>

标签的分类

1.块标签

  • 独占一行，自动换行

  • 可以手动设置宽高

    ,

    ,<h*>,

      ,
        ,
      • ,,<form>......

        2.行标签

        3.行块标签

        4.标签类型的转换

        （1）样式

        （2）常用值

        htnl 复制代码 
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: green;
            display: inline-block;
        }
        img{
            width: 100px;
            height: 100px;
            display: block;
        }
    </style>
</head>
<body>
    <div>
        这是DIV
    </div>
    <span>
        这是Span
    </span>
    <img src="img/gouza.png">
</body>
</html>

        综合练习

        1.实现如下效果

        2.浮动完成

        html 复制代码 
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        li{
            list-style-type: none;
            float: left;
            background-color: green;
            color: white;
            text-align: center;
            width: 80px;
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
        }
        ul{
            width: 400px;
            margin: auto;
        }
    </style>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>天猫</li>
        <li>聚划算</li>
        <li>超市</li>
        <li>支付宝</li>
    </ul>
</body>
</html>

        3.使用标签类型转换完成

        html 复制代码 
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        li{
            list-style-type: none;
            background-color: green;
            color: white;
            text-align: center;
            width: 80px;
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
            display: inline-block;
            margin-left: -5px;
        }
        ul{
            width: 400px;
            margin: auto;
        }
    </style>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>天猫</li>
        <li>聚划算</li>
        <li>超市</li>
        <li>支付宝</li>
    </ul>
</body>
</html>

        enter;

        width: 80px;

        height: 30px;

        line-height: 30px;

        border-radius: 5px;

        }

        ul{

        width: 400px;

        margin: auto;

        }

        ```

        3.使用标签类型转换完成

        html 复制代码 
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        li{
            list-style-type: none;
            background-color: green;
            color: white;
            text-align: center;
            width: 80px;
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
            display: inline-block;
            margin-left: -5px;
        }
        ul{
            width: 400px;
            margin: auto;
        }
    </style>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>天猫</li>
        <li>聚划算</li>
        <li>超市</li>
        <li>支付宝</li>
    </ul>
</body>
</html>
        相关推荐
        汉得数字平台14 分钟前
        【鲲苍提效】全面洞察用户体验，助力打造高性能前端应用
        前端·前端监控
        花海如潮淹20 分钟前
        前端性能追踪工具：用户体验的毫秒战争
        前端·笔记·ux
        _丿丨丨_5 小时前
        XSS（跨站脚本攻击）
        前端·网络·xss
        天天进步20155 小时前
        前端安全指南：防御XSS与CSRF攻击
        前端·安全·xss
        拾光拾趣录8 小时前
        括号生成算法
        前端·算法
        拾光拾趣录9 小时前
        requestIdleCallback：让你的网页如丝般顺滑
        前端·性能优化
        前端 贾公子9 小时前
        vue-cli 模式下安装 uni-ui
        前端·javascript·windows
        拾光拾趣录9 小时前
        链表合并：双指针与递归
        前端·javascript·算法
        @大迁世界9 小时前
        前端：优秀架构的坟墓
        前端·架构
        期待のcode9 小时前
        图片上传实现
        java·前端·javascript·数据库·servlet·交互
        热门推荐
        01全球最强模型Grok4，国内已可免费使用！（附教程）02Cursor Claude 模型无法使用的解决方法03KGG转MP3工具|非KGM文件|解密音频04【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致05【无标题】06集群聊天服务器---MySQL数据库的建立07突破限制：使用 Claude Code Proxy 让 Claude Code 自由连接任意模型08绿色建筑新态势：楼宇自控助力能效提升，推动成本优化新路径09使用Ruby接入实时行情API教程10Claude Code 最新版已经支持 Windows 安装使用！