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>
        相关推荐
        致博软件F2BPM7 分钟前
        Element Plus和Ant Design Vue深度对比分析与选型指南
        前端·javascript·vue.js
        慧一居士1 小时前
        flex 布局完整功能介绍和示例演示
        前端
        DoraBigHead1 小时前
        小哆啦解题记——两数失踪事件
        前端·算法·面试
        一斤代码6 小时前
        vue3 下载图片(标签内容可转图)
        前端·javascript·vue
        中微子7 小时前
        React Router 源码深度剖析解决面试中的深层次问题
        前端·react.js
        光影少年7 小时前
        从前端转go开发的学习路线
        前端·学习·golang
        中微子7 小时前
        React Router 面试指南：从基础到实战
        前端·react.js·前端框架
        3Katrina7 小时前
        深入理解 useLayoutEffect：解决 UI "闪烁"问题的利器
        前端·javascript·面试
        前端_学习之路8 小时前
        React--Fiber 架构
        前端·react.js·架构
        伍哥的传说8 小时前
        React 实现五子棋人机对战小游戏
        前端·javascript·react.js·前端框架·node.js·ecmascript·js
        热门推荐
        01【无标题】02集群聊天服务器---MySQL数据库的建立03Coze扣子平台完整体验和实践（附国内和国际版对比）04Java类变量（静态变量）05KGG转MP3工具|非KGM文件|解密音频06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07深度神经网络训练过程与常见概念08使用Ruby接入实时行情API教程09DeepSeek各版本说明与优缺点分析10RestTemplate原理分析