CSS常用样式、选择器及盒模型

CSS

简介

cascading style sheets 层叠样式表

用于调整HTML元素的样式, CSS通常编写在.css文件中.

优点:
	让网页的内容 与 网页的表现 完全分离. 提高了代码的复用性.

常用样式

样式的编写格式:
	1.	样式表由多个样式组成.
	2.	每一个样式, 是一个键值对.
	3.	键与值之间使用英文冒号连接 . 多个键值对之间使用英文分号分割.

常用样式:
	1.	字体大小
			font-size:长度+单位;
	2.	文字颜色
			color:颜色值;
	3.	内容位置
			text-align:left/center/right;
	4.	元素的宽度
			width:长度+单位;
	5.	元素的高度
			height:长度+单位;
	6.	背景颜色:
			background-color:颜色值;
	7.	背景图片
			background:url("图片路径");

css的三种使用方式

1.	内联样式表
		定义在每一个元素的style属性中.
		格式:	<开始标签 style="样式键:样式值;样式键:样式值...">
		案例:	
			<div style="text-align:center;color:#3a3;font-size:30px">
				从前有座山 ,山上有座尼姑庵.
			</div>
2.	内部样式表
		定义在style标签中.
		格式:
			<style type="text/css">
				选择器1{
					样式列表;
				}
				选择器2{
					样式列表;
				}
				...
				选择器n{
					样式列表;
				}
			</style>
3.	外部样式表
		定义在外部的.css文件中,通过link标签引入
		
		css文件的编写格式:
		@charset "UTF-8";
		选择器1{
			样式列表;
		}
		选择器2{
			样式列表;
		}
		...
		选择器n{
			样式列表;
		}

		HTML中引入.css文件的格式
		<link rel="stylesheet" type="text/css" href="css的文件路径">

选择器

作用:	用于选定一组元素 , 将样式列表给定到选择的元素.

基本选择器

元素名称选择器

作用:	根据元素的名称, 选定一个或一组元素.
格式:
		元素名称{
			样式列表;
		}

id选择器

作用：	根据元素的id属性值, 选定一个或一组元素.
格式:
		#元素id属性值{
			样式列表;
		}

类选择器

作用:	根据元素的class属性值 , 选定一个或一组元素
格式:
		.元素的class属性值{
			样式列表;
		}

id和class的区别

id在程序中, 通常表示唯一的标识. 
class在程序中, 表示类. 相同class的元素, 我们认为是同一分类.  一个元素可以拥有多个class值.

给元素添加多个class值的格式:
	一个class属性名等于多个值, 值与值之间使用空格隔开.
	例如: 设定如下div元素的class值为a和b
	<div class="a b"></div>

CSS 样式的三大特性

-	继承性
		部分父元素的样式, 会被子元素所继承.

-	层叠性
		对于同一个元素, 通过多种方式添加的多组样式.不冲突的部分叠加,冲突的部分参考优先级.			
		
-	优先级特性
		样式来源优先级:
			1.	内联样式 优先级最高
			2.	相同选择器的情况下 , 定义距离body较近的内部样式表或外部样式表中的选择器.
			3.	默认样式
			4.	继承得到的样式.

		选择器优先级:
			1.	id选择器:	权重100
			2.	类选择器:	权重10
			3.	元素名称选择器: 权重1

绝对优先样式 慎用

在样式值的后面,加入绝对优先关键字: !important;

案例:
	div{
		text-align: left !important;
	}

​

选择器

鼠标悬停选择器

当鼠标处于元素上方时, 样式生效.
当鼠标离开元素后, 样式还原.

格式:
	选择器:hover{

	}

获取焦点选择器

当输入组件处于输入状态时, 样式生效.
当输入组件输入完毕时, 样式还原.

格式:
	选择器:focus{

	}

组合选择器

选择器组

通过多个选择器, 组合起来锁定一个或多个元素.

(被选择的元素,需要满足选择器组中的所有选择器)
格式:
元素名称选择器选择器1选择器2…选择器n{
样式列表;
}
例如: 选择所有class值为class1的div元素
div.class1{
}

选择器列表

将一组样式, 给定到多个选择器的结果
(被选择的元素,只需要满足选择器列表中的任意一个选择器)

格式:
选择器1,选择器2…选择器n{
样式列表;
}

例如:设置div和p元素的文字颜色为绿色:
div,p{
color:#0f0;
}

派生选择器

子选择器

格式:
选择器1>选择器2{
}

作用:
从选择器1的结果元素中, 选择匹配选择器2的子元素.

例如: 选择所有div中的子标签p
div>p{
}

例如: 选择id为content元素的子元素div
#content>div{
}

后代选择器

格式:
选择器1 选择器2{
}

作用:
从选择器1的结果元素中, 选择匹配选择器2的后代元素.

例如: 选择所有div中的后代标签p
div p{
}

例如: 选择id为content元素的后代元素div
#content div{
}

常用样式

背景样式

背景颜色
background-color:颜色值;

• 背景图片
  background-image:url(“图片地址1”),url(“图片地址2”)…url(“图片地址n”);
  堆叠顺序:URL定义的越靠前, 显示时越靠上.
• 背景图片控制 - 平铺
  backgorund-repeat:
  取值:
  - 默认平铺:repeat;
  - 仅横向平铺:repeat-x;
  - 仅纵向平铺:repeat-y;
  - 不平铺:no-repeat;
• 背景图片控制 - 缩放
  background-size:宽度% 高度%;
• 背景图片控制 - 滑动
  background-attachement:
  - scroll : 默认图片跟随内容滑动
  - fixed : 固定不滑动
• 背景图片控制 - 定位
  background-position:x偏移值 y偏移值;

文字样式

字体大小
font-size:长度+单位;

• 字体颜色
  color:颜色值;

• 文字位置
  text-align:left/center/right;

• 文字加粗
  font-weight:bold;

• 文字线
  text-decoration:
  取值:
  - underline : 下划线
  - overline : 上划线
  - line-through: 删除线

• 文字斜体:
  font-style:oblique;

• 文本行高:
  line-height:长度+单位;

• 文字阴影
  text-shadow:横向偏移 垂直偏移 [阴影模糊距离] 阴影颜色;

• 字体设置
  font-family:字体名称;

安装字体
@font-face{
font-family:“自定义名称”;
src:url(“字体文件路径”);
}

盒模型 ( 框模型 )

指的是元素在网页中占用空间大小的 计算模型.
一个元素在网页中占用的高度: 元素自身高度+上下内边距+上下边框的宽度+上下外边距;
一个元素在网页中占用的宽度: 元素自身宽度+左右内边距+左右边框的宽度+左右外边距;

边框

边框样式

格式1. 一次性指定四个方向边框的宽度 样式 颜色值;
border:宽度 样式 颜色值;

格式2.
单独指定某一个方向的边框 宽度 样式 颜色值;
左: border-left:宽度 样式 颜色值;
上: border-top:宽度 样式 颜色值;
右: border-right:宽度 样式 颜色值;
下: border-bottom:宽度 样式 颜色值;

边框的样式值:
- 实线 : solid
- 虚线边框 : dashed
- 点组成边框 : dotteds
格式1.
一次指定四个角的圆角宽度值
border-radius:长度+单位;
格式2.
单独指定每一个角的圆角宽度值
上左角: border-top-left-radius:长度+单位;
上右角: border-top-right-radius:长度+单位;
下左角: border-bottom-left-radius:长度+单位;
下右角: border-bottom-right-radius:长度+单位;

边框阴影

格式:
box-shadow:x偏移 y偏移 [阴影模糊大小] 阴影大小 阴影颜色

处理溢出边框的内容

格式:
overflow:
- visible : 溢出的内容显示, 默认值.
- hidden : 溢出的内容隐藏.
- scroll : 添加横向 纵向滚动条.
- auto : 当内容溢出时. 才添加滚动条

表格的双线边框问题

border-collapse: collapse;

内边距 padding

指的是元素的内容 与 元素的边框的距离.

格式1.
一次指定四个方向的内边距
padding:长度+单位;

格式2.
一次指定上下 和 左右的内边距
padding:上下长度+单位 左右长度+单位;

格式3.
一次指定上 ,右 ,下,左的内边距
padding:上 右 下 左;

格式4.
一次指定一个方向的内边距
左: padding-left:长度+单位;
右: padding-right:长度+单位;
上: padding-top:长度+单位;
下: padding-bottom:长度+单位;

外边距 margin

指的是元素的边框 距离 其它元素的盒模型的距离. 值可以是负数

格式1.
一次指定四个方向的外边距
margin:长度+单位;

格式2.
一次指定上下 和 左右的外边距
margin:上下长度+单位 左右长度+单位;

格式3.
一次指定上 ,右 ,下,左的外边距
margin:上 右 下 左;

格式4.
一次指定一个方向的外边距
左: margin-left:长度+单位;
右: margin-right:长度+单位;
上: margin-top:长度+单位;
下: margin-bottom:长度+单位;

外边距的特殊使用

1. 两个块元素之间 ,上下的内边距不会叠加. 值较大者生效.
2. 外边距可以是负值
3. 可以指定一个元素的左右外边距值为自动 auto , 自动居中.

定位

用于控制元素在网页中显示的位置

默认定位 (静态定位)

默认元素分为三类:
1. 块元素 : 独占一行, 可以设置宽度和高度. div,ul,ol,li,table…
2. 行内元素 : 与其他元素共享一行, 一行排满自动换行,宽度和高度无法设置, 只能由内容撑开. span,i,b,a…
3. 行内块元素 : 与其他元素共享一行, 一行排满自动换行,宽度和高度可以设置. img,button,input…

display:
- block : 块元素
- inline : 行内元素
- inline-block : 行内块元素
- none : 隐藏不显示.

浮动定位

格式: float:left/right;

相对定位

作用: 相对当前元素在默认定位下的位置 , 控制它进行x和y轴的移动.
特性: 原有空间保留, 移动的新位置, 采用覆盖显示.
格式: position:relative;

绝对定位

不占用网页空间, 采用覆盖显示的一种定位方式.
格式: position:absolute;

固定定位

不占用网页空间 ,采用漂浮覆盖显示的一种定位方式.
格式: position:fixed;

相对定位/绝对定位/固定定位 如何确定元素的位置

上述的三种定位方式, 通过如下四种样式 来确定元素的位置:
1. top: 长度+单位;
2. left: 长度+单位;
3. right: 长度+单位;
4. bottom: 长度+单位;

相对定位情况下:
元素相对于自身目前的位置, 进行指定方向的偏移.
例如: 让元素从原有位置, 向右移动10个像素. left:10px; 或 right:-10px;

绝对定位情况下:
指的是元素距离指定方向边框的距离.
注意: 如果元素没有一个使用定位(相对定位/绝对定位/固定定位)的祖先元素, 则上述的边框指的是浏览器边框;
如果元素拥有一个使用定位的父元素 , 则上述的边框指的是这个使用了定位的祖先元素的边框.

固定定位情况下:
距离浏览器边界某个方向的距离;

相对定位/绝对定位/固定定位 堆叠顺序

设置堆叠顺序:
z-index:整数;
默认值为0 , 值越大越靠上. 负数表示显示在内容的后面.

当值相同时 , 元素编写时越靠后, 显示时越靠上.

设置元素的垂直对齐方式

vertical-align:
	-	top	:	顶端对齐
	-	text-top:	文字顶端对齐
	-	bottom:	底部对齐
	-	text-bottom	:	文字底部
	-	middle	:	中部对齐	,	(多个元素必须同时设置 才能生效.)
	-	百分比%	:	按照父元素的行高属性值. 来计算对齐的百分比. (父元素必须有行高值)

鼠标形状

cursor	:	
	取值:
		-	default	:	默认鼠标形状, 跟随场景变化自动变化.
		-	pointer	:	手指形状 (用于提示用户可点击)
		-	text	:	焦点形状 (工字形)
		-	wait	:	等待
		-	help	:	帮助
		-	progress:	进度中
		-	url(路径),auto:	文件格式:	cur,ico

列表样式

list-style-type:none;	
	取消前置数字或图标.

不透明度

opacity:0-1的浮点型数字
当值为1时 , 不透明
当值为0时 , 完全透明
当值为0.5时, 半透明.

过渡

在元素的样式变更时 , 为变更增加过渡时长, 让样式的变更流畅.

格式1.
	transition:样式 时长s;

格式2.
	transition:all 时长s;

转换

用于改变元素的形状 大小 位置的一种样式

2D转换

-	transform	:	
		-	移动:	tanslate(x,y)	;x和y分别表示移动的横向和纵向像素数量.	
		-	旋转:	rotate(数值deg)
		-	缩放:	scale(x,y);横向和纵向的缩放倍数.
		-	翻转:	skew(xdeg,ydeg)

3D旋转

-	transform:
		X轴旋转:	rotateX(数值deg)
		y轴旋转:	rotateY(数值deg);

动画 *

指的是元素在多个样式之间 自动平稳的过渡.

定义的格式:
	@keyframes 自定义名称{
		0%{
			样式列表;
		}
		...
		100%{
			样式列表
		}
	}

使用动画的格式:
	选择器{
		animation:动画名称 时长s;
		animation-iteration-count:数字;/*重复执行的次数*/
	}

响应式

以移动设备优先显示:(当手机设备打开时, 像素自动放大)
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">	

​
​ 当屏幕宽度小于500像素时 , 生效的样式:
​

	@media (max-width:500px){
		选择器{

		}
		选择器{

		}
	}

当屏幕宽度大于500像素时 , 生效的样式:
	@media (min-width:500px){
		选择器{

		}
		选择器{

		}
	}