CSS样式表

一、概述

1、CSS是什么？

层叠样式表，定制html元素的显示样式，美化页面，对于前端页面的搭建十分重要

2、为什么要使用CSS

（1）CSS 指层叠样式表 (Cascading Style Sheets)
（2）样式定义如何显示 HTML 元素
（3）样式通常存储在样式表中
（4）把样式添加到 HTML 中，是为了解决内容与表现分离的问题
（5）外部样式表可以极大提高工作效率
（6）外部样式表通常存储在 CSS 文件中
（7）多个样式定义可层叠为一个

HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。

3、学习目标

熟悉，熟练使用常用的css样式属性，具备基本的页面美化能力。

二、初识CSS

1、第一个CSS样式

<head>
	<title>CSS样式表</title>
	<style type="text/css">
		p{
			color: white;         /* 字体颜色 */
			font-size: 25px;      /* 字体大小 */
			background-color: gray; /* 背景颜色 */
			width: 650px;           /* 宽度 */ 
		}
	</style>
</head>
<body>
	<p>才能的火花，常常在勤奋的磨石上迸发。</p>
</body>

2、如何插入样式表

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。在HTML文档中插入样式表的方法有三种：

外部样式表

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

内部样式表（位于 <head> 标签内部）
1
2
3
<style type="text/css">

</style>

内联样式（在 HTML 元素内部）

1
2
3

<p style="color: white;">
	学习HTML好简单
</p>

样式表的优先级：内联 > 内部 > 外部 > 缺省

3、基本语法

CSS 语法由三部分构成：选择器、属性和值：

1	body{ background-color:red; }

注意：多个样式之间用分号；隔开。

三、选择器种类

1、元素选择器

1	p{ color:white; background-color:gray;}

补充： div和span元素

div 是一个块级元素 : <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

<div>
	 才能的火花，常常在勤奋的磨石上迸发。  
</div>
<div>
	 只要愿意学习，就一定能够学会。
</div>

span 标签被用来组合文档中的行内元素。

1
2
3

<div>
	 只要愿意<span style="color: red;font-weight: bold;">学习</span>，就一定能够学会。
</div>

2、类选择器

类选择器可以为标有特定 class 的 HTML 元素指定特定的样式。可以用于区分不同的HTML元素。

类选择器以 “.” 来定义

HTML：

<div class="div_1">
	 才能的火花，常常在勤奋的磨石上迸发。 
</div>
<div class="div_2">
	 只要愿意学习，就一定能够学会。
</div>
<div class="div_3 div_4">         <!-- 两个值 -->
	 学的越多，自身的价值就越高。
</div>

CSS:

<style type="text/css">
	.div_1 {color: red;}
	.div_2 {color: blue;}
	.div_3 {color: green;}
</style>

3、id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 “#” 来定义。

HTML：

<div id="div_1">
	 才能的火花，常常在勤奋的磨石上迸发。 
</div>
<div id="div_2">
	 只要愿意学习，就一定能够学会。
</div>

CSS：

<style type="text/css">
	#div_1 { color: red; }
	#div_2 { color: blue; }
</style>

id选择器与类选择器的区别：

4、派生选择器

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。比如你希望div下的p标签的字体为蓝色：

HTML：

<div>
	<p>才能的火花，常常在勤奋的磨石上迸发。</p> 
</div>
<p>
	只要愿意学习，就一定能够学会。
</p>

CSS：

1	div p{ color: blue; }

后代选择器-子代选择器

5、选择器继承

根据 CSS，子元素从父元素继承属性：

HTML：

<div>
	<p>才能的火花，常常在勤奋的磨石上迸发。</p> 
	<b>只要愿意学习，就一定能够学会。</b>
</div>

CSS：

1	div { color: blue;}

6、选择器联合使用

同时对多个元素设置同一个样式：

1
2
3

h1,h2,h3,h4,h5,h6 {
  	color: green;
  }

div.div_1 div标签且类属性为div_1

7、伪类选择器

/*未访问状态的样式*/
       span:link{
           color: chartreuse;
       }
       /*访问结束之后的样式*/
       span:visited{
           color: brown;
       }
       /*鼠标悬浮在上面的时候*/
       span:hover{
           color: blue;
       }
       /*鼠标点击时的样式*/
       span:active{
           color: aqua;
       }
       /*输入框(文本类型的输入框)被聚焦的时候的样式*/
       input:focus{
           background-color: gray;
       }

四、背景样式

1、背景颜色

可以使用 background-color 属性为元素设置背景色。

HTML：

1
2
3

<div>
	 才能的火花，常常在勤奋的磨石上迸发
</div>

CSS：

1	div{background-color: gray; color: white;}

2、背景图像

2.1 设置背景图像

要把图像放入背景，需要使用 background-image 属性。

1	body{ background-image: url('lyf.jpg') }

2.2 背景重复

background-repeat 属性设置是否及如何重复背景图像。

repeat：重复
no-repeat：不重复
repeat-x：水平方向重复
repeat-y：垂直方向重复

1	div{ background-image: url('lyf.jpg'); background-repeat: no-repeat; }

2.3 背景定位

以利用 background-position 属性改变图像在背景中的位置。

top left
top center
top center
center left
center center
center right
bottom left
bottom center
bottom right

div
{ 
	background-image: url('ym.jpg'); 
	background-repeat: no-repeat; 
	background-position: center;
	height: 600px;
	width: 600px;
	background-color: lightgray;
}

也可以使用百分比来设置图像的位置：

1	background-position: 0% 10%;

或者使用像素值来设置：

1	background-position: 50px 50px;

2.4 防止背景图像随着页面滚动

1	background-attachment: fixed;

五、文本样式

CSS 文本属性可定义文本的外观。

通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

1、文字颜色

使用属性color来指定文字颜色，其属性取值是CSS颜色。

CSS颜色表（RBG分别代表红绿蓝）

表示形式表示形式	说明	举例
颜色名称	通过英文单词指定颜色	red、green、blue
HEX	通过#RRGGBB或者#RGB的形式用十六进制表示颜色	ff0000（同#f00）、#00ff00（同#0f0）、#0000ff（同#00f）
RGB	通过rgb(r,g,b)的形式用三个不大于255的数字表示颜色	rgb(255,0,0),rgb(0,255,0),rgb(0,0,255)
RGBA	RGB形式的扩展，第四个数字取值范围0~1表示透明度，0表示完全透明	rgba(0,0,0,0.6)表示半透明黑色

2、文本缩进

CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。

缩进可以使用下面三种值：

em 长度单位，一般而言 1em = 16px
px 像素
% 百分比

1	div{ text-indent: 5em; background-color: lightgray;}

3、水平对齐

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。

left 左对齐
center 居中
right 右对齐

HTML：

<ol>
     <li class="li_1">才能的火花，常常在勤奋的磨石上迸发</li>
     <li class="li_2">才能的火花，常常在勤奋的磨石上迸发</li>
     <li class="li_3">才能的火花，常常在勤奋的磨石上迸发</li>
</ol>

CSS：

1
2
3

li.li_1 { text-align: left; }
li.li_2 { text-align: center; }
li.li_3 { text-align: right ; }

4、文本装饰

text-decoration 属性规定添加到文本的修饰，如加下划线、上划线、删除线等。

none 无装饰
underline 下划线
overline 上划线
line-through 删除线

去除链接中的下划线和颜色：

HTML：

1	<a href="http://www.baidu.com">百度一下，你就知道</a>

CSS：

1	a { text-decoration: none; color: black;}

添加下划线、删除线、上划线：

HTML：

<p>
	<span class="s1">才能的火花，常常在勤奋的磨石上迸发</span>
	<span class="s2">才能的火花，常常在勤奋的磨石上迸发</span>
	<span class="s3">才能的火花，常常在勤奋的磨石上迸发</span>
</p>

CSS：

1
2
3

p .s1{ text-decoration: underline; }
p .s2{ text-decoration: line-through; }
p .s3{ text-decoration: overline; }

5、行间距

<p>
 	佛说， 前世五百年的回眸，才换得今生的擦肩而过，那么今生，我又要付出多少期盼，才能换得与你的再一次邂逅？<br>
 	光阴辗转，兜兜转转，却走不出与你遇见的千回百转，将一笺心语，绽放于相思的轮回里，任花开花落，等你，在红尘深处。<br>
 	心事如莲，有谁能懂？独处一隅，饮尽孤独，只为在最美的年华里，遇见懂得的那个人，即便，这一场等待，注定是一场关于缘分的修行。
</p>

1	p{line-height: 130px;}

六、字体样式

1、指定字体

指定字体: font-family

1	p {font-family: sans-serif;}

2、字体尺寸

font-size设置字体的尺寸：

1	p{ font-size: 100px; }

3、字体粗细

font-weight设置字体的粗细。

normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100-900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

1	p{ font-weight: 700; }

4、字体样式简写

1	p{ font: bolder 50px sans-serif; }

七、框模型（盒子模型）

1、概述

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

元素框的最内部分是实际的内容，直接包围内容的是内边距。
内边距的边缘是边框。
边框以外是外边距。

2、内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

2.1 padding属性

1	p{padding:30px;width: 200px;height: 200px;background-color: lightgray;}

可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：

1	p{padding:30px 0px 60px 0px;}

2.2 单边内边距

padding-top
padding-right
padding-bottom
padding-left

3、边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

3.1 边框样式

dotted 点状边框
dashed 虚线
double 双线
solid 实线

p
{
	width: 200px;
	height: 200px;
	border-style: dotted dashed double solid;
}

也可以设置单边框样式：

border-top-style
border-right-style
border-bottom-style
border-left-style

3.2 边框宽度

可以通过 border-width 属性为边框指定宽度。

p
{
	width: 200px;
	height: 200px;
	border-style: dotted dashed double solid;
	border-width: 5px;
}

3.3 边框颜色

p
{
	width: 200px;
	height: 200px;
	border-style: dotted dashed double solid;
	border-width: 5px;
	border-color: red;  /* 设置边框颜色 */
}

3.4 边框简写

p
{
	width: 200px;
	height: 200px;
	border: solid red 5px;
}

4、外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

4.1 margin 属性

<div>
	<p>
 		佛说， 前世五百年的回眸，才换得今生的擦肩而过，那么今生，我又要付出多少期盼，才能换得与你的再一次邂逅？ 
	</p>
</div>

<style type="text/css">
	div{width: 800px;height: 300px;background-color: lightgray;margin:0 auto;}
	p{ width: 500px; height: 200px; background-color: lightcoral; margin:30px 0 0 50px;}
</style>

4.2 单边外边距属性

margin-top
margin-right
margin-bottom
margin-left

八、CSS定位

1、定位概述

2、相对定位

div{
    position: relative;
    # 相对于自己原来的位置向下偏移30px
    top：30px;
    # 相对于自己原来的位置向左偏移30px
    right：30px;
    left:30%;
}

3、绝对定位

div{
	# 让div处于父标签的距离离顶部30px的位置处（前提父标签有position属性，如果没有定位置窗口上）
    position:absolute;
    top:30px;
    
}

4、固定定位

div a{
    # 使a标签始终固定在距离窗口顶部50%的位置，距离窗口右侧50%的位置 
            position: fixed;
            top: 50%;
            right: 50%; 
        }

CSS样式表

一、概述

1、CSS是什么 ？

2、为什么要使用CSS

3、学习目标

二、初识CSS

1、第一个CSS样式

2、如何插入样式表

3、基本语法

三、选择器种类

1、元素选择器

2、类选择器

3、id选择器

4、派生选择器

5、选择器继承

6、选择器联合使用

7、伪类选择器

四、背景样式

1、背景颜色

2、背景图像

2.1 设置背景图像

2.2 背景重复

2.3 背景定位

2.4 防止背景图像随着页面滚动

五、文本样式

1、文字颜色

2、文本缩进

3、水平对齐

4、文本装饰

5、行间距

六、字体样式

1、指定字体

2、字体尺寸

3、字体粗细

4、字体样式简写

七、框模型（盒子模型）

1、概述

2、内边距

2.1 padding属性

2.2 单边内边距

3、边框

3.1 边框样式

3.2 边框宽度

3.3 边框颜色

3.4 边框简写

4、外边距

4.1 margin 属性

4.2 单边外边距属性

八、CSS定位

1、定位概述

2、相对定位

3、绝对定位

4、固定定位

5、浮动

你的赏识是我前进的动力

1、CSS是什么？