CSS-初识CSS3（非常详细）

最新推荐文章于 2024-08-23 19:30:00 发布

原创

最新推荐文章于 2024-08-23 19:30:00 发布 · 1.2k 阅读

15 ·

CC 4.0 BY-SA版权

本文介绍了CSS3的基本概念、发展历史及其优势。内容包括内容与表现的分离、样式统一修改、丰富的样式选择以及提高网页浏览速度。接着详细阐述了CSS的语法结构，包括行内样式、内部样式表和外部样式表的引入，以及链接式和导入式的区别。还讨论了CSS样式的优先级，并讲解了基本选择器（标签、类、ID）及其优先级。最后，深入探讨了CSS的高级选择器，如后代选择器、子选择器、相邻兄弟选择器、通用兄弟选择器，以及属性选择器的各种形式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS的概念

Cascading Style Sheet 级联样式表

表现HTML或XHTML文件样式的计算机语言

包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

CSS的发展史

1996年CSS1.0 --> 1998年5月CSS2.0 --> 2004年CSS2.1 --> 2010年CSS3.0

CSS的优势

1.内容与表现分离

2.网页的表现统一，容易修改

3.丰富的样式，使得页面布局更加灵活

4.减少网页的代码量，增加网页的浏览速度，节省网络带宽

5.运用独立于页面的CSS，有利于网页被搜索引擎收录

CSS基本语法结构

语法

h1 (选择器){
	font-size(属性):12px;(值)(声明)
	color:#F00;(声明)
}

style标签

<style type="text/css">
h1 {
	font-size:12px;
	color:#F00;
}
</style>

HTML中引入CSS样式

1.行内样式:使用style属性引入CSS样式

例：

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

2.内部样式表：CSS代码写在<head>的<style>标签中

<style>
        h1{color: green; }
</style>

优点：方便在同页面中修改样式

缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

3.外部样式表：①CSS代码保存在扩展名为.css的样式表中；

②HTML文件引用扩展名为.css的样式表，有两种方式：（Ø链接式）（Ø导入式）

链接外部样式表语法：

<head>
  ……
<link href（文件路径）="style.css" rel（使用外部样式表）="stylesheet" type（文件类型）="text/css" />
……
</head>

导入外部样式表语法：

<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

链接式与导入式的区别

1.<link/>标签属于XHTML，@import是属于CSS2.1

2.使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示

最低0.47元/天解锁文章

200万优质内容无限畅学