CSS介绍

最新推荐文章于 2024-07-08 10:56:49 发布

PiiPiiKity

最新推荐文章于 2024-07-08 10:56:49 发布

阅读量817

点赞数 1

分类专栏：第一部分 HTML+CSS 文章标签： css html

本文链接：https://blog.csdn.net/weixin_44790641/article/details/113501772

版权

第一部分 HTML+CSS 专栏收录该内容

27 篇文章

订阅专栏

一、定义：

Cascading Style Sheets，层叠样式表，又叫级联样式表，简称样式表，文件后缀：.css

二、作用：

1.用于HTML文档中元素样式的定义，实现了将内容与表现分离；
2.提高代码的可重用性和可维护性

三、特点：

1.继承性：子元素可以继承父元素的样式
2.层叠性：一个元素可以设置多个样式
3.优先级：优先级大的样式生效；
优先级相同时，后写的样式生效
*注意：
1）css由浏览器解析执行，由上往下，由左往右的顺序；
2）css不区分大小写（建议小写）

四、语法：

属性：属性值

五、注释：

/*  注释的内容 */

*注释之间不能相互嵌套

六、引入方式：

1.行内样式（内联方式）——只对当前元素生效

1）方式：通过HTML的style属性
2）语法：<标签 style=“css样式”></标签>
3）实例：

<div style="width: 300px;height:300px;background-color:pink"></div>

2.内部样式——只对当前页面生效

1）用法：写在head标签里：
2）标签：

    <style>
        选择器{
            属性：属性值；
            属性：属性值；
            属性：属性值；
            属性：属性值；
        }
    </style>

3）选择器作用：选中写样式的元素

3.外部样式——内容与表现完全分离

1）用法：
(1)新建.css文件
(2)在HTML页面中link引入：

<head>
    <link rel="stylesheet" href="css/style.css">
</head>

2）优势：实现了内容与表现的完全分离，提高了代码的可重用性和可维护性

*注意：
（1）一个HTML可以引入多个css文件
（2）同一个css文件可以被多个HTML引入
（3）三种引入方式的优先级：
行内样式>内部样式（外部样式）
内部方式和外部方式优先级相同，后写的样式生效

4.导入式

1）用法1：

    <style>
        @import "css/style.css"
    </style>

用法2：

    <style>
        @import  url ("css/style.css");
    </style>

2）@import和link的区别：
（1）加载顺序不同：@import先加载HTML文件，再加载css文件；link同时加载HTML和css文件
（2）@import只能引入css文件；link还可以引入其他内容（比如icon）
（3）@import有兼容性（IE5以上支持）；link没有兼容
（4）JavaScript操作DOM时，只能操作link引入的css
（5）@import会增加页面的http请求