初识CSS

zhangh040629

于 2024-09-03 15:00:35 发布

阅读量821

点赞数 17

文章标签： css 前端

本文链接：https://blog.csdn.net/zhangh040629/article/details/141861772

版权

css

HTML页面太丑了怎么办？

CSS 层叠样式表 (Cascading Style Sheets)

目前推荐遵循的是W3C发布的CSS3.0, 向下兼容，同样支持CSS2.0

用来表示XHTML或者XML等样式文件的计算机语言

1998年5月21日由W3C正式推出CSS2.0。

基本语法

每个CSS样式由两部分组成，即选择器和声明块。每个声明又分为属性和属性值。属性必须放到花括号中，属性与属性值用冒号连接。
每条声明用分号结束。当一个属性有多个属性值的时候，属性值与属性值不分先后顺序，用空格隔开。
在书写样式过程中，空格、换行等操作不影响属性显示。

语法：

```html
选择器 { 
    属性名: 属性值; 
    属性名: 属性值; 
}

p { 
    color: red; 
    font-size: 12px;
}

CSS内联样式表（行内样式表/嵌入式样式表）

CSS内联样式:
可以直接将样式写到标签内部的style属性中，这样的样式称为内联样式,这种样式不用填写选择器，直接编写声明即可。

写法：

<p style="color: red; font-size: 40px;">
    锄禾日当午，汗滴禾下土。
</p>

这种方式编写简单，定位准确。但是由于直接将css代码写到了html标签的内部，导致结构与表现耦合，同时导致样式不能够复用，所以这种方式我们不使用。
好的页面一般都是结构，表现，行为分离。内联样式属于结构与表现耦合，不方便后期维护，不推荐使用。
内联样式只对当前的元素中内容起作用，内联样式不方便复用。

<body>
    <!-- 
        内联样式:
            将css样式编写到元素的style属性中，这样的样式称为内联样式。
            优点：
                这种方式编写简单，定位准确。
            缺点：
                好的页面一般都是结构，表现，行为分离。
                    内联样式属于结构与表现耦合，不方便后期维护，不推荐使用。
                内联样式只对当前的元素中内容起作用，内联样式不方便复用。
        -->
    <p style="color:red ;font-size: 40px;">锄禾日当午，汗滴禾下土。</p>
    <p style="color:red ;font-size: 40px;">谁知盘中餐，粒粒皆辛苦。</p>
    <p>谁知盘中餐，粒粒皆辛苦。</p>
    <p>谁知盘中餐，粒粒皆辛苦。</p>
    <p>谁知盘中餐，粒粒皆辛苦。</p>
    <p>谁知盘中餐，粒粒皆辛苦。</p>
    <p>谁知盘中餐，粒粒皆辛苦。</p>
    <p>谁知盘中餐，粒粒皆辛苦。</p>
</body>

CSS内部样式表

内部样式表:

将css样式编写到head中的

写法：

<style type="text/css">
    p{
        color: red;
        font-size: 40px;
    }
</style>

这样使css独立于html代码，而且可以同时为多个元素设置样式，也可以使表现和结构进一步分离，它也是我们推荐使用的一种方法。
但是这种方式，样式只能对当前页面起作用，不能在多个页面中重复使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部样式表</title>
    <!-- 
        内部样式表：
            将css样式编写到head中的`<style>`标签中,
                然后通过css选择器选中指定元素，可以同时为这些元素一起设置样式。

            优点：
                这样使css独立于html代码，可以使表现和结构进一步分离，
                    而且可以同时为多个元素设置样式，它也是我们推荐使用的一种方法。
            缺点：
                这种方式，样式只能对当前页面起作用，不能在多个页面中重复使用。
    
        style属性type默认值写上"text/css"，type="text/css"，此时使用的是标签选择器
```html
    -->
    <style type="text/css">
        p{
            color: red;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <p>锄禾日当午，汗滴禾下土。</p>
    <p>谁知盘中餐，粒粒皆辛苦。</p>
    <p>谁知盘中餐，粒粒皆辛苦。</p>
    <p>谁知盘中餐，粒粒皆辛苦。</p>
    <p>谁知盘中餐，粒粒皆辛苦。</p>
    <p>谁知盘中餐，粒粒皆辛苦。</p>
    <p>谁知盘中餐，粒粒皆辛苦。</p>
</body>
</html>


### CSS外部样式表
外部样式表：

可以将所有的样式保存到一个外部的CSS文件中，然后通过<link>标签将样式表引入到文件中,这样外部文件中的css样式表将会应用到当前页面中。

写法：

<link rel="stylesheet" type="text/css" href="style.css">
这种方式将样式表放入到了页面的外部，完全使结构和表现分离，可以在多个页面中引入，最大限度的使得样式可以进行复用。同时浏览器加载文件时可以使用缓存，加快用户访问的速度提高用户体验感，所以在开发中我们最推荐使用的方式就是外部的css文件也是我们开发中使用的最多的方式。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式</title>
    <!--
        方法一： 
            link中的rel="stylesheet" type="text/css" 都是固定写法，
                属性href="相对路径地址"
            rel即relation定义关联性，stylesheet是样式表
        -->
    <link rel="stylesheet" type="text/css" href="./style.css"/>
    <!-- 
        方法二：
            使用@import url(css路径)  
    -->
    <!-- <style>
        @import url(./style.css);
    </style> -->
</head>
<body>
    <p>锄禾日当午，汗滴禾下土。</p>
    <p>谁知盘中餐，粒粒皆辛苦。</p>
    <p>谁知盘中餐，粒粒皆辛苦。</p>
    <p>谁知盘中餐，粒粒皆辛苦。</p>
    <p>谁知盘中餐，粒粒皆辛苦。</p>
    <p>谁知盘中餐，粒粒皆辛苦。</p>
    <p>谁知盘中餐，粒粒皆辛苦。</p>
</body>
</html>

扩展知识：link和import之间的区别？

本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
加载顺序的差别：当一个页面被加载的时候，link引入的css会同时被加载，而@import引用的css会等页面全部被下载完之后再加载，所以使用@import引入css样式刚开始会没有样式(出现闪烁)，网速慢的时候会更明显。
兼容性的差别：@import是CSS2.1提出的，是后来提出的，所以老的浏览器不支持，只有IE5以上才能够识别，而link标签无此问题。
样式表优先级
同一个标签，同一个属性下对比：

!import > 行内 > 内部 > 外部
其他没有的属性会被保留下来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css"/>
    <style>
        p{
            color: red !important;
            /* color: red!important; */
        }
    </style>
</head>
<body>
    <p style="color: orange;">11111111</p>
</body>
</html>