CSS 简介

css 是层叠样式表，样式表定义如何显示 HTML 元素。

什么是 HTML?

HTML 是超文本标记语言，浏览器是可以直接解析的，通俗的讲就是 web 页面。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>pangugle.com教程</title>
  </head>
  <body>
	<p>这是一个段落。</p>
  </body>
</html>

<meta charset="UTF-8"/> 设置编码方式 charset="UTF-8"。中文网站需要设置编码方式，不然页面容易乱码。这是个空元素
<!DOCTYPE html> 表示声明为 HTML5 文档。大部分网站都是用 HTML5，如百度、新浪、微博。

我们常说 p 标签，指的是 <p>。
而说 p 元素，指的是含了开始标签、内容和结束标签 :

< 标签 > 内容 </ 标签 >

<p>这是一个段落</p>

CSS - 创建

CSS 由选择器和声明构成。
以下示例中，p 是选择器，text-align: center; 是样式声明 :

p{ 
  text-align: center; 
}

CSS - 在 HTML 添加 CSS

内联样式 - 在 HTML 元素中使用 style 属性
内部样式 - 在 HTML 文档头部 <head> 区域使用 <style> 元素来包含css
外部引用 - 使用 <link> 链入外部 css 文件

注：最好的方式是通过外部引用 css 文件，方便项目维护。

实例

css.css 文件 :

p{ text-align: center; color : blue;}

index.html 文件 :

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8" />
		
	<!-- 使用 <link> 元素外部引用 -->
	<link rel="stylesheet" type="text/css" href="css.css" />
			
	<title> pangugle 教程</title>
			
	<!-- 在文档头部，使用 <style> 元素 -->
	<style type="text/css">
		p{ font-size: 15px ; }
	</style>
    </head>
    <body>
	<p style="color: red;">这是内联样式，使用style属性</p>
    </body>
</html>

内联样式直接在 <p> 中使用 style 属性设置字体颜色（color: red）。
内部样式在 <style> 里设置字体大小（font-size: 15px）。
外部引用使用 <link> 链入文件 css.css，设置字体水平居中（text-align: center）和设置字体颜色（color: blue）。

在浏览器中可以看到，<p>的内容，其颜色为red。外部引用的样式（color: blue）没有起作用。这里涉及到样式的优先级。内联样式 > 内部样式表 > 外部引用。

注释

css 的注释是：
开始：/*
结束：*/

/* 注释内容 */

html 的注释是：
开始：

<!-- 注释内容  -->

实例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>pangugle.com教程</title>
    <style type="text/css">
	/**
	 * css 注释
	 **/
	div{
		font-size: 15px;
	}
	/* p{ font-size: 16px;} */
     </style>
  </head>
  <body>
		
	<!-- html 注释  -->
	<p>这是一个段落。</p>
		
	<!-- 主体内容 start -->
	<div class="main">
		代码块...
	</div>
	<!-- 主体内容 end -->
		
	<!-- <p>这是一个段落。</p> -->
		
	<!-- 
		<div>
			<p>这是一个段落。</p>
		</div>
	-->
		
    </body>
</html>

css 和 html 都能注释代码块，注释完后代码块不起作用。