用户投稿什么是 CSS？
CSS (Cascading Style Sheets）是一种用来为结构化档案 (例如 HTML 和 CSS)加入样式设定的语言，又被称作阶层式样式表，意思是 CSS 有自有的结构和阶层性，并且可以被覆盖，若同一个元素被不同的样式作用，则后写入的样式会覆盖。
p { /* 同时对某个元素设定红色和绿色，则后写入的绿色会覆盖掉前面的颜色设定，最终呈现绿色 */color: red;color: green;}如何套用 CSS
CSS 的载入方式主要分为三种：行内样式、内部嵌入、外部引入，若同时对同一元素设定 CSS 时，优先度由高到低排列为：行内样式 → 内部嵌入 → 外部引入 (写法最靠近元素的优先度最高)。
行内样式 — 直接在 HTML 元素内加入 style 属性，样式只对该元素有效。
<!-- 行内样式书写位置 --><input style="这边写样式"><!-- 行内样式只对该元素有效 --><input style="background-color: red;" value="123"> <!-- 背景变为红色 --><input value="123"> <!-- 背景色不变 -->行内样式虽然可以很直觉的看到样式对哪个元素作用，但因为 CSS 样式与 HTML 程式混杂在一起会导致结构不明显难以维护，且对于相同性质的元素 (例如样式统一的按钮、输入框等)设定好的 CSS 样式无法重複套用，所以通常会用于对特定某元素加入简单的样式。
内部嵌入 — 在 HTML 档中直接使用 <style> 标籤
内部嵌入 CSS 是指在 HTML 档案中加入 <style> 标籤，并将 CSS 样式统一写在标籤中，可以有效的将样式与 HTML 元素区隔开，样式也能够被该档案的元素重複使用。不过在比较庞大的系统中，有时会出现多个相似的页面，或者需要设定系统统一的样式，例如字体、背景颜色等，这时候也一样容易造成程式冗余。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML小练习</title> </head> <style> /* style 通常会写在 head 中 */ /* 这边写 CSS */ input { background-color: red; } </style> <body> <input value="123"> </body></html>外部引入 — 在 HTML 档的 <head> 中利用 <link> 标籤引入独立的外部 .css 档
这是在专案开发中最常使用的 CSS 引入方式，可以在不同的 HTML 档案中引入 (使用) 相同的样式档案，且 CSS 写在单独的档案中，实现结构 (HTML) 与样式 (CSS) 完全分离，具有较好的可读性。
外部引入的程式会写在 <head> 中，语法为 <link rel="stylesheet" type="text/css" href"要引入的档案"> ，其中 rel 代表 relation，说明引入的档案与该 HTML 档案间的关係；type 指的是档案类型；而 href 则是我们熟悉的档案位置。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML小练习</title> <!-- 引入同个资料夹下的 test.css 样式档案 --> <link rel="stylesheet" type="text/css" href="./test.css"> </head> <body> <!-- HTML 内容 --> </body></html>除了结构清楚外，外部引入的方式也会触发浏览器的缓存机制，当我们重複使用某个 CSS 档案时，浏览器不会再次读取，而会直接使用缓存中的档案以加快页面载入速度。
CSS 撰写规则
在外部引入的 CSS 档内，或内部嵌入的 <style> 标籤中，通常会包含多个 CSS 样式组。而每一个组里面又由选择器和声明区块构成。
选择器，是指写在 { 声明 } 之前的文字，可以让浏览器知道该样式要套用在哪些 HTML 元素；在大括弧中的内容被称为声明区区块，里面包含一个或多个声明，每个声明都是一个具体的样式 (例如设定颜色、字体、边框等)，里面又分为属性名称和属性值 (写法为 属性 Property: 属性值 Propety value)。
以下面程式为例，我们可以看到 <body> 中有一个 p 元素，若我们想将 <p> 内预设的黑色文字改成红色，就必须使用 CSS。所以我们在 <head> 下方新增了一个 <style> 标籤( 内部嵌入 )，选择器写标籤名 p，并将 color 属性设定为 red，这样就可以把文字改成红色了。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML小练习</title> </head> <style> p { color: red; } </style> <body> <p>一般来说，生活中，若情人节出现了，我们就不得不考虑它出现了的事实。你真的了解情人节吗？叔本华有一句座右铭，意志是一个强壮的盲人，倚靠在明眼的跛子肩上。这让我思索了许久，现在，解决情人节的问题，是非常非常重要的。 所以，既然是这样，米歇潘在不经意间这样说过，生命是一条艰险的峡谷，只有勇敢的人才能通过。这让我深深地想到，本人也是经过了深思熟虑，在每个日日夜夜思考这个问题。问题的关键究竟为何？</p> </body></html>Tips:
CSS 注解的写法为 /* 注解内容 */
上一篇：[快速入门前端 7] 内嵌框架 (Inline Frame) 和特殊实体 (Entity)
下一篇：[快速入门前端 9] 开发人员工具
系列文章列表：[快速入门前端] 系列文章索引列表
微信扫一扫打赏
支付宝扫一扫打赏
