CSS

站长

2022年09月08日 16:35 · 阅读数 286

CSS简介

在昨天我学完HTML基本语法之后，我今天准备加速学习CSS，加油！！！CSS指的是Cascading Style Sheet（层叠样式表），是用来控制网页外观的一项技术。首先我们得知道，HTML是用于控制网页的结构，而CSS用于控制网页的外观，JavaScript控制的是网页的行为。

CSS样式的引入方式

有三种方式：

（1）外部样式表
（2）内部样式表
（3）行内样式表

(1)外部样式表语法：

<link rel="stylesheet" type="text/css" href="文件路径" />

在这里：rel、type、href都是固定的值。(2)内部样式表

<style type="text/css">
   …………
</style>

将style标签放在head标签里面(3)行内样式表语法：

<div style="color:red;">抓紧复习</div>

在实际开发中，一般都是使用外部样式表。还有设置样式时注意他的id和class，通过这两个属性可以精准控制每个部分的样式，id不能相同，class可以相同。

CSS选择器

选择器就是为了选择你想要修改样式的地方的工具，相当于一个定位工具，精准定位。有五种最实用的选择器：（1）元素选择器（2）id选择器（3）class选择器（4）后代选择器（5）群组选择器

（1）元素选择器选择不同的标签，来修改样式，如div、p、h1等示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS选择器练习</title>
        <style type="text/css">
            p{
                color: red;
            }
        </style>
    </head>
    <body>
        <p>元素选择器</p>
        <hr>
        <div>
            <p>这是一个段落</p>
            <h4>这是一个大标题</h4>
            <div>最后一行</div>
        </div>
        <p>元素选择器</p>
        <hr>
        <p>元素选择器</p>
        <hr>
        <p>元素选择器</p>
        <hr>
        <p>元素选择器</p>
        <hr>
    </body>
</html>

显示效果： CSS （2）id选择器通过标签的属性的id来选择，id名前面加上"#"来修改样式。示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS选择器练习</title>
        <style type="text/css">
            #abc {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>元素选择器</p>
        <hr>
        <div>
            <p>这是一个段落</p>
            <h4>这是一个大标题</h4>
            <div>最后一行</div>
        </div>
        <p id="abc">元素选择器</p>
        <hr>
        <p>元素选择器</p>
        <hr>
        <p>元素选择器</p>
        <hr>
        <p>元素选择器</p>
        <hr>
    </body>
</html>

显示效果： CSS （3）class选择器通过标签的属性的class来选择，class名前面加上"."来修改样式。示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS选择器练习</title>
        <style type="text/css">
            .name {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>元素选择器</p>
        <hr>
        <div class="name">
            <p>这是一个段落</p>
            <h4>这是一个大标题</h4>
            <div>最后一行</div>
        </div>
        <p id="abc">元素选择器1</p>
        <hr>
        <p class="name">元素选择器2</p>
        <hr>
        <p class="name">元素选择器3</p>
        <hr>
        <p>元素选择器4</p>
        <hr>
    </body>
</html>

显示效果： CSS （4）后代选择器后面通过代码直接举例子示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS选择器练习</title>
        <style type="text/css">
            .name p {
                color: red;
            }
            .name1 h4{
                color: burlywood;
            }
            #name3 h3{
                color: darkgoldenrod;
            }
        </style>
    </head>
    <body>
        <p>元素选择器</p>
        <hr>
        <div class="name">
            <p>这是一个段落</p>
            <h4>这是一个大标题</h4>
            <div>最后一行</div>
        </div>
        <div class="name1">
            <p id="abc">元素选择器1</p>
            <hr>
            <p class="name">元素选择器2</p>
            <h4>这是一个大标题1</h4>
            <h4>这是一个大标题2</h4>
            <hr>
            <p class="name">元素选择器3</p>
            <hr>
            <h4>这是一个大标题3</h4>
            <p>元素选择器4</p>
        </div>
        <div id="name3">
            <p>这是一个段落</p>
            <h3>这是一个大标题</h3>
            <div>最后一行</div>
        </div>
        <hr>
    </body>
</html>

显示效果： CSS （5）群组选择器选择多个，中间以逗号隔开。示例：<!DOCTYPE html><html>

<head>
    <meta charset="utf-8">
    <title>CSS选择器练习</title>
    <style type="text/css">
        div,p{
            color:cadetblue;
        }
    </style>
</head>
<body>
    <p>元素选择器</p>
    <hr>
    <div class="name">
        <p>这是一个段落</p>
        <h4>这是一个大标题</h4>
        <div>最后一行</div>
    </div>
    <!-- <div class="name1"> -->
        <p id="abc">元素选择器1</p>
        <hr>
        <p class="name">元素选择器2</p>
        <h4>这是一个大标题1</h4>
        <h4>这是一个大标题2</h4>
        <hr>
        <p class="name">元素选择器3</p>
        <hr>
        <h4>这是一个大标题3</h4>
        <p>元素选择器4</p>
    <!-- </div> -->
    <div id="name3">
        <p>这是一个段落</p>
        <h3>这是一个大标题</h3>
        <div>最后一行</div>
    </div>
    <hr>
</body>

</html>显示效果： CSS 在这五种里面群组选择器效率最高了。