[未备份]CSS 层叠样式表 Cascading Style Sheets | CSS基础|徐奥雯整理XUAOWEN_css是cascading style sheets的缩写,又称或级联样式表,是用于控制或增强网页-优快云博客

层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。

CSS不能单独使用，必须与HTML或XML一起协同工作，为HTML或XML起装饰作用。HTML负责确定网页中有哪些内容，CSS确定以何种外观(大小、粗细、颜色、对齐和位置)展现这些元素。

CSS的三种引用方式

1. 行内样式

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 行内样式 start -->
    <p style="color: red">我为红色</p>
    <!-- 行内样式 end   -->
</body>
</html>

2. 内部样式

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内部样式 start -->
    <style>
        p {background-color: #2b99ff;}  /* 通过标签设置 */
        #a001 {background-color: #eeff00;}  /* 通过id设置 */
    </style>
    <!-- 内部样式 end   -->
</head>


<body>
    <!-- 内部样式 start -->
    <p>我的背景为蓝色</p>  <!-- 通过标签设置 -->
    <p id="a001">我的背景为黄色</p>  <!-- 通过id设置 -->
    <!-- 内部样式 end   -->
</body>
</html>

3. 外部样式 [主要]

将css写在一个单独的文件中,而不是在html文件中,在页面进行引入.

html的代码为:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 外部样式 start -->
    <link href="mystyle.css" rel="stylesheet" type="text/css"/>  <!--使用同目录的文件名为mystyle.css的CSS文件作为样式-->
    <!-- 外部样式 end   -->
</head>

<body>
    <!-- 外部样式 start -->
    <p>AAAAAAAAAA</p>  <!-- 通过标签设置 -->
    <p id="a001">BBBBBBBBBBB</p>  <!-- 通过id设置 -->
    <!-- 外部样式 end   -->
</body>
</html>

mystyle.css的代码为:

p {color:rgb(28, 153, 153)}  /* 字体颜色 */
#a001 {color:rgb(171, 214, 52)}  /* 字体颜色 */

CSS选择器

(一) 基本选择器

1. 元素选择器

选择指定标签例如:p标签设置字体颜色和背景颜色

p {color: purple; background-color: red;}

2. ID选择器

根据html中标签中唯一的ID属性选择,CSS中ID前加#号

html代码:

<p id="a001">我是红色</p>  <!--html中代码-->

CSS代码:

#a001 {color:red}

3. 类选择器

根据html中标签中的class属性选择,CSS中ID前加.号

html代码:

    <p class="c1">蒙大拿州</p>
    <p class="c1 c2">加利福尼亚州</p>
    <p class="c0 c1 c3 c5">俄勒冈州</p>

CSS代码:

.c1 {font-size: 40px;}

4. 通用选择器

对所有内容生效 *
优先级低

* {font-size: 10px;}

(二) 组合选择器

1. 后代选择器

选择指定类型标签内部的指定类型标签

html代码:

<body>
    <p id="a001">得克萨斯州</p>
    <div>
        <p class="c1">蒙大拿州</p>
        <p class="c1">加利福尼亚州</p>
        <p class="c1">俄勒冈州</p>
    </div>
</body>

CSS代码:

div p {font-size: 10px;} /* 选择div标签下的p标签 */

未完…