CSS基础教程：层叠样式表详解
需积分: 3 199 浏览量
更新于2024-07-29
收藏 2.09MB PPT 举报
"web基础教程之CSS篇v1.0"
本教程主要涵盖了Web开发中的CSS（层叠样式表）基础知识，旨在帮助初学者理解和掌握如何使用CSS来美化和控制HTML元素的显示。由讲师董爽爽在中软培训中心进行讲授，可以通过邮件（dongshsh@chinasofti.com）或访问www.csst.com.cn获取更多相关资料。
**CSS简介**
CSS，全称Cascading Style Sheets，是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它的主要作用是定义HTML元素的外观、布局和结构，实现内容与表现的分离，使得网页设计更加灵活，且易于维护。CSS允许我们将样式信息放在外部文件中，如style.css，这极大提升了工作效率，因为可以同时管理多个页面的样式。
**CSS基本语法**
CSS的语法简洁明了，由选择器（Selector）和声明（Declaration）组成。声明由属性（Property）和对应的值（Value）构成，用冒号分隔，每条声明之间以分号结束。例如：
```
body {color: blue;}
b {color: red;}
i {color: yellow;}
```
**CSS创建**
创建CSS样式有三种方法：
1. **外部样式表**：将CSS代码放在独立的.css文件中，并通过HTML的`<link>`标签引入。
```html
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
```
2. **内部样式表**：将CSS代码写在HTML文档的`<head>`标签内的`<style>`标签中。
```html
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/dss.gif");}
</style>
```
3. **内联样式**：直接在HTML元素中使用`style`属性指定样式，优先级最高，但不推荐，因为它混淆了内容和表现。
```html
<p style="color: sienna; margin-left: 20px;">This is a paragraph</p>
```
**CSS优先级**
- 内联样式 > 内部样式表 > 外部样式表
- 优先级越高，样式覆盖优先级低的样式。
**CSS分组**
如果多个选择器有相同属性和值，可以通过分组简化代码，如：
```css
h1, h2, h3, h4, h5, h6 {
color: red;
text-decoration: underline;
font-family: "黑体";
}
```
这样，所有h1到h6的标题都将应用这些样式。
**CSS派生选择器**
派生选择器利用HTML文档的上下文关系来定义特定标签的样式。例如，如果希望所有列表项（li）在段落（p）内部有不同的颜色，可以这样写：
```css
p li {
color: blue;
}
```
这样，只在段落内的列表项会显示蓝色文本，而其他地方的列表项不受影响，保持原始样式。
通过这个web基础教程，学习者将能够理解CSS的基础概念，掌握基本语法，学会创建和应用样式表，以及理解不同样式表的优先级和分组机制，从而更好地利用CSS提升网页设计的质量和效率。
基本的语法
•
的基本语法：
•
标志 标志属性：属性值；标志属性：属性值；
标志属性：属性值；……
•
•
例如：
–
!!
–
!
–
"
剩余19页未读，继续阅读
2019-07-09 上传
2019-10-27 上传
2008-04-04 上传
2023-02-26 上传
2010-02-28 上传
2010-06-20 上传
2023-07-14 上传
2021-12-13 上传
2021-04-22 上传
wwwsd123
- 粉丝: 2
- 资源: 10
我的内容管理
展开
最新资源
- 天池大数据比赛：伪造人脸图像检测技术
- ADS1118数据手册中英文版合集
- Laravel 4/5包增强Eloquent模型本地化功能
- UCOSII 2.91版成功移植至STM8L平台
- 蓝色细线风格的PPT鱼骨图设计
- 基于Python的抖音舆情数据可视化分析系统
- C语言双人版游戏设计：别踩白块儿
- 创新色彩搭配的PPT鱼骨图设计展示
- SPICE公共代码库：综合资源管理
- 大气蓝灰配色PPT鱼骨图设计技巧
- 绿色风格四原因分析PPT鱼骨图设计
- 恺撒密码：古老而经典的替换加密技术解析
- C语言超市管理系统课程设计详细解析
- 深入分析：黑色因素的PPT鱼骨图应用
- 创新彩色圆点PPT鱼骨图制作与分析
- C语言课程设计：吃逗游戏源码分享
