CSS初步介绍
zhezhongyun 2024-12-01 19:22 54 浏览
CSS，是Cascading Style Sheet的缩写，即“层叠样式单”的缩写。
HTML5的规范，推荐由CSS实现页面外观的显示，HTML负责页面的基本语义。通过使用CSS，我们可以使得数据逻辑和显示逻辑分离，提高HTML文档的可读性和可维护性。
1、CSS的语法
一条CSS规则由一个选择器和一个或多个声明组成，一个声明包括一个属性和一个值。
选择器用于选择生效的HTML元素。
一组声明由花括号包含起来，属性和值之间为冒号，值后面有分号。
CSS的语法可以这样表示：
这是一条CSS规则的例子：
/*This is a css rule*/
h2{color:green;font-size:15px;}这条规则中，h2是选择器，“color:green;”和“font-size:15px;”是两条声明，color和font-size分别是两个属性，green和15px分别是这两个属性对应的值。
在CSS中，/*和*/之间的内容为注释，和C语言、Java语言的规则相同。
CSS规则比较清晰易懂，我们可以看出这条CSS规则的含义是：h2标题的颜色设置为绿色，字体大小设置为15像素。
2、CSS与HTML的关联方式
CSS的作用是为HTML提供外观展示的控制，为了让CSS生效，必须将CSS与HTML关联起来。
CSS与HTML关联起来的方式有四种：
（1）CSS作为样式文件，被HTML文件引用；
（2）CSS作为样式文件，被HTML文件导入；
（3）在HTML文件内部，CSS作为内部样式单，被HTML文件使用；
（4）在HTML文件内部，CSS作为某个元素的style属性值，被该元素使用。
上面的四种关联方式，CSS作为文件被引用或者导入的方式，一个CSS文件可以被多个HTML文件使用，重用性最高；CSS作为内部样式单，可以被单个HTML的多个元素使用，重用性中等；CSS作为某个元素的style属性值，则只能被单个元素使用，没有重用性。
3、CSS作为某个元素style属性值的情形
下面是这样的一个HTML文档例子：
<!DOCTYPE html>
<html>
<head>
<title>css001</title>
<meta charset="utf-8" />
</head>
<body>
<p style="color:green;font-size:18px;">Big green text.</p>
<p style="color:red;font-size:9px;">Small red text.</p>
</body>
</html>使用浏览器打开这个文件，效果如下：
作为style属性值的情形，CSS已经确定了被使用的元素，因此不需要提供选择器。
4、CSS作为内部样式单的情形
CSS作为内部样式单，通过<style>元素来实现，下面是一个HTML文档例子：
<!DOCTYPE html>
<html>
<head>
<title>css002</title>
<meta charset="utf-8" />
<style type="text/css">
p{
color:blue;
font-size:16px;
}
</style>
</head>
<body>
<p>Welcome to China.</p>
<p>China is a great country.</p>
</body>
</html>使用浏览器打开这个文件，效果如下：
5、CSS作为文件被导入的情形
我们先生成一个css文件table.css:
table{
background-color:gray;
border:1px solid;
width:200px;
}
table th{
border-top:1px solid;
border-left:1px solid;
}
table td{
border-top:1px dashed;
border-left:1px dashed;
}我们再定义个使用该CSS文件的HTML文件css003.html：
<!DOCTYPE html>
<html>
<head>
<title>css003</title>
<meta charset="utf-8" />
<style type="text/css">
@import "table.css";
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>崔九</td>
<td>38</td>
</tr>
<tr>
<td>郭二</td>
<td>35</td>
</tr>
</table>
</body>
</html>当我们使用浏览器打开该HTML文档时，效果如下：
6、CSS作为文件被引入的情形
这种情形和CSS作为文件被导入，效果是差不多的，只是语法上有点差别。
我们继续使用上面的table.css文件，对css003.html稍作修改，变为css004.html：
<!DOCTYPE html>
<html>
<head>
<title>css004</title>
<meta charset="utf-8" />
<link href="table.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>崔九</td>
<td>38</td>
</tr>
<tr>
<td>郭二</td>
<td>35</td>
</tr>
</table>
</body>
</html>当我们使用浏览器打开该HTML文档时，效果和上面的一样：
相关推荐
- perl基础——循环控制_principle循环
-
在编程中，我们往往需要进行不同情况的判断，选择，重复操作。这些时候我们需要对简单语句来添加循环控制变量或者命令。if/unless我们需要在满足特定条件下再执行的语句，可以通过if/unle...
- CHAPTER 2 The Antechamber of M de Treville 第二章 特雷维尔先生的前厅
-
CHAPTER1TheThreePresentsofD'ArtagnantheElderCHAPTER2TheAntechamber...
- CHAPTER 5 The King'S Musketeers and the Cardinal'S Guards 第五章 国王的火枪手和红衣主教的卫士
-
CHAPTER3TheAudienceCHAPTER5TheKing'SMusketeersandtheCardinal'SGuard...
- CHAPTER 3 The Audience 第三章 接见
-
CHAPTER3TheAudienceCHAPTER3TheAudience第三章接见M.DeTrévillewasatt...
- 别搞印象流!数据说明谁才是外线防守第一人!
-
来源：Reddit译者：@assholeeric编辑：伯伦WhoarethebestperimeterdefendersintheNBA?Here'sagraphofStea...
- V-Day commemorations prove anti-China claims hollow
-
People'sLiberationArmyhonorguardstakepartinthemilitaryparademarkingthe80thanniversary...
- EasyPoi使用_easypoi api
-
EasyPoi的主要特点：1.设计精巧,使用简单2.接口丰富,扩展简单3.默认值多,writelessdomore4.springmvc支持,web导出可以简单明了使用1.easypoi...
- 关于Oracle数据库12c 新特性总结_oracle数据库12514
-
概述今天主要简单介绍一下Oracle12c的一些新特性，仅供参考。参考：http://docs.oracle.com/database/121/NEWFT/chapter12102.htm#NEWFT...
- 【开发者成长】JAVA 线上故障排查完整套路!
-
线上故障主要会包括CPU、磁盘、内存以及网络问题，而大多数故障可能会包含不止一个层面的问题，所以进行排查时候尽量四个方面依次排查一遍。同时例如jstack、jmap等工具也是不囿于一个方面的问题...
- 使用 Python 向多个地址发送电子邮件
-
在本文中，我们将演示如何使用Python编程语言向使用不同电子邮件地址的不同收件人发送电子邮件。具体来说，我们将向许多不同的人发送电子邮件。使用Python向多个地址发送电子邮件Python...
- 提高工作效率的--Linux常用命令，能够决解95%以上的问题
-
点击上方关注，第一时间接受干货转发，点赞，收藏，不如一次关注评论区第一条注意查看回复：Linux命令获取linux常用命令大全pdf+Linux命令行大全pdf为什么要学习Linux命令？1、因为Li...
- linux常用系统命令_linux操作系统常用命令
-
系统信息arch显示机器的处理器架构dmidecode-q显示硬件系统部件-(SMBIOS/DMI)hdparm-i/dev/hda罗列一个磁盘的架构特性hdparm-tT/dev/s...
- 小白入门必知必会-PostgreSQL-15.2源码编译安装
-
一PostgreSQL编译安装1.1下载源码包在PostgreSQL官方主页https://www.postgresql.org/ftp/source/下载区选择所需格式的源码包下载。cd/we...
- Linux操作系统之常用命令_linux系统常用命令详解
-
Linux操作系统一、常用命令1．系统(1)系统信息arch显示机器的处理器架构uname-m显示机器的处理器架构uname-r显示正在使用的内核版本dmidecode-q显示硬件系...
- linux网络命名空间简介_linux 网络相关命令
-
此篇会以例子的方式介绍下linux网络命名空间。此例中会创建两个networknamespace：nsa、nsb，一个网桥bridge0，nsa、nsb中添加网络设备veth，网络设备间...
- 一周热门
- 最近发表
-
- perl基础——循环控制_principle循环
- CHAPTER 2 The Antechamber of M de Treville 第二章 特雷维尔先生的前厅
- CHAPTER 5 The King'S Musketeers and the Cardinal'S Guards 第五章 国王的火枪手和红衣主教的卫士
- CHAPTER 3 The Audience 第三章 接见
- 别搞印象流!数据说明谁才是外线防守第一人!
- V-Day commemorations prove anti-China claims hollow
- EasyPoi使用_easypoi api
- 关于Oracle数据库12c 新特性总结_oracle数据库12514
- 【开发者成长】JAVA 线上故障排查完整套路!
- 使用 Python 向多个地址发送电子邮件
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- opacity 属性 (32)
- transition 属性 (33)