前端基础知识学习（二）-CSS基础知识

最近笔者在学习有关Java后端的内容，所以很有必要去了解一下前端的内容。这篇文章主要是记录一些自己在学习过程中觉得重要和难以理解的内容和自己的一些想法。由于自己是学后端，所以对于前端的很多内容并不做深入研究，只是了解而已。本文覆盖的知识点并不全面，有些描述也并不是那么专业，仅供参考，谢谢。

一、CSS基础知识学习

学习还是推荐w3school的CSS教程。

（1）CSS概述

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一

CSS就是用来表现html等文件样式（这里的样式可简单理解为颜色、字体等等）的语言，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

（2）CSS实例

<!--!DOCTYPE用于指定文档类型-->
<!DOCTYPE html>

<!--html标签是整个html文件的开始，注意标签要成对出现-->
<html>

<!--head标签用于定义文档的头部，它是所有头部元素的容器。head中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等-->
<head>
	<title>文档的标题</title>

    <!--style用于为 HTML 文档定义样式信息,并且style要放在head中。
        type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"-->
    <!--background-color指定背景色-->
    <!--这里的padding用来指定页边距的宽度（单位是像素）在下面的代码中no2只是一个 标识，不用管，这里涉及类的用法-->
    <!--background-image用于指定背景图片-->
    <!--text-indent用于指定文本缩进-->
	<style type="text/css">
		
		h1{background-color: yellow}

		p.no1{padding: 20px;}

		body{
			background-image: url(背景1.jpg) ;
			background-attachment: fixed;
			background-size: 100%;
		}

		p.no2{text-indent: 0.5em;}

		p.no3{color: green}

	</style>
</head>

<!--body定义文档的主体-->
<body>
	<!--h+数字用于定义标题，数字代表标题的级数-->
	<h1>这是一级标题</h1>
	<h6>这是六级标题</h6>

	<!--p表示段落-->
	<p>这是第一段</p>
	<p>这是第二段</p>

	<!--br/用于换行-->
	<p>
		这是第三段。换行,<br/>换行,<br/>换行。<br/>
	</p>

	<!--b用作定义粗体文本-->
	<p>
		<b>这是一段粗体文字</b>
	</p>

	<!--img用于指定图像，其中src表示图像的路径（url），alt表示图像的替代文本
		height指定图像高度，width指定图像宽度-->
	<p>
		<img src="J:\杂物\美化\壁纸\壁纸1.jpg" alt="这是一张壁纸"
		height="200" width="300">
	</p>

	<!--内边距边框与内容之间的距离，默认情况下可理解为缩进-->
	<p class="no1">
		这是第四段且设置了内边距,距离为20。
	</p>

	<p class="no2">
		这是第五段文字且进行了缩进
	</p>

	<p class="no3">
		这是第六段且文字颜色为绿色。
	</p>


</body>

</html>

需要注意的是，用了CSS来表现HTML的格式后，就不要再用之前的HTML表现形式了，另外CSS要放在head标签内。

（3）CSS的重要概念

①CSS元素选择器

在 W3C 标准中，元素选择器又称为类型选择器（type selector）。

类型选择器匹配文档语言元素类型的名称。

类型选择器匹配文档树中该元素类型的每一个实例。

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

②选择器分组

当多个选择器都需赋有某一共同属性时，可将其放在一起，用逗号隔开即可。例如：

h2, p {color:gray;}

③类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用，也可以与其他元素结合使用。

只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。请看下面的 HTML 代码:
<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>
在使用的时候在元素后面加上“.”在加上类名即可，
h1.important{color:read;}

④ID选择器

在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。

ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
*#intro {font-weight:bold;}
在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次

ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表