CSS-基础

2024-04-27 15:16:00

字体：大中小

来源：转载

供稿：网友

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。例如：

h1 {color:red; font-size:14px;}

h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

CSS引入方式

行内式

<p style="background-color: rebeccapurple">hello yuan</p>

嵌入式

<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>

链接式

CSS 选择器

元素选择器，文档的元素就是最基本的选择器，例如：

html {color:black;}h1 {color:blue;}h2 {color:silver;}

通用选择器，匹配任何元素，例如：

* { margin:0; padding:0; }

类选择器，为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。例如：

语法*.important {color:red;}.important {color:red;}<h1 class="important">This heading is very important.</h1>

ID 选择器，ID 选择器前面有一个 # 号，例如：

#intro {font-weight:bold;}

属性选择器，如果希望选择有某个属性的元素，例如：

[title] {color:red;}a[href] {color:red;}a[href][title] {color:red;}planet[moons="1"] {color: red;}根据部分属性值选择：[abc~="def"] 选择 abc 属性值包含 "def" 的元素[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素

后代选择器，例如：

h1 em {color:red;}

子代选择器，只选择某个元素的子元素，例如：

h1 > strong {color:red;}

相邻选择器，如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器，例如：

h1 + p {margin-top:50px;}

选择器分组，如果您想把很多元素显示为灰色，可以使用类似如下的规则：

body, h2, p, table, th, td, PRe, strong, em {color:gray;}

CSS 伪类

CSS 伪类用于向某些选择器添加特殊的效果。语法

selector : pseudo-class {property: value}selector.class : pseudo-class {property: value}

锚伪类 在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 */

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。提示：伪类名称对大小写不敏感。

CSS 伪元素

伪元素的语法：

selector:pseudo-element {property:value;}selector.class:pseudo-element {property:value;}

“first-line” 伪元素用于向文本的首行设置特殊样式。注释：”first-line” 伪元素只能用于块级元素。注释：下面的属性可应用于 “first-line” 伪元素：font，color，background，Word-spacing，letter-spacing，text-decoration，vertical-align，text-transform，line-height，clear

“first-letter” 伪元素用于向文本的首字母设置特殊样式。注释：”first-letter” 伪元素只能用于块级元素。注释：下面的属性可应用于 “first-letter” 伪元素：font，color，background，word-spacing，letter-spacing，text-decoration，vertical-align，text-transform，line-height，clear

多重伪元素可以结合多个伪元素来使用。

“before” 伪元素可以在元素的内容前面插入新内容。下面的例子在每个 <h1> 元素前面插入一幅图片：

h1:before { content:url(logo.gif); }

“after” 伪元素可以在元素的内容之后插入新内容。下面的例子在每个 <h1> 元素后面插入一幅图片：

h1:after { content:url(logo.gif); }