时间戳

首页 > 技术文章 > CSS（一）语法、导入、选择器

CSS（一）语法、导入、选择器

sxw0514 2022-02-23 11:33 原文

CSS（一）语法、导入、选择器

目录

css语法

<style>可以编写css代码，每一个声明，最好使用分号结尾
语法：
选择器{
   声明1;
   声明2;
}

css导入方式

css导入方式一(直接在html里写）

  • 内部样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<style>可以编写css代码，每一个声明，最好使用分号结尾
    语法：
    选择器{
       声明1;
       声明2;
    }
    -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>标题</h1>>
</body>
</html>

css导入方式二(单独在style文件里写)

  • 外部样式
html（文件名index.html）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<style>可以编写css代码，每一个声明，最好使用分号结尾
    语法：
    选择器{
       声明1;
       声明2;
    }
    -->
    <!--
    通过link将html与css链接
    rel:stylesheet(链接为style)
    href：链接的路径
    -->
<link rel="stylesheet" href="css/css01.css">
</head>
<body>
<h1>标题</h1>
</body>
</html>
style（文件名css01.css）
h1{
    color: red;
}

css导入方式三（行内样式）

  • 在标签元素中编写一个style属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 style="color: red">标题</h1>
</body>
</html

优先级

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

CSS选择器

作用

  • 选择页面上某一类元素或某一个元素

标签选择器

  • 会选择所有标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--所有h1都会变-->
        h1{
            color:red;
        }
    </style>
</head>
<body>
<h1>sxp</h1>
<h1>sxp</h1>
<p>sxp001</p>
</body>
</html>

类选择器

  • class名字可以重复，做到多个控制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .h01{
            color: red;
            background: blue;
        }
        .hh02{
            color: aqua;
            background: black;
        }
        .x003{
            color: blue;
            font-size: 30px;
        }
    </style>
</head>
<body>
<h1 class="h01">sxp01</h1>
<h1 class="h01">sxp02</h1>
<h1 class="hh02">sxp</h1>
<p class="x003">sxp001</p>
</body>
</html>

id选择器

  • id名字不能重复，每次只能控制一个
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #h01{
            color: red;
            background: blue;
        }
        #h02{
            color: black;
            background: blue;
        }
        #2202{
            color: aqua;
            background: black;
        }
        #x003{
            color: blue;
            font-size: 30px;
        }
    </style>
</head>
<body>
<h1 id="h01">sxp01</h1>
<h1 id="h02">sxp02</h1>
<h1 id="2202">sxp</h1>
<p id="x003">sxp001</p>
</body>
</html>

优先级

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

层次选择器

后代选择器

  • 在某个元素的后面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body ul li{
            color: #ffffff;
        }
    </style>
</head>
<body>
<ul>
    <li>sss</li>
</ul>
</body>
</html>

子选择器

  • 只能指向一代
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body>p{
            color: #ffffff;
        }
    </style>
</head>
<body>
<p>sxp001</p>
</body>
</html>

相邻选择器

  • 只有相邻的下一个发生了变化
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*只有xx3发生了变化*/
        .ss+p{
            color: red;
        }
    </style>
</head>
<body>
<p>xx2</p>
<p>xx1</p>
<h1 class="ss">sxp01</h1>
<p>xx3</p>
<p>xx4</p>
<p>xx5</p>
<p>xx6</p>
</body>
</html>

通用选择器

  • 相邻的下面所有发生了变化
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*xx3、xx4、xx5、xx6发生了变化*/
        .ss~p{
            color: red;
        }
    </style>
</head>
<body>
<p>xx2</p>
<p>xx1</p>
<h1 class="ss">sxp01</h1>
<p>xx3</p>
<p>xx4</p>
<p>xx5</p>
<p>xx6</p>
</body>
</html>

常用的伪类选择器

  • :link

    用这个可以设置未被访问的链接的样式

  • :visited

    通过这个设置已经被访问的链接的样式

  • :hover

    用于设置将鼠标悬浮在链接上的样式

  • :active

    用于设置鼠标点击链接时到鼠标松开时的样式

  • :focus

    用于设置用键盘将焦点放在链接上时的样式

  • :not()

    不包含某个选择器

属性选择器（重要）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a[class="h1"]{
            color: red;
        }
        p[class="h2"]{
            color: blue;
        }
        p[id="h4"]{
            color: aqua;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com/" class="h1">张三1</a>
<a href="http://www.baidu.com/" class="h2">张三2</a>
<a href="http://www.baidu.com/" class="h3">张三3</a>
<p class="h1">李四1</p>
<p class="h2">李四2</p>
<p class="h3" id="h4">李四3</p>
</body>
</html>

推荐阅读