Web学习第四天——CSS简介、选择器，常用（文本、字体、列表、背景、超链接）样式

一、CSS简介

（一）、什么是CSS？

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

（二）、CSS能够干什么？

提升网页开发的工作效率，控制多重网页的样式和布局。

（三）、CSS语法结构

    p{color: blue;}
    h1,p：选择器，表示选择网页中所有的p标签（段落）
    color：属性，表示段落字体的颜色属性
    blue：值，设置p标签中字体的颜色为blue（蓝色）
    ;：分号用于分隔多个属性

（四）、CSS的使用方式

1、内嵌样式

使用标签style属性，在style属性是值中书写样式，只能控制当前的HTML标签。

书愤
设置这一个h1标签的字体颜色为teal，其它h1标签不受影响

2、内部样式

在head头部，使用style标签，在style标签内书写样式，控制整个网页样式。

type="text/css"：表示这是样式文件
p{color: blue;}：具体的样式内容

3、外部样式

写在css文件中，可以控制所有引用该样式文件的网页。

style1.css文件名，下面是内容，css文件内不需要style标签
body{
text-align: center;
background-color: cyan;
}

使用link标签引入：

4、优先级比较

内嵌样式优先于内部样式和外部样式；
内部样式和外部样式和优先级取决于style标签位置和link引入标签位置，因为网页是从上往下解析，所以style标签（内部样式）和linl标签（外部样式引入）谁靠下谁优先级高，因为下面的后解析会覆盖先解析的数据。
因此网页若有外部样式表引入，建议先引入再写内部样式，服从控制范围越小，优先级越高的一般原则。

5、案例源码

	
		
		
		
		
	
	
		
书愤
		
早岁哪知世事艰，中原北望气如山。
		
楼船雪夜瓜洲渡，铁马秋风大散关。
		
塞上长城空自许，镜中衰鬓已先斑。
		
出师一表真名世，千载谁堪伯仲间。
	

6、案例运行效果

二、CSS选择器

选择器用于选择你想要的元素的样式。

（一）、基本选择器

1、标签选择器

格式：HTML标签{css语句···}
所有的HTML标签都可使用
若有多个标签，则标签之间以“,”分隔
控制范围：所有的div和p标签里的元素都会使用该样式
案例：
CSS代码：

HTML代码：

	
CSS选择器学习
	
学习时间：2019/5/11
	

		
作者：Mr.C
		
标签选择器（element，element）
		
示例：div，p
		
说明：所有<div>元素和<p>元素
	
	
学习完标签选择器（element，element）了

运行效果

2、类选择器

格式：.类名{css语句···}
控制范围：所有class="类名"的标签
案例：
.code{
	font-weight: bolder;
	font-size: 15px;
	color: black;
}
使用：
···

3、id选择器

格式：#ID{css语句···}
ID不可以以数字开头，可以字母数字混合
ID必须具有唯一性
控制范围：id="ID"的标签
案例：
#ID12{
	color: chocolate;
	text-decoration: underline;
}
使用： 
···

4、嵌套选择器

格式：div p{css语句···}
控制范围：
元素里的
元素
案例：
CSS代码：

HTML代码：

	
学习时间：2019/5/11
	

		
作者：Mr.C
		
嵌套关系（element element）
		
示例：div p
		
说明：<div>元素里的<p>元素
	
	
学习完嵌套关系（element element）了

运行效果：

5、父子关系

格式：div>p{css语句···}
控制范围：所有父级是
元素的
标签
案例：
CSS代码：

HTML代码：

	
学习时间：2019/5/11
	

		
作者：Mr.C
		
父子关系（element>element）
		
示例：div>p
		
说明：所有父级是<div>元素的<p>元素
	
	
学习完父子关系（element>element）了

运行效果

6、并列关系

格式：div+p{css语句···}
控制范围：选择所有
元素之后紧挨着的
元素（
之后紧挨的
）
案例：
CSS代码：

HTML代码：

	
CSS选择器学习
	
学习时间：2019/5/11
	

		
作者：Mr.C
		
并列关系（element+element）
		
示例：div+p
		
说明：选择所有<div>元素之后紧挨着的<p>元素
	
	
学习完并列关系（element+element）了

运行效果

7、属性选择器

格式：[target]{css语句···}
控制范围：选择所有带有target属性的元素
案例：
CSS代码：

HTML代码：

	
CSS选择器学习
	
学习时间：2019/5/11
	

		
作者：Mr.C
		
属性选择器[attribute]
		
示例：[target]
		
说明：选择所有带有target属性的元素
	
	
学习完属性选择器([attribute])了

运行效果

三、常用（文本、字体、列表、背景、超链接）样式

（一）、常用文本、字体样式

HTML代码：

	

		
书愤
		
早岁哪知世事艰，中原北望气如山。
		
楼船雪夜瓜洲渡，铁马秋风大散关。
		
塞上长城空自许，镜中衰鬓已先斑。
		
出师一表真名世，千载谁堪伯仲间。
	
	

		
书愤
		
早岁哪知世事艰，中原北望气如山。
		
楼船雪夜瓜洲渡，铁马秋风大散关。
		
塞上长城空自许，镜中衰鬓已先斑。
		
出师一表真名世，千载谁堪伯仲间。
	

运行效果

（二）、列表样式

CSS代码

HTML代码

	

		

			
书愤
			
早岁哪知世事艰，中原北望气如山。
			
楼船雪夜瓜洲渡，铁马秋风大散关。
			
塞上长城空自许，镜中衰鬓已先斑。
			
出师一表真名世，千载谁堪伯仲间。
		
	
	

		

			
书愤
			
早岁哪知世事艰，中原北望气如山。
			
楼船雪夜瓜洲渡，铁马秋风大散关。
			
塞上长城空自许，镜中衰鬓已先斑。
			
出师一表真名世，千载谁堪伯仲间。
		
	

运行效果

（三）、常用背景样式及雪碧图

background-color：背景颜色（也可用background）
background-image:url(...)：背景图片
background-repeat：背景平铺方式（repeat:x与y全平铺；no-repeat:不平铺；repeat-x:  在x轴上平铺 ；repeat-y: 在y轴上平铺）
background-position：背景显示位置
background-position-x  : 正数为右移，负数是向左移动
background-position-y : 正数是向下移，负数是向上移动

CSS雪碧图，即CSS Sprite，也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。
案例：

	
		
		
		
	
	
		

			
优惠商品分类
			
热门分类
			

				
女装  女装  女装
				
女装  女装  女装
				
女装  女装  女装
				
女装  女装  女装
			
			
热门分类
			

				
女装  女装  女装
				
女装  女装  女装
				
女装  女装  女装
				
女装  女装  女装
			
		
	

运行效果

图片资源

（四）、常用超链接样式以及伪类

伪类的格式以及使用
伪类可以实现一下特殊效果，图鼠标悬停，链接字体变色，放大等。
在上面（三）、背景样式的使用中的CSS代码末尾添加以下代码即可实现这些效果
a:link{color: black}/*链接默认时候的样式*/
a:active{color: cyan;}/*链接按住不放时的样式*/
a:hover{color: blue;font-size: 150%;}/*鼠标悬停时的样式*/
a:visited{color: green;}/*链接被点击后的样式*/

运行效果