CSS：一篇教会你用CSS装饰你的HTML文本

▐ CSS概述

▐ CSS基本语法

▐ 选择器

▐ 修饰文本

▐ 修饰背景

▐ 伪类

▐ 透明度

▐ 标签的分类

▐ display属性

▐ div>标签

▐ span>标签

▐ CSS概述

• 全称Cascading Style Sheets 级联样式表

• css是一种样式表语言，用于为HTML文档控制外观，定义布局；它提供了一些属性，通过这些属性对HTML标签进行修饰，这样就不需要用到很多繁琐的HTML古老标签了。例如：CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

• HTML与CSS的关系：

HTML是网页的内容，CSS定义页面的样式

▐ CSS基本语法

• 通过<style>对文本样式进行定义

• 位于 <style> 元素内的 CSS 注释，以 /* 开始，以 */ 结束. （ Ctrl + / ）

• 样式表的分类和写法：

行内样式表
内嵌样式表
外部样式表

• 行内样式表：直接写在要修饰标签中

<p style="color: blue;font-size: 16px;">黄鹤楼</p>
• 内嵌样式表：样式只写一次，却跟多行内容关联；习惯写在<head></head>内，也是我们在学习过程中最常用的写法。

		<style>
			p{
				font-size: 16px;  /* px 像素单位 */
				color: blue;
			}
		</style>
• 外部样式表：写在一个.css文件，再通过<link>标签调用，通常在比较的大项目中，由于代码量大，才会将css样式表写在.css文件中，与html文件分离。

总结：

▐ 选择器

• 通过选择器把我们的样式表和标签进行匹配

• 常用的选择器：

标签选择器
id选择器
类选择器
通配选择器

标签选择器：通过标签选择器可以选择页面中的所有指定标签

标签名 { ... }
       <style type="text/css">
			/* 标签选择器 */
			p{
				color: blue;
				font-size: 20px;
			}
       </style>
id选择器：通过标签的id属性值选中唯一的一个标签（id 名称不能以数字开头)

# id属性值 { ... }
	<style type="text/css">			
			/* id选择器 */
			#title{
				color: aquamarine;
				font-size: 20px;
			}
	</style>
类选择器：通过标签的class属性值选中一组标签

.class属性值 { ... }
		<style type="text/css">
           /*类选择器*/
			.p1{
				color: beige;
				
			.p2{
				color: blue;
			}
		</style>
通配选择器：可以用来选中页面中的所有的标签

* { ... }
    <style type="text/css">
   /* 通配选择器  匹配所有的标签 */
			*{
				font-size: 30px;
			}
    </style>
选择器组合：选择多组标签

属性值1, 属性值2... { ... }
		<style type="text/css">
			/* 选择器组合 */
			#title,p1,p2{
				
			} 
		</style>

▐ 修饰文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1{
				color: blue;          /* 字体颜色 */
				font-size: 20px;      /* 字体大小 */
				font-family: 楷体;     /* 字体 */
				font-weight: 500;      /* 字体粗细  700=bold */
				font-style: italic;    /* 斜体文本 */
				text-align: center;    /* 对齐方式 left  center  right*/
				/* text-decoration: line-through;  删除线 */
				/* text-decoration: underline;     下划线 */
				line-height: 40px;    /* 行高 */
				letter-spacing: 1px;  /* 字符间距 */
				word-spacing: 20px;   /* 英文单词间距 */
				text-indent: 2em;     /* 首行缩进,2em指两个文字的大小 */
			}
			a{
				text-decoration: none; /* 定义标准的文本 例如可以去掉超链接下划线 */
			}
		</style>
	</head>
	<body>
		<p class="p1">
		故事发生在17世纪，传说中海盗最为活跃的加勒比海。风趣迷人的杰克·斯伯洛，是活跃在加勒比海上的海盗，拥有属于自己的“黑珍珠”号海盗船。对他来说，最惬意的生活就是驾驶着“黑珍珠”号在加勒比海上游荡，自由自在的打劫过往船只。
		<br />   <!-- 换行 -->
		nice to meet you
		</p>
		
		<a href="">百度</a>
	</body>
</html>

▐ 修饰背景

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
            /*标签选择器*/
			p{
		        /* 背景颜色 */
				background-color: antiquewhite;
                /* 背景图片 */
				background-image: url("img/photo.png");/* 背景颜色优先级高 */
				/* 背景重复(默认是重复的) */
				background-repeat: no-repeat; /*no-repeat表示不重复*/
				/* 也可以设置水平或垂直重复
                   background-repeat: repeat-x;
                   background-repeat: repeat-y; */
		
				/* 背景位置---两组值:水平和垂直 
                      rigth center lift   top center bottom */
				background-position: right top;
				/* 背景尺寸---对应: 宽    高 */
				background-size: 600px 400px;		
			}
		</style>
	</head>
	<body>
		<p>想要明白生活你需要先经历它，而不是总在分析它。</p>
	</body>
</html>

▐ 伪类

• CSS伪类专门用来表示标签的一种的特殊的状态.

• 伪类的语法：

: hover 表示鼠标移入的状态

: active 表示被点击的状态

: focus 向拥有键盘输入焦点(输入框)的标签添加样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>	
			/* 当鼠标移动到标签上时会自动切换到此样式表 注意标签对的匹配*/
			p:hover{
				color: red;
			}
			/* 当鼠标点击标签时会自动切换到此样式表 */
			p:active{
				color: blue;
				background-color: antiquewhite;
			}
		</style>
	</head>
	<body>	
		<p>点击我有惊喜哦！</p>
        <input class="t"/>
	</body>
</html>

• 下图就是鼠标从未移入---移入---点击内容的变化

• 关于focus ：鼠标点哪(输入框)哪就切换到此样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
	
			input:focus{
				background-color: wheat;
			}

		</style>
	</head>
	<body>

		<input type="text"/><br />
		<input type="text"/>

	</body>
</html>

▐ 透明度

• 定义透明度的属性是 opacity

• opacity 属性设置标签的不透明级别，规定不透明度：从 0.0 (完全透明) 到1.0 (完全不透明)

通常用来设置图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				width: 600px;
				height: 400px;
				opacity: 0.5;    /*完全透明 0~1 完全不透明*/
			}
		</style>
	</head>
	<body>
		<img src="img/photo.png">
	</body>
</html>