CSS简介_css简介 csdn-CSDN博客

本文链接：https://blog.csdn.net/weixin_47782618/article/details/123961973

1. 为什么使用CSS

美观一致的页面

内容与格式分离，提高代码的可重用性和可维护性

2. CSS样式表特征

① 继承性：被包含在内部的标签可以用于外部标签的样式，如line-height，有些则不能继承，如margin。

② 层叠性：层叠就是对同一元素多次设置同一样式，这将使用最后一次设置的值。

③ 优先级：样式定义冲突时，按照不同样式规则的优先级定义样式。

内联样式>内部样式=外部样式

3. CSS的引入方式

3.1 内联样式

<p style="background: red;">CSS<p>

可重用性和可维护性低。

3.2 内部样式

<head>
    <style> h1 { background: red; } </style>
</head>

单个页面的具有可重用性和可维护性，多个页面可重用性和可维护性低。

3.3 外部样式

<link rel="stylesheet" type="text/css" href="xxx.css">

3.4 导入式

<style type="text/css"> 
    @import url("css 文件路径"); 
</style>

3.5 外部样式和导入式的区别

① @import是CSS提供加载样式的一种方式，只能用于加载CSS。link标签除了可以加载CSS外，还可以做很多其他的事，如定义rel连接属性等。

<link rel="icon" src="">

rel还可以用来设置网页的小图标。

② 加载顺序的区别。当一个页面被加载时，link引用的CSS会同时被加载，@import引用的CSS会在整个页面全部被下载完再加载。

③ 兼容性的区别。@import需要IE5以上才能识别，link则不需要。

④ 使用dom控制样式的区别。当使用js控制dom去改变样式的时候，只能使用link标签。因为dom改变样式的时候，@import的CSS可能还未加载完成。

⑤ 使用@import会增加HTTP请求，影响页面加载速度。

4. 基础选择器

4.1 全局选择器

*{ margin: 0; padding: 0; }

优先级最低

4.2 元素选择器

p{ font-size:14px; }

4.3 类选择器

<head>
    <style>
        .oneclass{ width:800px; }
        .twoclass{ color:red; }
    </style>
</head>
<body>
    <h2 class="oneclass twoclass">你好</h2>
</body>

4.4 id选择器

<head>
    <style>
        #myid{ width:800px; }
    </style>
</head>
<body>
    <h2 id="myid">你好</h2>
</body>

4.5 合并选择器

.header,.footer{height:300px;}

4.6 交集选择器

p.p1{color:red;}

4.7 选择器的优先级

元素选择器的权重为1，类选择器的权重为10，id选择器的权重为100，内联样式的选择器为1000

5. DIV+CSS布局

① 符合W3C标准，不易被淘汰。

② 页面载入速度加快。大部分代码写在了CSS中，页面体积容量变小。

③ 修改设计时更有效率。

④ 相较于传统的table，搜索引擎更加友好。