1. 在没有 CSS 之前，修改 HTML 元素的样式需要为每个 HTML 元素单独定义样式属性，不方便，所以 CSS 应运而生。
2. 使用 CSS 可以将 HTML 页面的内容与样式分离。HTML中内容与样式原本杂糅在一块儿，若使用CSS来控制样式，就可以做到样式的统一管理，从而更好的控制页面，提高了 web 开发的工作效率(针对前端开发)。

3.CSS的语法 :

格式如下：（主要包含选择器和声明两部分）

选择器 {

声明1;

声明2;

声明3;

......

}

注意事项：
1° 声明由属性和属性值组成，属性值可以由程序⚪指定。

2° 除最后一条声明外，所有声明都必须加分号“;”结尾，最后一条声明可不加分号。

3° 当运行页面时，选择器对应的标签就会被渲染和修饰。

4° 可以通过修改颜色属性或大小属性来调试CSS。

5° CSS中的注释格式为: /* ...... */。

6° CSS语句要写在HTML页面——<head></head>标签中的<style></style>子标签中。

二、CSS样式

1.字体颜色：

1° 说明

颜色可以写 英文 的颜色名，eg : cyan ；也可以写 rgb值 ，eg : rgb(0 255 255)；还可以用 十六进制表示值 比如 #00FFFF。

使用格式：

color : cyan;

color : #00FFFF; （ 16进制的方式使用频率最高 ）

color : rgb(0,255,255);

2° 演示

代码如下 :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>color demo</title>
    <style type="text/css">
        div {
            width:250px;
            height: 75px;
            color:cornflowerblue;
            background-color: rgb(0,255,255);
        }
    </style>
</head>
<body>
  <div>
      Hello, my name's Cyan_RA9
  </div>
  <br/>
  <div>
      I like play basketball.
  </div>
  <br/>
  <div>
      What about you?
  </div>
</body>
</html>

运行效果 :

2.边框 :

1° 说明

边框使用格式 :

<head>

<style type="text/css">

选择器 {

border : 2px solid darkcyan;

}

</style>

</head>

注意事项：
①2px代表边框的宽度，也可以使用百分比的形式（eg : 50%）；

②solid表示边框为实线，虚线用dashed表示；

③对border属性修饰的属性值没有顺序要求，属性之间用空格隔开。

2° 演示

代码如下 :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border demo</title>
    <style type="text/css">
        div {
            width: 50%;
            height: 100px;
            border: 2px darkcyan solid
        }
    </style>
</head>
<body>
    <div>
        Everyone wants to succeed, but what would you do if you failed?
    </div>
</body>
</html>

运行效果 :

3.背景颜色 :

1° 说明

使用格式:

        <head>
                <meta charset="UTF-8">
                <title>背景</title>
                <style>
                        div {
                                width: 175px;
                                height: 50px;
                                background-color: blue
                        }
                </style>
        </head>

2° 演示

代码如下 :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background_color demo</title>
    <style type="text/css">
        div {
            width:400px;
            height:75px;
            background-color: pink
        }
    </style>
</head>
<body>
    <div>
        When faced with a big challenge where potential failure lurk at every corner,
    </div>
    <div>
        Maybe you've heard this advice before---be more confident, and this is
    </div>
    <div>
        what you think when you hear it : if only it were that simple.
    </div>
</body>
</html>

运行效果 :

4.字体样式 :

1° 说明

        1. font-size: 指定字体大小，可以按照像素大小

         2. font-weight : 指定是否是粗体（粗体为bold）

         3. font-family : 指定字体类型（需要该电脑的字体库中有对应的字体）

4. color : 指定字体颜色

2° 演示

代码如下 :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font-style demo</title>
    <style type="text/css">
        div {
            border: 2px purple dashed;
            width: 400px;
            height:100px;
            font-size: 30px;
            font-weight: bolder;
            font-family: consolas;
            color:darkgreen
        }
    </style>
</head>
<body>
    <div>
        but,what is confidence?
    </div>
</body>
</html>

运行效果 :

5.div块居中 :

1° 说明

margin-left : auto;

margin-left : auto;

两个都写，可以达到块居中的效果。

2° 演示

代码如下 :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div block center Demonstration</title>
    <style type="text/css">
      div {
          border: 5px darkcyan solid;
          width: 500px;
          font-size: 20px;
          font-weight: bold;
          font-family: consolas;
          color:hotpink;
          margin-left: auto;
          margin-right: auto
      }
    </style>
</head>
<body>
    <div>
        Take the belief that you're valuable,worthwhile and capable,<br/>
        also known as self-esteem, adding the optimism that comes when <br/>
        you're certain of your abilities, and then empowered by these, <br/>
        act courageously to face the challenge head on.
    </div>
</body>
</html>

运行效果 :

6.div文本居中 :

1° 说明

text-align:center;

可以使块中的文本居中显示

2° 演示

代码如下 :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div block center Demonstration</title>
    <style type="text/css">
      div {
          border: 5px darkcyan solid;
          width: 550px;
          font-size: 20px;
          font-weight: bold;
          font-family: consolas;
          color:hotpink;
          margin-left: auto;
          margin-right: auto;
          text-align: center
      }
    </style>
</head>
<body>
    <div>
        this is confidence. It turns thoughts into action,<br/>
        so where does confidence even come from?
    </div>
</body>
</html>

运行效果 :

7.超链接去下划线 :

1° 说明

text-decoration : none;

该声明可以去掉文本的修饰（包括超链接的下划线）

2° 演示

代码如下 :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>href none decoration demo</title>
    <style type="text/css">
        a {
            border: 2px black dashed;
            text-decoration:none;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com/" target="_blank">点我去百度捏</a>
</body>
</html>

运行效果 :

8.表格细线 :

1° 说明

border-collapse : collapse;

可以设置表格内边框为细线。

2° 演示

代码如下 :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table line demonstration</title>
    <style type="text/css">
        table, tr, th, td {
            border: 2px pink solid;
            width: 300px;
            border-collapse:collapse;
            text-align: center
        }
        table {
            border: 5px cornflowerblue solid;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Cyan</td>
            <td>21</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Five</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

运行效果 :

9.无序列表去样式 :

1° 说明

list-style:none;

可以去除无序列表的样式。

2° 演示

代码如下 :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>unorderedList</title>
    <style type="text/css">
        ul {
            width: 500px;
            border: 3px solid cornflowerblue;
            list-style: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>持国天王</li>
        <li>增长天王</li>
        <li>广目天王</li>
        <li>多闻天王</li>
    </ul>
</body>
</html>

运行效果 :

三、CSS引入方式

1.行内式：

1° 说明

直接使用HTML标签的style属性引入CSS。

2° 演示

代码如下 :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The way to introduce CSS No.1</title>
</head>
<body>
    <div style="border: 2px darkcyan dashed; width:500px;text-align: center;font-family: consolas">
        Two, how you're treated? This includes the social pressure of your environment.
    </div>
    <br/>
    <div style="border: 2px darkcyan dashed; width:500px;text-align: center;">
        And three, the part you have control over:the choice you make, the risk you take,<br>
        and how you respond to challenges and setbacks.
    </div>
    <br/>
    <div style="border: 2px darkcyan dashed; width:500px;text-align: center;">
        It isn't possible to completely untangle these three factors, but the personal <br/>
        choices we make certainly play a major role in confidence development.
    </div>
</body>
</html>

运行效果 :

3° 问题分析

1.标签数量很多时，或样式使用种类很多时，造成代码量庞大，代码臃肿。
2.代码拥挤在一行，可读性差；
3.CSS 代码的复用率不高；可维护性差。

2.写在head标签的style子标签中 :

1° 说明

使用选择器来修饰对应的内容。

eg :

<head>



<syle type="text/css">

div {

/*.......*/

}

span {

/* ...... */

}

ul {

/* ...... */

}

</style>

</head>

2° 问题分析

1.只能在同一页面内复用，代码维护不方便；
2.实际项目中会有很多页面，需要到对应页面去修改，工作量大。

3.以外部文件的形式引入 :

1° 说明

在HTML文件外部另外写一个CSS文件，然后以链接的形式将外部的CSS文件引入到HTML页面中。

需要用到<link/>单标签。<link/>单标签中有两个属性很重要——
①href : CSS文件的路径；

②rel : 表示关联（必须有该属性）。rel="stylesheet"表示关联了样式表，即CSS文件。

PS :
Δ实际开发中，推荐第三种方式！

2° 演示

首先创建CSS文件，如下图所示 :

demo.css代码如下 :


div {
    border: 3px plum solid;
    width:450px;
    background-color: cornflowerblue;
    font-family: consolas;
    font-weight:bold;
    text-align:center
}
 
span {
    font-size: 20px;
    color: peru;
}

HTML文件代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The way to introduce CSS No.3</title>
    <link href="../../../css/demo.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <div>
        So,by keeping in mind some practical tips, we do actually have the power
        to cultivate our own confidence.
    </div>
    <span>tip one---a quick fix</span>
</body>
</html>

运行结果 :

四、CSS选择器

1.元素选择器 :

1° 介绍

1.元素选择器是CSS最常见的一种选择器。换句话说，HTML文档的元素就是最基本的选择器。
2. CSS (元素/标签)选择器通常是某个 HTML 元素，比如 p、h1、a、div 等。

2° 演示

上文中用到的选择器全部是元素选择器（即直接以HTML元素名称来指定渲染对象）。

2.ID选择器 :

1° 介绍

元素选择器会修饰对应类型的所有元素；如果想单独修饰某个元素，可以使用id选择器。

id 选择器可以为标有特定 id 的 HTML 元素设置指定的样式；使用 id 选择器前，必须先在要修饰的标签中添加 id 属性，id属性值是唯一的，不能重复。
在<style> 标签中使用指定 id 选择器时，以 "# + id属性值" 来定义。

2° 演示

代码如下 :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id selector</title>
    <style type="text/css">
        #div1 {
            border:3px cornflowerblue dashed;
            background-color: bisque;
            width: 450px;
            font-weight: bold;
            font-family: consolas;
            text-align: center;
        }
        #div2 {
            border:3px hotpink dashed;
            background-color: cornflowerblue;
            width: 550px;
            font-weight: bold;
            font-family: consolas;
            text-align: center;
        }
        #div3 {
            border:3px darkblue dashed;
            width: 300px;
            font-weight: bold;
            font-family: consolas;
            font-size: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="div1">
        There are a few tricks that can give you immediate confidence boost in a short term,
        picture your success when you beginning a difficult task,
    </div>
    <br/>
    <div id="div2">
        something as simple as listening to music with deep bass,it can promote
        feelings of power, you can even strike a powerful pose or give yourself a pep talk.
    </div>
    <br/>
    <div id="div3">
        Tip two---believe in you ability to improve.
    </div>
</body>
</html>

运行效果 :

3.类选择器 :

1° 介绍

如果既不想修饰某类元素的全部整体，也不想单独修饰某类元素的单个个体，就可以考虑使用类选择器，类选择用于修饰某类元素的部分元素（一部分）。

类选择器与id选择器在使用上有以下几点区别——
①类选择器在使用前，也需要在要修饰的元素中添加属性，只不过是class属性；

②class属性的值可以重复。

③在<style> 标签中使用指定类选择器时，以". + class属性值"的形式来定义。

2° 演示

代码如下 :


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>class selector demo</title>
    <style type="text/css">
        .c1 {
            border: 2px palegreen solid;
            background-color: bisque;
            width: 450px;
            font-family: consolas;
        }
    </style>
</head>
<body>
    <div class="c1">
        If you're looking for a long-term change,consider the way you think about
        your abilities and talents.Do you think there fixed at birth? or that they
        can be developed like a muscle.
    </div>
    <div>
        There beliefs matter because they can influence how you react when you're
        faced with setbacks.
    </div>
    <div class="c1">
        If you have a fixed mindset,meaning that you think your talents are locked in place,
        you might give up, assuming you've discovered something you're not very good at.
    </div>
</body>
</html>

运行效果 :

4.组合选择器 :

1° 介绍

组合选择器可以让多个选择器共用同一个 css 样式代码（样式公用）。

格式如下 :

选择器1，选择器2...选择器n {

声明1;

......

}

2° 演示

代码如下 :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>combination of selector</title>
    <style type="text/css">
        p,#pDemo,.pDemo2 {
            border:3px cornflowerblue solid;
            background-color: palegreen;
            width: 450px;
            font-family: consolas;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>
        But if you have a growth mindset and think your abilities can improve,
        a challenge is an opportunity to learn and growth.
    </p>
    <span id="pDemo">
        Neuroscience supports the growth mindset.
    </span>
    <br/><br/>
    <div class="pDemo2">
        The connections in your brain do get stronger and grow with study and practice.
    </div>
</body>
</html>

运行效果 :

5.选择器优先级 :

1° 说明

同多种选择器同时存在时，优先级从高到低如下 :

行内样式 > id选择器 > 类选择器 > 元素选择器

巧记 :

贴身 > 个体 > 部分 > 全部

五、CSS总结

CSS虽然只是前端基础三件套之一，但CSS的内容其实很多很丰富。本篇博文中仅仅列举了最常用的一些CSS样式和CSS的一些重要知识点，还有很多知识没有总结到，因为up以后端为主。

除了一些常用样式外，CSS的三种引入方式，以及几种选择器（元素，id，class）的使用都要掌握。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/345128