CSS学习（一）

2022-09-13 13:36:54

CSS（Cascading Style Sheets）称为层叠样式表，用于对页面进行美化。

一、应用方式

css的样式有很多种，当如果想要把css样式应用到特定标签上有三种方式：

1.1 标签中填写

适用范围：指定一个标签。【不推荐，多标签无法复用样式】

<div style="color:green;">KOBE</div>

1.2 head标签中定义

适用范围：当前页面的所有标签。【推荐，多个标签可复用样式】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
        /*给所有的div设置样式*/
        div {
            color: green;
        }
    </style>
</head>
<body>
    <div>Alex</div>
    <div>mjj</div>
</body>
</html>

1.3 在css文件中定义，适用范围：所有引入css文件的页面。

适用范围：所有引入css文件的页面。【推荐，多页面、多个标签均可复用样式】

创建css文件，如：common.css

div {
    color: green;
}

创建html文件，如：index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <link rel="stylesheet" href="common.css">
</head>
<body>
    <div>Alex</div>
    <div>老男孩</div>
</body>
</html>

以后在企业中写应用css样式时，写单页面时会把样式写在head头部；写多页面时，会把样式写入css文件，然后再在要应用的html页面引入css即可。

二、选择器

学习选择器的目的就是选中html页面中指定标签，便于以后给他应用样式。

2.1 标签选择器

在body中找到所有指定标签，例如：找到所有a标签，让他们颜色变绿。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
        a {
            color: green;
        }
    </style>
</head>
<body>
    <div>周杰伦</div>
    <a href="https://www.oldboyedu.com">Alex</a>
    <p>Alex</p>
    <ul>
        <li>
            <a href="#">朗朗</a>
        </li>
    </ul>
</body>
</html>

2.2 id选择器

在body中找一个id匹配的标签。（HTML中ID属性应唯一，相当于人的身份证号码），例如：找到id等于i1的标签，让他颜色变绿。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
        /*找到所有a标签，并应用内部数据*/
        #i1 {
            color: green;
        }
    </style>
</head>
<body>
    <div>老男孩</div>
    <div>
        <span id="i1">师范</span>
    </div>
    <p>南京</p>
</body>
</html>

2.3 class选择器

在body中找到所有class属性值匹配的标签。例如：找到所有class等于head的标签，让他绿了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
        .head {
            color: green;
        }
    </style>
</head>
<body>
    <div class="head">老男孩</div>
    <div>
        <a href="http://www.sb.com">李杰</a>
    </div>
    <p class="head">武沛齐</p>
</body>
</html>

2.4 属性选择器

在body中找到所以class属性值匹配的标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
        /* 找到class=head并且name=boy的标签 */
        .head[name="boy"] {
            color: green;
        }
    </style>
</head>
<body>
    <div class="head" name="boy" >老男孩</div>
    <div>
        <a href="http://www.sb.com">李杰</a>
    </div>
    <p class="head" name="hanshuo" >韩烁</p>
</body>
</html>

2.5 后代选择器

在body标签中根据父子关系找到指定标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
        .head ul .hat {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">老男孩</a>
    <div class="head">
        <a class="hat">北京</a>
        <ul>
            <li>沙河</li>
            <li>
                <a class="hat">沙河高晓松Alex</a>
            </li>
            <li>
                <a>沙河大烧饼Alex</a>
            </li>
        </ul>
    </div>
    <div class="head">
        <a href="#">武沛齐</a>
    </div>
</body>
</html>

2.6 选择器分组

对选择器进行分组，无需重复编写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
        /* 不推荐写法 */
        /*
        h1 {
            color: green;
        }
        .head h2{
            color: green;
        }
        h3{
            color: green;
        }
        h4{
            color: green;
        }
        */
        h1, .head h2, h3, h4 {
            color: green;
        }
    </style>
</head>
<body>
    <h1>kobe</h1>
    <div class="head">
        <h2>lebron</h2>
    </div>
    <h3>curry</h3>
    <h4>james</h4>
</body>
</html>