CSS样式表基础与应用

需积分: 9 80 浏览量更新于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开发的需求。

CSS 带来的好处

CSS 带来的好处：

–

CSS 使内容与格式分离，实现格式设置的重用 ;

–

CSS 使设计师在修改设计时更有效率；

–

CSS 使网页风格设计功能更强大，更精确；

–

CSS 使整个站点保持视觉的一致性；

–

CSS 使页面载入更快；

–

CSS 可以降低网站的流量费用；

–

CSS 使站点可以更好地被搜索引擎找到；

剩余34页未读，继续阅读

QWEHugh

粉丝: 0
资源: 1

CSS样式表基础与应用

WAP2.0.ppt

WAP2.0.ppt XHTML MP and WCSS

如何使电脑和手机同时访问网页时，js实现给电脑访问的网页引用css1.css样式，给手机端引用css2.css样式

bootstrap/dist/css/bootstrap.min.css in ./src/plugins/index.js如何解决

postcss.config.js

[data-xx] .css 与 .css[data-xx] 的区别

vite postcss.config.js怎么引入

php中css和css.php的区别

postcss.config.js是干啥的

postcss.config.cjs

最新资源