CSS基础

CSS

CSS（级联样式标） 控制页面是通过 CSS 规则实现的，CSS 规则由选择器和声明组成，声明由属性和属性值对组成。CSS 提供了丰富的选择器类型，包括标记选择器、类选择器、id 选择器伪类选择器及属性选择器等，能够灵活地对整个页面、页面中的某个标记或一类标记进行样式设置。

1.CSS基本语法

1.1.基本语法

基本语法
CSS (Cascading Style Sheets) 的基本语法是由选择器和一对花括号组成的. 花括号内部包含了一个或多个声明，每个声明又包含一个属性和一个值，用冒号隔开，并且以分号结束。语法结构大致如下：

selector {
  property1: value1;
  property2: value2;
  ...
}

1.2.语法说明

选择器
选择器通常是需要改变的HTML元素，可以是HTML标记名称或者属性的值，也可以是自定义的表示符。

声明块（Declaration Blocks）
一个或多个用分号分隔的声明被包裹在花括号内构成一个声明块。

规则集（Rule Sets）
一个规则集就是选择器和对应的声明块组合，它定义了页面中特定元素的样式。

属性（Properties）和值（Values）
这些是您添加到选择器中的样式。属性是你希望定义或改变的样式属性，值是你希望属性取的值。属性和值总是成对出现的，并用冒号分隔：

• 属性：这是你希望设置的样式规则的名称，比如 color, font-size, background, margin, border 等。

• 值：属性的值是你希望对该属性应用的真实样式定义。例如对于 color 属性，值可以是 red 或者十六进制颜色代码 #ff0000。

  在CSS（层叠样式表）中，有些属性可以接受多个值，同时也存在复合属性，这些特性可以使样式的声明更加简洁且易于维护。

多个属性值：

CSS中属性的多个值的备选机制，也就是“fallback”机制。在一些CSS属性中，例如font-family，可以指定一个值列表作为备选方案。这些值按顺序被浏览器尝试应用，直至发现一个可用的值。

当使用font-family时，如果浏览器不能找到或不支持列表中的第一个字体，就会尝试使用列表中的下一个字体，这个过程会一直持续到找到一个可用的字体。如果所有列出的字体都不可用，浏览器将使用系统默认字体。

以您提供的CSS为例：

.element {
    font-family: "楷体", "黑体", "Times New Roman", sans-serif;
}

这里的.element类包含一个值列表作为font-family属性的值。浏览器首先尝试使用“楷体”。如果它不可用（可能是因为用户的计算机上没有安装“楷体”字体），浏览器将尝试“黑体”，以此类推。如果上述所有字体都不可用，最终将使用一种常见的无衬线字体（sans-serif）。

这个机制提供了一种优雅的方式来确保文本的可读性和样式的一致性，即使在不同用户的设备上无法使用您指定的首选字体时也是如此。

复合属性（Shorthand Properties）：

CSS中的复合属性允许你在一个属性中设置一个或多个相关的值。这些复合属性旨在让你用更少的代码做更多的事情。例如，background 是一个复合属性，它可以让你同时设置背景颜色、背景图像、背景位置和背景重复等：

.element {
    background: #ffffff url('image.jpg') no-repeat center top;
}

margin 和 padding 属性也允许你在一个声明中设置所有四个方向的外边距或内边距：

.element {
    margin: 5px 10px 15px 20px; /* 上 右 下 左 */
}

如果这些值中有相同的，则可以进一步简化。例如，如果你想所有四个方向都有相同的外边距或内边距：

.element {
    margin: 10px; /* 所有四个方向 */
}

或者上下方向相同而左右方向相同：

.element {
    padding: 5px 10px; /* 上下5px，左右10px */
}

类似地，font 属性允许你同时设置font-family、font-size、font-weight等：

.element {
    font: italic bold 1em/1.5em "Arial", sans-serif;
}

通过利用复合属性和多值，你可以写出更紧凑、更易于理解和维护的CSS代码。不过，需要小心，因为在使用复合属性时遗留的默认值可能会导致意外的结果。举个例子，如果你只设置了background-image而没有设置background-position或background-repeat，则这些属性将会使用它们的默认值。因此，在使用复合属性时，确保你理解每个子属性的默认值，并设置所有你需要覆盖的值。

示例代码：

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

.myClass {
  background-color: #eeeeee;
  padding: 20px;
}

#myId {
  border: 1px solid black;
  margin: 5px;
}

a:hover {
  text-decoration: none;
}

在这个例子里，h1 选择器应用了蓝色字体和14px的字体大小。.myClass 对所有具有相应类的元素应用背景颜色和内边距。#myId 对特定ID的元素应用边框和外边距。a:hover 为所有超链接在鼠标悬停时移除下划线样式。

通过这样的组合，CSS规则集覆盖了网页上的不同部分，并给予它们所需的外观和格式。
CSS注释
像其他语言一样CSS允许在源代码中嵌入注释。CSS中的注释以 /* 开头，以 */ 结束，示例如下：

/* 这是一个注释 */

2.CSS选择器类型

2.1.选择器（Selectors）

选择器是HTML元素的名称，用于 “查找”（即选择）页面上您希望样式化的元素。常见选择器类型如
：标记选择器、类选择器、id选择器、伪类选择器、伪元素选择器及属性选择器。

2.2.元素选择器

也叫做标记选择器，直接使用HTML标签名称。例如：body, h1, p。

		<h1>元素选择器</h1>
		<p>李白</p>
		<p>字太白</p>
		<style>
			h1 {
				color: aquamarine;
			}

			p {
				text-align: center;
				color: bisque;
			}
		</style>

2.3.类选择器

以点字符开头，后面跟类名。例如：.classname 会选择所有带有 class="classname" 属性的HTML元素。

<h1 class="c1">类选择器</h1>
		<ol class="c2">
			<li class="c2">李白</li>
			<li class="c3">杜甫</li>
		</ol>
		<style>
			.c2 {
				color: blue;
				font-weight: bold;
			}
		</style>

标记选择器和类选择器可以联合使用，使用方式是标记选择器与类选择器直接相连，称为联合选择器，可以用来设定特定类型中的特定标记。

			/*联合选择器*/
			li.c3 {
				color: blueviolet;
				font-style: italic;
			}

			/*联合选择器*/
			h1.c1 {
				color: blueviolet;
				font-style: italic;
			}

2.4.ID选择器

id属性与class属性类似，id属性具有很多限制，只有页面上的标记(body标记及其子标记)才能具有给定的id。在HTML文件中，每个id必须唯一，且只能用于一个指定的标记，必须以字母为开头。必须以井号字符开始，后面跟ID名。例如：#idname 会选择带有 id="idname" 属性的HTML元素。

<p id="right">使用id选择器设置样式。</p>
		<style>
			/**
			 * id选择器
			 */
			#right {
				color: red;
				text-align: right;
				font-size: 20px;
			}
		</style>

2.5.属性选择器

除了以上的方法，还可以使用属性选择器基于元素的属性及属性值来选择元素。例如：[href] 会选择所有带有 href 属性的元素。

CSS属性选择器及其描述表：

选择器	描述
[attribute]	用于选取带有指定属性的标记。
[attribute=value]	用于选取带有指定属性和值的标记。
[attribute~=value]	用于选取属性值中包含指定词汇的标记（用空格分隔的字词列表）。
[attribute|=value]	用于选取带有以指定值开头的属性值的标记（属性值是value或者以“value-”开头的值）。
[attribute^=value]	匹配属性值以指定值开头的每个标记（不包含“value-”）。
[attribute$=value]	匹配属性值以指定值结尾的每个标记。
[attribute*=value]	匹配属性值中包含指定值的每个标记。

		<style type="text/css">
			[title] {
				font-size: 18px;
				color: green;
			}

			p[name="chu"] {
				font-style: italic;
			}

			p[name~="chu"] {
				font-weight: bold;
			}

			p[name^="chu"] {
				text-align: center;
			}

			p[name$="jiu"] {
				color: blue;
			}

			p[name*="jiang"] {
				color: red;
				text-decoration: underline;
			}
		</style>
		<br />
		<h3>属性选择器的应用</h3>
		<p title="p1" name="chu">[title]和[name="chu"]属性和值选择器，绿色、18px、斜体、居中</p>
		<p name="jiu chu ">[name="jiu chu "]属性值包含指定值的选择器，标粗</p>
		<p name="linchujiu">属性值以jiu结尾的蓝色</p>
		<p name="changjianghuanghe">属性值中包含jiang字符串，红色、下划线</p>

2.6.伪类选择器

用于选择元素的特定状态。例如：:hover 会选择鼠标悬停在其上的元素。

伪类名	说明
link	设置a标记在未被访问前的样式。
hover	设置a标记在鼠标悬停时的样式。
active	设置a标记在被用户激活（在鼠标点击与释放之间）时的样式。
visited	设置a标记在被访问后的样式。
first-letter	作用于块，设置第一个字符的样式。
first-line	作用于块，设置第一个行的样式表。
first-child	设置第一个子标记的样式。
lang	设置具有lang属性的标记的样式

		<h1>伪类选择器样式</h1>
		<style type="text/css">
			a:link {
				color: gray;
				text-decoration: none;
			}

			a:visited {
				color: blue;
				text-decoration: none;
			}

			a:hover {
				color: red;
				text-decoration: underline;
			}

			a:active {
				color: yellow;
				text-decoration: underline;
			}

			p:first-letter {
				font-weight: bold;
				font-family: "黑体";
				color: black;
			}

			p::first-line {
				font-size: 32px;
				;
			}
		</style>
		<p>在支持CSS的浏览器中，连接的不同状态都可以不同的方式显示，这些状态包括：
			活动状态，已被访问状态，未被访问状态和鼠标悬停状态。<br />
			注意a:hober必须置于a:link和a:visited之后，才是有效的。a:active必须置于a:hover之后，才是有效的。
		</p>
		<a href="http://www.baidu.com" target="_blank">搜索一下：百度</a>

• 伪元素选择器：用于选择元素的某个部分。例如：::before 会在元素内容的前面插入内容。

  伪元素选择器是CSS中用来选择元素的虚拟部分的特殊选择器。它们允许您为元素的特定部分应用样式，而无需在DOM中添加额外的标记。

伪元素选择器以双冒号（::）开始，常见的伪元素选择器包括：

1. ::before：用于在元素内容之前创建一个虚拟的子元素。
2. ::after：用于在元素内容之后创建一个虚拟的子元素。
3. ::first-letter：用于选择元素的首字母。
4. ::first-line：用于选择元素的第一行。
5. ::selection：用于选择用户选择的内容。

下面是一些示例，演示如何使用伪元素选择器：

/* 使用 ::before 为元素添加内容 */
.element::before {
  content: "前缀 ";
}

/* 使用 ::after 为元素添加内容 */
.element::after {
  content: " 后缀";
}

/* 使用 ::first-letter 选择首字母并应用样式 */
p::first-letter {
  font-size: 2em;
}

/* 使用 ::first-line 选择第一行并应用样式 */
p::first-line {
  color: blue;
}

/* 使用 ::selection 选择被用户选中的内容并应用样式 */
::selection {
  background-color: yellow;
  color: black;
}

请注意，伪元素选择器只能用于部分元素，如块级元素和一些行内块级元素。每个伪元素选择器都有其特定的语义和兼容性，请在使用时仔细考虑不同浏览器的支持情况。

3.选择器声明

在声明各种CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，都可以利用集体声明的方法，用 ，分割多个选择器，对风格相同的CSS选择器同时声明。

3.1.集体声明

需要对多个选择器应用相同的样式规则，可以使用逗号分隔它们，将它们放在同一个声明块中，这样您就可以一次性地对这些选择器进行集体声明。

以下是一个示例：

h1, h2, h3 {
	  color: blue;
	  font-size: 24px;
	  text-align: center;
}
h2.special,.special,#one{
	text-decoration:underline;
}

在这个示例中，h1, h2 和 h3 选择器都被放在同一个声明块内，并且它们共享相同的样式规则。这意味着所有的 h1、h2 和 h3 元素都将具有蓝色文本颜色，字体大小为 24 像素，并且居中对齐。

使用集体声明可以简化代码并提高可维护性，尤其在需要应用相似样式的选择器较多的情况下。另外，还可以通过分组选择器的方式来对不同类型的元素进行批量设置相同的样式规则。

请注意，集体声明只适用于属性和值相同的样式规则。如果选择器需要应用不同的样式规则，那么集体声明将不适用。在这种情况下，每个选择器仍需要单独的声明块。

3.2.全局声明

如果需要为全局的元素应用一组样式规则，可以使用 * 选择器来创建一个全局声明。* 选择器将匹配页面中的所有元素，并将所定义的样式应用于它们。

以下是一个示例：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

在这个示例中，* 选择器代表页面中的所有元素。它的样式规则将应用于所有元素。

在这个全局声明中，我们将设置所有元素的边距为0，填充为0，并使用 border-box 盒模型，用来更准确地计算元素的宽度和高度。

全局声明可以用于设置全局的样式重置或设置全局的盒模型等。但是，应该谨慎使用全局声明，因为它会影响到页面中的所有元素，并有可能导致样式冲突和难以调试的问题。

通常情况下，推荐使用更具体的选择器来应用样式规则，将样式的影响范围限制在需要的元素上，以提高代码的可维护性和可读性。只在确实需要时才使用全局声明，一般对于一些实际网站中的一些小型页面，例如弹出的小对话框和上传附件的小窗口等。

3.3.派生类选择器

使用派生类选择器（或称为上下文选择器），您可以通过层次关系来选择特定上下文中的元素。

一个常见的用法是使用空格后代选择器选择特定元素的后代元素。例如，p strong 选择器将选择所有位于 <p> 元素内部的 <strong> 元素。

p strong {
  color: red;
}

这个选择器会选择如下结构中的所有 <strong> 元素：

<p>This is a <strong>red text</strong> example.</p>

另一个常见的派生类选择器是直接子元素选择器（child selector），使用 > 符号。例如，.container > p 选择器将选择所有作为 .container 类元素的直接子元素的 <p> 元素。

.container > p {
  font-weight: bold;
}

这个选择器会选择如下结构中 .container 元素的直接子元素 <p>，并将它们的字体加粗：

<div class="container">
  <p>This is a bold text within the container.</p>
</div>

派生类选择器非常有用，因为它们允许您根据元素的上下文或层次关系来选择元素。通过正确使用派生类选择器，您可以更精确地选择目标元素并应用相应的样式规则。

还有一些其他的选择器

子元素选择器：用于选取某个元素的所有子元素。

.container > p {
  color: red;
}

这个例子中使用了 “大于号”，表示选择直接是 .container 元素的子元素的所有段落元素，并将它们的文本颜色设置为红色。

相邻兄弟选择器：用于选择某个元素后面的第一个指定的兄弟元素。

h2 + p {
  font-weight: bold;
}

这个例子中，选择紧接在 h2 元素后面的第一个段落元素，并将它的字体加粗。

通用兄弟选择器：用于选择某个元素后面的所有指定兄弟元素。

h2 ~ p {
  font-size: 14px;
}

这个例子中，选择所有与 h2 元素具有相同父元素的段落元素，并将它们的字体大小设置为 14 像素。

派生类选择器可以使样式更具有表现力和可读性，但是过度使用派生类选择器可能会影响页面性能，并且在复杂的页面样式中可能会导致意外的样式优先级和样式冲突问题。因此，需要谨慎使用派生类选择器。

4.CSS定义与引用

CSS 按其位置可以分为四种:
内联样式表(Inline Style Sheet)、
内部样式表(Internal Style Sheet)、
链接外部样式表 (Link External Style Sheet)以及
导入外部样式表 (Import External Style Sheet)。

4.1.内联样式表

内联样式表的 CSS 规则写在首标记内，只对所在的标记有效。几乎任何一个 HTML标记上都可以设置 style 属性。属性值可以包含 CSS 规则的声明，不包含选择器。

基本语法

<标记 style="属性1: 属性值1;属性2: 属性值2;...">修饰的内容</标记>

语法说明

• 标记是指 HTML 标记，如p、hn、body 等标记。
• 标记的 style 定义的声明只对自身起作用。
• style 属性的值可以包含多个属性/值对，每一属性/值对之间用“,”分隔。标记自身定义的 style 样式优先于其他所有样式定义。

代码示例

<p style="font-size: 20px; font-style: italic;" >这个内联样式(Inline Style)定义段落文字大小 20px，文字风格为斜体</p>
<p>这段文字没有使用内联样式</p>

4.2.内部样式表

内部样式表写在 HTML 的<head> </head>里面，只对所在的网页有效。使用<style> </style>标记对来放置CSS 规则。

基本语法

<style type="text/css">
	选择器1{属性1:属性值1;属性2: 属性值2;...}
	选择器2{属性1:属性值1;属性2: 属性值2;...}
	....
	选择器n{属性1:属性值1;属性2: 属性值2;...}
</style>

语法说明

• style 标记是成对标记，有一个 type 属性是指 style 元素以 CSS 的语法定义。
• 选择器 1、… 、选择器 n，可以定义n个选择器，再定义声明部分。
• 属性和属性值之间用冒号连接，“属性/属性值”对之间用分号分隔。

示例代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>内部样式</title>
		<style type="text/css">
			.init_css{
				border-width: 2px;/*定义边框边距*/
				border-style: solid;/*定义边框样式*/
				text-align: center; /*定义文本对齐方式*/
				color: red;
			}
			#h1_css{
				font-size: 28px;/*字体大小*/
				font-style: italic;/*字体样式*/
			}
		</style>
	</head>
	<body>
		<h1 class="init_css">h1这个标题使用类样式</h1>
		<h1 id="h1_css">h1这个标题使用id样式</h1>
		<h1>h1这个标题没有样式</h1>
	</body>
</html>

4.3.外部样式表

外部样式表是将 CSS 规则写在以.css 为后缀的 CSS 文件里，在需要用到此样式的网页里引用该 CSS 文件。一个 CSS 文件可以供多个网页引用，从而实现整体页面风格统一设置。根据引用的方式不同可以分为链接外部样式表和导入外部样式表，它们形式上的区别在于链接外部样式表通过链接 link 标记，导入外部样式表必须在内部样式表内首行通过“@import url(“外部样式文件名称”) :”来定义。

链接外部样式表

基本语法

<link type="text/css" rel="stylesheet" href="out.css">

语法说明

link 标记是单个标记，也是空标记，它仅包含属性。此标记只能存在于 head 部分，不过它可出现任何次数。link 标记的属性、取值及说明如下：

属性	取值	说明
type	MIME_type	规定被链接文档的 MIME 类型
rel	stylesheet	定义当前文档与被链接文档之间的关系
href	URL	定义被链接文档的位置

代码示例

/* styles.css */

body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
}

h1 {
  color: #333333;
}

p {
  color: #666666;
  font-size: 14px;
}

接下来，创建一个名为 “index.html” 的 HTML 文件，并保存在与 CSS 文件相同的目录中。在 <head> 标签内，添加一个 <link> 标签来链接外部 CSS 文件。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>Welcome to my website</h1>
  <p>This is a paragraph with some text.</p>
</body>
</html>

以上代码将外部 CSS 文件 “styles.css” 链接到 HTML 文件中。浏览器将加载该 CSS 文件并应用其中定义的样式规则到相应的 HTML 元素上。

确保 HTML 文件和 CSS 文件位于同一目录，或者根据需要调整 <link> 标签中 href 属性的路径，以正确链接到 CSS 文件。

导入外部样式表

基本语法

<style type="text/css">
@import url("外部样式表文件1名称");
@import url(“外部样式表文件2名称”);
选择器1(属性1:属性值1;属性2:属性值2;...)
选择器2(属性1:属性值1;属性2:属性值2;...)
....
选择器n(属性1: 属性值1;属性2: 属性值2;...)
</style>

语法说明

• 导入样式表必须在 style 标记内开头的位置定义，可以同时导入多个外部样式表，每条语句必须以“;”结束。一般导入外部样式写在最前面，内部样式写在后面。
• “@import”必须连续书写，即“@”和“impot”之间不能留有何空格。
• url(“外部样式表文件名称”中的文件名称必须是全称，含后缀名.css，如 out.css。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 在这里通过 @import 导入外部样式 */
        @import url('https://example.com/path/to/external-stylesheet.css');
        
        /* 在这里添加其他样式 */
        body {
            background-color: #f8f8f8;
            font-family: 'Arial', sans-serif;
        }

        h1 {
            color: #333;
        }

        p {
            color: #555;
        }
    </style>
</head>
<body>
    <h1>Page Title</h1>
    <p>This is a paragraph in the document.</p>
</body>
</html>

外部样式表与内联样式表和内部样式表相比，具有以下优点:

• 便于复用。一个外部 CSS 文件所定义的样式，可以被多个网页共用，
• 便于修改。修改样式只需要修改 CSS 文件，无须修改每个网页。
• 提高显示速度。样式写在网页里，网页文件变“胖”，增加网页传输的负担，降低0网页显示速度。如果某 CSS 文件已被某网页引用并加载，则其他需要引用该 CSS文件的网页时可以从缓存中直接读取该 CSS 文件，从而提高网页显示速度。

5.CSS继承与层叠

CSS 继承即子标记会继承父标记的所有样式风格，并且可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不影响父标记。值得注意的是，并不是所有的属性都会自动传给子元素，有的属性不会继承父标记的属性值，例如边框属性就是非继承的。
CSS的全称是“层叠样式表”，层叠特性和“继承”不一样，可以把层叠特性理解成“冲突”的解决方案，即对同一内容设置了多个不同类型样式产生冲突时的处理，CSS 规定如下优先级为:行内样式>id 样式>class 样式>标记样式。

当涉及到CSS的继承和层叠时，以下是一个详细的示例代码，以便演示它们之间的不同。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Inheritance and Cascading Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Example Heading</h1>
        <p>Text inside a paragraph.</p>
    </div>
</body>
</html>

CSS代码（styles.css）：

/* Global styles */
body {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
}

/* Styles for the container div */
.container {
    background-color: #f3f3f3;
    padding: 20px;
}

/* Styles for the heading */
h1 {
    color: #ff0000;
    font-size: 24px;
    font-weight: bold;
}

/* Styles for the paragraph */
p {
    font-style: italic;
    margin-top: 10px;
}

在上面的示例中，我们有一个HTML文档中的 <div> 元素，其中包含一个 <h1> 标题和一个 <p> 段落。现在让我们详细解释继承和层叠的工作原理：

1. 继承：当一个元素没有特定样式时，它会继承其父元素的样式。在这个例子中，<h1> 元素继承了 <body> 元素的字体样式（Arial, sans-serif）和字体大小（14px）。同样，<p> 元素继承了 <body> 元素的字体样式和字体大小。

2. 层叠：当一个元素有多个规则影响它时，样式层叠的规则决定了最终应用的样式。在这个例子中，<h1> 元素被定义了颜色为红色（#ff0000），字体大小为24px，字体粗细为粗体（bold）。另外，<p> 元素被定义为斜体字体样式（italic）和10px的上边距。这些样式比默认样式更具体，因此它们将覆盖继承的样式。

综上所述，最终页面的呈现将如下所示：

• <h1> 标题具有红色文本颜色，字体大小为24px，字体粗细为粗体。
• <p> 段落具有斜体字体样式和10px的上边距。
• <body> 和全局样式定义的字体样式和字体大小应用于整个页面。
• <div> 容器具有背景颜色和内边距。

这个示例展示了CSS继承和层叠的基本概念，使得不同元素能够获取样式并进行级联。