CSS——Day21

CSS

一、概述

CSS：Cascading Style Sheet，层叠样式表（级联样式表）

作用：
1、美化页面
2、对页面中所有样式的设置统一了规则

特点：
1、.css结尾的文件
2、嵌入在html页面

二、写法

1、内联样式
做法：

在元素的开始标记中写上
style=“属性名：属性值；属性名：属性值；...”；
<span style="color: red;background:yellow;border:1px blue dashed;:>span</span>

2、内部样式表
做法：

在head标签中定义style标签
在style标签中使用选择器设置样式
<style type="text/css">
	p{
		color:yellow;
		font-size:40px;
		background:purple;
	}
</style>

3、外部样式表
做法：

新建.css的外部样式表文件
在该文件中定义标签的样式
在想要使用该样式表的页面的head标签中使用link标签引入.css文件资源
<link rel="stylesheet" tyoe="text/css" href="css/test.css"/>

优先级：
1、内联最高
2、内部和外部，后写的优先级高

三、选择器

选择所有指定的元素

格式：

元素名{
	样式
}

3.2 类选择器

选择所有具有相同class值的元素

格式：

先为指定的元素设置class值
.class{
	样式
}

3.3 id选择器

选择唯一id值的元素

格式：

先为指定的元素设置唯一的id值
#id{
	样式
}

3.4 分组选择器

将多个选择器以逗号分隔进行统一的样式设置

格式：

选择器1，选择器2，...{
	样式
}

3.5 属性选择器

针对具有指定属性或属性值的元素进行样式的设置

格式：

选择器[属性名 = ‘属性值’][ ]...{
	样式
}

3.6 子代、后代选择器

格式：

子代
选择器1>选择器2{
	样式
}
后代
选择器1 选择器2{
	样式
}

3.7 伪类选择器

格式：

a：link,表示超链接的默认状态
a:visited,表示超链接被访问过的状态
a:hover,表示鼠标悬浮在元素上的状态
a:active，表示鼠标按住时的状态

3.8 css3.0的新选择器

:nth-of-type(2n+1)

3.9 通配符选择器

选择所有元素进行统一样式的设置，一般设置全局的字体和内外边距

格式:

*{
	样式
}

四、盒子模型 box model

概念：研究内边距、外边距、边框和元素中的内容在hi见的关系

4.1 外边距margin

margin：npx，表示四个方向的外边距都是n像素
margin：apx bpx，表示上下方向的外表据是a像素，左右方向的外边距是b像素
margin：apx bpx cpx dpx，表示上右下左的外边距分别是a、b、c、d像素
margin-left：npx
margin-right：npx
margin-top：npx
margin-bottom：npx

注：
1、两个盒子上下外边距取较大值
2、两个盒子的左右外边距取两者之和

4.2 内边距padding

padding：npx，表示四个方向的内边距都是n像素			 
padding：apx bpx，表示上下方向的内边距是a像素，左右方向的内边距是b像素		
padding：apx bpx cpx dpx，表示上右下左的内边距分别是a、b、c、d像素
padding-left：npx	
padding-right：npx	
padding-top：npx
padding-bottom：npx

注：
内边距会影响整个盒子的大小

4.3 边框border

标准格式：
border：粗细 颜色 样式；
注：粗细 颜色 样式的先后顺序是任意的
样式的取值：solid、dashed、double、dotted

边框圆角
border-radius：npx，用半径为n像素的圆内切盒子的四个角形成圆角矩形

五. 定位position

取值：
1、static：默认值
2、absolute：绝对定位，元素根据整个窗口实现上下左右位置的定位
3、relative：相对定位，元素根据没有使用定位时的默认位置实现定位
4、fixed：固定定位，一旦定位后元素的位置不会发生变化

六. 浮动

使用浮动样式的元素，可以使元素脱离原始的文档流，可以使块级元素与其他元素在同一行中。

浮动：
  float：left/right
清除浮动：
 clear：left/right/both

七. 隐藏显示

属性：visibility
1、hidden：隐藏 （占位置）
2、visible：显示

八. 行内元素和块级元素

块级：block
p、div、h、ol/ul、li、table、tr

行内：inline
img、td、a、span、font

行内和块级的转换：display
1、块级->行内
display：inline

2、行内->块级
diplay：block

隐藏：（不占位置）
display：none