前端学习笔记02--CSS快速了解

目录

CSS

一、CSS概述

二、CSS的选择器

2.1 CSS语法

2.2 选择器--基本类型

2.3 选择器--分组、继承

2.4 选择器--高级类型

三、CSS常用样式

3.1 样式--背景

3.2 样式--文本

3.3 样式--字体

3.4 样式--链接

3.5 样式--表格

3.6 样式--轮廓

四、CSS框模型

4.1 CSS框模型示意图

4.2 CSS框模型--内边距、边框、外边距

五、值复制

六、CSS定位

定位-position：流、相对、绝对、固定、浮动定位

七、伪类&伪元素

7.1 伪类--主要针对超链接

7.2 伪元素

---

CSS

Cascading Style Sheets层叠样式表。

修饰HTML标签的显示。

 

一、CSS概述

CSS：数据(html)和显示(css)分离

外部样式的引入方式：

优先级：就近原则，后加载的覆盖先加载的。

 

 

二、CSS的选择器

2.1 CSS语法

选择器{
      属性：属性值；
}

选择器：选取HTML页面中的标签元素。

属性：设置相关的属性值。

 

2.2 选择器--基本类型

元素选择器、id选择器(不推荐使用，JS使用元素id属性)、类选择器(推荐使用)

 

 

2.3 选择器--分组、继承

 

2.4 选择器--高级类型

属性选择器： 选择器[属性='值']

/* 元素选择器 */
p{
	color: blue;
}

/* id选择器 */	
/* 不建议在CSS中使用，JS要使用元素的id属性 */
#pId{
	color: aqua;
	font-size: 24px;
}	

/* 类选择器 */
.pClass{
	color: aqua;
	font-size: 24px;
}

/* 分组选择器 --多个元素共享*/
p,h1,#pId,.pClass{
	font-weight: bolder; /* 字体加粗*/
}

/* 继承选择器 --body下子元素受到影响*/
body{
	font-family: 宋体; /* 设置字体*/
}

/* 后代选择器:影响所有后代 */
h1 span{
	color: red;
}

/* 子元素选择器：只影响直属的子元素 */
h2 > strong{
	color: red;
}

/* 相邻兄弟选择器 */
h2+p{
	color: red;
}

/* 属性选择器 */
input[type="password"]{
	border-color: red;
}

 

三、CSS常用样式

3.1 样式--背景

 

3.2 样式--文本

 

3.3 样式--字体

 

3.4 样式--链接

 

3.5 样式--表格

 

3.6 样式--轮廓

 

四、CSS框模型

4.1 CSS框模型示意图

Box Model--盒子模型，规定了元素框处理 元素内容、内边距、边框和外边距 的方式。

 

4.2 CSS框模型--内边距、边框、外边距

 

 

五、值复制

 

六、CSS定位

定位-position：流、相对、绝对、固定、浮动定位

 

 

七、伪类&伪元素

7.1 伪类--主要针对超链接

超链接的几种状态。

结合display实现简单的下拉窗口。

 

7.2 伪元素