CSS 初步了解

CSS初步了解

一、CSS简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、CSS语法

CSS 规则集（rule-set）由选择器和声明块组成：

选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

多条 CSS 声明用分号分隔，声明块用花括号括起来。

实例：选择器 {属性:属性值;}

p {
    color: red;
    text-align: center;
}

上述代码表示如下：

p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：<p>）。
color 是属性，red 是属性值
text-align 是属性，center 是属性值

三、CSS使用方式

1.外部 CSS

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！

每个 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS简介</title>
    <!-- 外部样式在 HTML 页面 <head> 部分内的 <link> 元素中进行定义 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
     <h1>大家好啊</h1>
</body>
</html>

注意：

外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。

外部 .css 文件不应包含任何 HTML 标签。

请勿在属性值和单位之间添加空格（例如 margin-left: 20 px;）。正确的写法是：margin-left: 20px;

2.内部 CSS

如果一个 HTML 页面拥有唯一的样式，那么可以使用内部样式表。

内部样式是在 head 部分的 <style> 元素中进行定义。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS简介</title>
    <style>
        body{
            background-color: aqua;
        }
        h1{
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>大家好啊</h1>
</body>
</html>

3.行内 CSS

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS简介</title>
</head>
<body>
    <h1 style="color: red;background-color:blue;">大家好啊！</h1>
</body>
</html>

4.层叠顺序与作用域

CSS不同使用方式的优先级

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

行内样式（在 HTML 元素中）
外部和内部样式表（在 head 部分，内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高）
浏览器默认样式

行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

作用域：内联样式的作用域最小，只能应用于当前元素，其次是内部样式表，能应用于当前HTML文件，最后是外部样式表，能应用于所有链接的HTML文件。

四.CSS选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

1.三大基础选择器

1.CSS 元素选择器

元素选择器根据元素名称来选择 HTML 元素。

2.CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

3.CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS简介</title>
    <style>
        h1{
            background-color: #ccc;
        }
        #a{
            color: red;
        }
        .b{
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 id="a" class="b">大家好啊！</h1>
</body>
</html>

2.高级选择器

*　　　　　　　　  通配符
.d1,.d2{}　　　　群组选择器
.d1 .d3{}　　　　后代选择器
.d1>.d2{}　　　　子元素选择器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS简介</title>
    <style>
        *{
            font-size: 20px;
            margin: 50px;
        }
        .p1,.p2{
            color: red;
        }
        .p1 p{
            color: aqua;
            font-size: 25px;
        }
        .p2>p{
            color: #000;
        }
    </style>
</head>
<body>
    <div class="p1">
        <p>大家好啊！</p>
        <div>
            <p>大家好啊！</p>
        </div>
        <p>大家好啊！</p>
        <p>大家好啊！</p>
    </div>
    <div class="p2">
        <p>大家好啊！</p>
        <div>
            <p>大家好啊！</p>
        </div>
        <p>大家好啊！</p>
        <p>大家好啊！</p>
    </div>
</body>
</html>

五、选择器权重比较

css权重计算规则

计算css权重是有一定规则的，根据w3c制定的css规范，css权重计算规则如下：

a）、计算选择符中的id选择器的数量
一个id选择器为一个a，一个a为100
b）、计算选择符中的类选择器、属性选择器以及伪类选择器的数量
一个类选择器、属性选择器以及伪类选择器为一个b，一个b为10
c）、计算标签类型选择器和伪对象选择器的数量
一个标签类型选择器、伪对象选择器为一个c，一个c为1 。

实例

<h3 id="a" class="b">Hello PHP.CN</h3>
<style>
    /* 选择当前的h3有三种选择器: 
    标签, class, id  */
    /* 将id,class,tag,想像成一个三位整数,初始为 0, 0 ,0 */
    /* 百位   十位    个数
    id    class  tag
    0      0       0 */
    /* 百位对应: id 
    十位对应: class
    个位对应: tag  */
    /* 1,1,0 */
    #a.b {
        background-color: lightblue;
    }
    /* 0, 1, 1 */
    h3.b {
        background-color: blue;
    }
    /* 0, 1, 0 */
    .b {
        background-color: cyan;
    }
    /* 0, 0 , 2  */
    body h3 {
        background-color: yellow;
    }
    /* 0, 0 , 1  */
    h3 {
        background-color: lightgreen;
    }
</style>