关于css:CSS

73次阅读

共计 2661 个字符，预计需要花费 7 分钟才能阅读完成。

在昨天我学完 HTML 根本语法之后，我明天筹备减速学习 CSS，加油！！！
CSS 指的是 Cascading Style Sheet（层叠样式表），是用来管制网页外观的一项技术。
首先咱们得晓得，HTML 是用于管制网页的构造，而 CSS 用于管制网页的外观，JavaScript 管制的是网页的行为。

有三种形式：

（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 能够雷同。

选择器就是为了抉择你想要批改款式的中央的工具，相当于一个定位工具，精准定位。
有五种最实用的选择器：
（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>

显示成果：

（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>

显示成果：

（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>

显示成果：

（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>

显示成果：

（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>
显示成果：

在这五种外面群组选择器效率最高了。

正文完