CSS学习笔记

CSS基础

一、css的声明

1. 在 head 标签中使用style标签声明.

作用： 此声明一般声明当前网页的公共样式或者给某个标签的单独样式

2. 在标签上使用 style 属性进行声明.

作用： 此声明会将css样式直接作用于当前标签

3. 在 head 标签中使用 link 标签引入外部声明好的 css 文件

作用：此声明相当于调用，解决了不同网页间样式重复使用的问题，一次声明，随处使用.

！注意： 如果不同的声明给同一个标签赋予了同一个样式，则遵循就近原则，谁离标签近，谁就会被显示.即 标签上的 style > head 中的 style > link的 css

二、 css的选择器

1. 标签选择器

代码格式：

标签名{

样式名1 ： 样式值1；
.........

}

作用：

会将当前网页内的所有该标签增加相同的样式

2. id选择器

代码格式：

#标签的id属性值{

样式名1 ： 样式值1；
.........

}

作用：

给某个指定的标签添加指定的样式

3. class类选择器

代码格式：

.标签的class属性值{

样式名1 ： 样式值1；
.........

}

作用：

给不同的标签添加相同的样式

4. 全部选择器

代码格式：

*{

样式名1 ： 样式值1；
.........

}

作用：

选择所有的HTML标签，并添加相同的样式

—————————————————————————————————————————————————

5. 组合选择器

代码格式：

选择器1,选择器2,.......{

样式名1 ： 样式值1；
.........

}

作用：
解决不同的选择器之间重复样式的问题

6. 子标签选择器

代码格式：

选择器1 子标签选择器{

样式名1 ： 样式值1；
.........

}

作用：

对某标签的子标签添加样式

7. 属性选择器

代码格式：

标签名[属性名=属性值]{

样式名1 ： 样式值1；
.........

}

作用：

选择某标签指定具备某属性并且属性名为某属性值的标签

三、css的使用过程

1. 声明css代码域

2. 使用选择器选择要添加样式的标签

• 使用*选择器来给整个页面添加基础样式
• 使用类选择器给不同的标签添加基础样式
• 使用标签选择器给某类标签添加基础样式
• 使用id、属性选择器、style属性声明方式给某个标签添加个性化样式

3. 书写样式单

(1). 边框设置

属性名	属性值及含义
border	solid 1px red； 1px的红色实线
border-style	solid dotted dashed double; 实线上边框 ， 点线右边框 ， 虚线下边框， 双线左边框
border-radius	10px; 设置边框的角度
	50%; 边框变为圆

(2). 字体设置

属性名	属性值及含义
font-size	10px; 字体大小为10px
font-family	“黑体”； 字体格式为黑体
font-weight	bold; 设置字体加粗
color	red; 字体颜色为红色

(3). 背景设置

属性名	属性值及含义
background-color	red; 背景颜色为红色
background-img	url(图片的相对路径)
background-repeate	no-repeate; 设置图片不重复
background-size	cover; 图片平铺整个页面

(4). 浮动设置

属性名	属性值及含义
float	left; 左浮动
	right; 右浮动
	可使 li dd dt 标签 水平显示

(5). 文本设置

属性名	属性值及含义
line-height	10px; 行高10px
text-align	center; 居中
	left; 左对齐
	right; 右对齐
letter-spacing	10px; 间距为10px，内容是中文，间距是单个字的间距；内容是英语，间距是单个字母的间距
list-style-type	none; 用来去除 ul、ol 的原始样式，写在 li 里
text-decoration	none; 用来去除超链接的下划线

4. 伪类

(1). hover

1> 代码格式：

选择器1：hover{

	样式名1 ： 样式值2；
	.........
	
}

2> 作用：
当鼠标悬浮在选择器1的标签上时，样式名1 会从原样式值变为 样式值2

3> 样式单：

属性名	属性值及含义
transform	rotate(10deg); 顺时针旋转10°
	scale(1.5); 放大1.5倍
transition	1.5s; 加载时间为1.5秒，即用1.5秒的时间完成动作
z-index	1; 显示优先级为1，数字越大，优先级越高

(2). 待续…

四、 css的盒子模型

1. div标签(见HTML)

2. 外边距 ： margin

作用：

用来设置元素和元素之间的间隔

使用：

属性名	属性值及含义
margin	0px auto; 上下外边距是0px，水平居中
margin-top	10px; 上外边距10px
margin-bottom	10px; 下外边距10px
margin-left	10px; 左外边距10px
margin-right	10px；右外边距10px

3. 内边距 ： padding

作用：

设置内容和边框之间的距离

使用：

属性名	属性值及含义
margin	0px auto; 上下间隔是0px，水平居中
margin-top	10px; 上外边距10px
margin-bottom	10px; 下外边距10px
margin-left	10px; 左外边距10px
margin-right	10px；右外边距10px

！注意： 内边距不会改变内容区域的大小

4. 内容区域 ： width、height

作用：

改变内容区域的大小

使用：

属性名	属性值及含义
height	10px; 高10px
width	10px; 宽10px

五、css的定位

1. 相对定位：relative

作用：

参照物是自己

移动位置，只改变显示位置，不改变空间位置

相对定位不常用来改变上下的位置，通常用来移动左右的位置

通常也可以用来专门作为绝对定位需要的参照物，而添加相对定位

使用：

position:relative;
top:     px;
bottom:     px;
right:    px;
left:    px;

2. 绝对定位：absolute

作用：

参照物是有定位属性的父元素，如果父元素都没有定位属性，则参照物是 body 标签

使用绝对定位会使元素脱离标准文档流，即不占标准空间，飘起来，空间位置可以交叠

使用：

position:absolute;
top:     px;
bottom:     px;
right:    px;
left:    px;

3. 固定定位：fixed

作用：

参照物是body

使用固定定位会使元素脱离标准文档流

通常固定定位是做悬浮模块用的，比如固定顶部的导航，右下角的广告等

使用：

position:fixed;
top:     px;
bottom:     px;
right:    px;
left:    px;