javaEE 初阶 — CSS 的基本语法与引入方式

约定不等于承诺〃 2023-10-04 23:21 15阅读 0赞

#### 文章目录 ####

*  1. 基本语法规范
 *  2. 三种引入方式

## 1. 基本语法规范 ##

**CSS** 的基本语法规范是由 **选择器** 和 **若干个声明** 组成的。  
选择器选中一个元素之后，这些属性都是针对于这个元素展开的。

先来看一个没有 CSS 的效果。

<body>
        <p>
            这是一个段落
        </p>
    </body>

![7b2898e76bd140f3be4e94ecce304e24.png_pic_center][]  
  
可以看到此时只是显示出了内容，并没有什么特殊的效果，接下来我们引入 CSS代码。

这里的 **style** 标签可以放到任意位置，推荐的位置是 **head** 标签中。

<body>
    
        <style>
            p {
          
                color: red;
            }
        </style>
        
        <p>
            这是一个段落
        </p>
    </body>

上述 **style** 标签里的 **p** 标签就是一个选择器，它所描述的就是当前代码中所有的 p 标签。  
大括号里面的内容就是要针对这所有的 p 标签设置成什么样的属性。

上述的属性就是将字体颜色设置成 红色。  
  
![eb2e945345ab43c687efd31ae62fe856.png_pic_center][]  
  
大括号里的 CSS 属性可以是一个或者多个，每个属性都是一个**键值对**，  
键和值之间使用 **:** 分割。键值对之间 **;** 分割。每个键值对可以独占一行，也可以不独占一行。

下面来演示多个属性

<body>
        <style>
            p {
          
                color: red;
                font-size: 40px;
            }
        </style>
        <p>
            这是一个段落
        </p>
    </body>

上述的 **font-size** 属性就是将字体大小设置为 40像素 。  
  
![7f9793aed7ab45d0b6907b8d94ab83d8.png_pic_center][]

## 2. 三种引入方式 ##

1、**内部样式**

使用 style 标签，直接把 CSS 写到 html 文件当中，此时的 style 标签可以放到任意位置，一般建议的是放到 head 标签中。  
这个方式在上述的 基础语法规范演示过了，下面不再演示。

2、**内联样式**

使用 style 属性针对指定的元素设置样式。（此时不需要写选择器，直接写属性键值对）  
这个时候的样式只针对当前的元素有效。

<body>
        <p style="color:green; font-size: 40px;">
            这是一个段落
        </p>
        <p>
            这是另一个段落
        </p>
    </body>

上述代码里的属性只针对第一个 p 标签有效，对于第二个 p 标签无效。  
  
![f541eccb02294e99b5a650dd1ae8fb8c.png_pic_center][]  
  
当 **内部样式** 与 **内联样式** 冲突时，内联样式优先。

<!DOCTYPE html>
    <html lang="en">
    <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>我真帅</title>
    
        <style>
            p{
          
                color: red;
            }
        </style>
        
    </head>
    <body>
        <p style="color:green; font-size: 40px;">
            这是一个段落
        </p>
        <p>
            这是另一个段落
        </p>
    </body>
    </html>

![aebfcf1c3b5a4f82aed6482fe9fe7a45.png_pic_center][]  
  
可以看到内部样式只对第二个 p 标签生效。

3、**外部样式**

把 CSS 文件单独作为一个\*\*.css文件\*\*，再通过 **link** 属性让 html 引入该 css 文件。

<!DOCTYPE html>
    <html lang="en">
    <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>我真帅</title>
    </head>
    <body>
        <p>
            这是一个段落
        </p>
        <p>
            这是另一个段落
        </p>
    </body>
    </html>

以下是 .css 文件，需要注意的是如果没有通过 **link** 属性引入，是不会起到作用的。  
  
![82ac9312c84949668ad8bfbd3da82fd3.png_pic_center][]  
  
上述就是一个 **.CSS文件**。

![7395270948584a599acf1639025b86d7.png_pic_center][]  
  
可以看到在以上并没有使用 **link** 属性引入这个文件的时候，此时不会有任何的效果。  
  
link 属性也是建议写到 head 标签里面。

**href** 里填写的就是你的 .CSS 文件名。  
  
![4c016fac81f74deaae05fac4080a118d.png_pic_center][]  
可以看到此时就起了效果。

[7b2898e76bd140f3be4e94ecce304e24.png_pic_center]: https://img-blog.csdnimg.cn/7b2898e76bd140f3be4e94ecce304e24.png#pic_center
[eb2e945345ab43c687efd31ae62fe856.png_pic_center]: https://img-blog.csdnimg.cn/eb2e945345ab43c687efd31ae62fe856.png#pic_center
[7f9793aed7ab45d0b6907b8d94ab83d8.png_pic_center]: https://img-blog.csdnimg.cn/7f9793aed7ab45d0b6907b8d94ab83d8.png#pic_center
[f541eccb02294e99b5a650dd1ae8fb8c.png_pic_center]: https://img-blog.csdnimg.cn/f541eccb02294e99b5a650dd1ae8fb8c.png#pic_center
[aebfcf1c3b5a4f82aed6482fe9fe7a45.png_pic_center]: https://img-blog.csdnimg.cn/aebfcf1c3b5a4f82aed6482fe9fe7a45.png#pic_center
[82ac9312c84949668ad8bfbd3da82fd3.png_pic_center]: https://img-blog.csdnimg.cn/82ac9312c84949668ad8bfbd3da82fd3.png#pic_center
[7395270948584a599acf1639025b86d7.png_pic_center]: https://img-blog.csdnimg.cn/7395270948584a599acf1639025b86d7.png#pic_center
[4c016fac81f74deaae05fac4080a118d.png_pic_center]: https://img-blog.csdnimg.cn/4c016fac81f74deaae05fac4080a118d.png#pic_center