2021-01-06

最新推荐文章于 2025-12-17 13:51:29 发布

原创最新推荐文章于 2025-12-17 13:51:29 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

本文介绍了CSS的发展历程，包括CSS1.0到CSS3的演变，强调了CSS在网页设计中的作用。文章详细阐述了CSS的基本语法结构，如选择器和声明的使用，并提供了style标签的内联样式、内部样式和外部样式的应用示例。同时，讨论了不同样式导入方式的优先级，以及行内样式、内部样式和外部样式的区别。最后，分析了@import导入样式的特点，指出其在网速较慢时的影响。

CSS样式与选择器

CSS全称为层叠样式表（Cascading Style Sheet）,通常又称为风格样式表（Style Sheet），它是用来进行网页风格设计的。使用层叠样式表，还可以精确地定位网页元素位置，美化网页外观。

一、CSS发展史

1.1996年12月推出了CSS规范的第一版，即CSS1.0版本。
2.1998年5月W3C发布了CSS的第二版，即CSS2.0版本。（DIV块 + CSS,HTML与CSS结构分离的思想，网页变得简单，SEO）
3. 2004年W3C升级了CSS2.0版本，变为CSS2.1版本。（浮动，定位）
4.2010年W3C推出了CSS3版本，它包括CSS2.1的所以功能，是目前最新版。（圆角,阴影，动画…… 浏览器兼容性~）

css的基本语法结构

1.CSS规则由两部分组成，选择器和声明。

2.声明必须放在大括号中，声明可以是多条。

3.每条声明由一个属性和值组成，属性和值用冒号分开，每条语句以英文分号结尾。

注意：在CSS一条声明中，基于W3C标准规范考虑，建议都以";"结束。
选择器

style标签

style标签建议写在head标签内
在style标签里面可以写css的样式
这是没有和html代码分离的写法（不建议，练习的时候代码少可以这样写）
在这里插入图片描述

二、CSS的3种导入方式

1.优先级

优先级：行内样式>内部样式>外部样式

行内样式

行内样式就是在HTML标签中直接使用style属性设置CSS样式。

<h1 style="color:red;">style属性的应用<h1>
<p style="font-size:14px;color:green;">直接在HTML标签中设置样式</p>

内部样式

把CSS代码写在< head >的< style >标签中，与HTML内容位于同一个HTML文件中。

外部链接样式

…… ……

导入样式

总结

链接式和导入式的区别

它们的本质都是将一个独立的CSS样式表引用到HTML页面中，但是两者还是有一些
标签属于XHTML范畴。而@import是CSS2.1中特有
使用时先将外部CSS文件加载到网页中再进行显示，即使网速再慢也是一样的效果。

使用@import导入的CSS文件，浏览页面时先将HTML结构呈现出来，再把外部CSS文件加载到网页当中，最终的效果与使用效果一样，网速较慢时会先显示没有CSS布局的HTML网页。