CSS样式表基础与应用

需积分: 9 1 下载量 21 浏览量 更新于2024-07-28 收藏 4.37MB PPT 举报
"CSS Basic.ppt - 介绍CSS样式表的基础知识,包括基本语法、选择符、属性值以及在网页中的应用,还涉及CSS的继承、层叠和特殊性。" CSS,即Cascading Style Sheets,是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。它允许我们将样式信息与结构内容分离,使得网页设计更加灵活和易于维护。 1. CSS基本语法: CSS由选择器和声明组成。选择器指向要应用样式的元素,声明则包含一个属性和该属性的值,用冒号分隔,属性值与分号结尾。例如: ```css h2 { font-family: "Arial", sans-serif; color: #0000FF; } ``` 这个例子中,`h2`是选择器,`font-family`和`color`是属性,而`"Arial", sans-serif`和`#0000FF`是对应的属性值。 2. CSS选择符: - 类选择器:以点号`.`开头,如`.myClass` - ID选择器:以井号`#`开头,如`#myID` - 标签选择器:直接使用HTML标签名,如`h2` - 属性选择器:根据元素的属性来选择,如`[target="_blank"]` - 伪类和伪元素:表示元素的特定状态,如`:hover`, `:active`, `::before`, `::after` 3. CSS属性值: CSS属性可以设置字体、颜色、布局、动画等多种样式。例如,`color`控制文本颜色,`font-size`设置字体大小,`padding`定义内边距,`background-image`指定背景图像等。 4. 在网页中应用CSS: - 内联样式:通过在HTML元素的`style`属性中直接写CSS,如`<h2 style="color: blue;">` - 内部样式表:在`<head>`标签内的`<style>`标签中定义CSS,适用于整个文档 - 外部样式表:将CSS代码放在单独的`.css`文件中,然后通过`<link>`标签引入到HTML文档中,可实现样式复用 5. CSS的继承、层叠和特殊性: - 继承:某些CSS属性可以被子元素继承,如字体、颜色,但像`border`、`padding`等不继承。 - 层叠:当多个规则应用于同一元素时,CSS会根据特定性(权重)和源顺序来决定哪个规则生效。 - 特殊性(Specificity):计算规则的权重,由ID选择器、类选择器、属性选择器和标签选择器的数量决定。ID选择器权重最高,其次是类选择器,再次是属性选择器和标签选择器。 6. HTML基础: - `<html>`:HTML文档的根元素 - `<head>`:包含文档元信息,如标题和样式表 - `<title>`:定义浏览器标签页的标题 - `<body>`:包含文档的可见内容 - `<h2>`:定义二级标题 - `<p>`:定义段落 7. 传统HTML的缺点: - 样式混合在内容中,不易维护 - 重复的样式代码 - 不利于多设备和多屏幕尺寸的响应式设计 通过学习和理解CSS,开发者可以创建更美观、更具交互性的网页,并提高工作效率。使用CSS3,还可以实现更多高级功能,如渐变、阴影、动画和媒体查询,以适应现代Web开发的需求。