CSS基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_47397104/article/details/112765337

Css 入门

一、Css的基本概念：

Css全称层叠样式表（csacding style sheet）用于修饰渲染页面的技术。可提高编码效率，简化代码

二、Css的三种引入方式

1. 内联方式：

在标签的style属性中添加样式代码，不能复用

<p style="color:blue">...</p>

2. 内部方式：

在head标签里面添加style标签，在标签体内写样式代码，仅可以在当前页面复用，不能多页面复用

<head>
	<style>
		p{color:blue;font-size:30px;}
	</style>	 
</head>

3. 外部方式：

在单独的css样式文件中写样式代码，在html页面通过link标签引入，可以实现多页面复用，并且可以将html代码和css样式代码分离开

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

当指定内容相冲突的时候：内联方式拥有最优先级，外部方式和内部方式取决于书写顺序

三、CSS的三大特性

1. 继承性：元素可以继承上级元素的文本和字体相关样式，部分标签自带效果不受继承影响，比如：超链接的字体颜色， h1-h6字体大小不受继承影响.
2. 层叠性：多个选择器有可能选择到同一个元素，如果添加的样式不同则全部层叠生效，如果样式相同则由优先级决定哪个生效
3. 优先级：选择器作用范围越小优先级越高，id>class>标签名>继承

四、选择器 —— 用来选取页面中的元素

优先级：id>class>标签

1. 标签选择器

格式：标签名{样式代码}，选取页面中所有同名的标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例</title>
		<style>
			p{
				color:red;
				}
		</style>
	</head>
	<body>
		<p>...</p>
	</body>
</html>

2. class（类）选择器

格式：.class{样式代码}，选取页面中某一类元素，给需要选取的元素添加相同的class属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例</title>
		<style>
			.a{
				color:blue;
				}
		</style>
	</head>
	<body>
		<p class="a">...</p>
		<span class="a">...</span>
	</body>
</html>

3. id选择器

格式：#id{样式代码}，选取页面中对应id的元素，当需要选择页面中的某一个元素时使用，页面当中的元素要保证id是唯一的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例</title>
		<style>
			#b{
				color:pink;
				}
		</style>
	</head>
	<body>
		<p id="b">...</p>
	</body>
</html>

4. 分组选择器

格式：#id,.class,div{样式代码}，将多个选择器合并成一个选择器

5. 任意元素选择器

格式：格式：*{样式代码}，选取页面中所有的元素

6. 属性选择器

格式：标签名[属性名=‘值’]{样式代码}，通过元素的属性去选择元素

7. 子孙后代选择器

格式：body div span{样式代码} ，匹配body里面的div里面的所有span(包括后代)

8. 子元素选择器

格式：body>div>span{样式代码}，匹配body里面的div里面的span子元素

9. 伪类选择器

格式: a:visited/link/hover/active{样式代码}，该选择器选中的是元素的状态(未访问/访问过/悬停/点击)

五、颜色赋值

三原色：红绿蓝 red green blue rgb 每个颜色的取值范围0-255
1. 颜色单词 red
2. 6位16进制 #ff0000 每两位表示一个颜色 ff=255
3. 3位16进制 #f00 每一位表示一个颜色 f00=ff0000
4. 3位10进制 rgb(255,0,0)
5. 4位10进制 rgba(255,0,0,0-1) a=alpha 透明度值越小越透明

六、背景图片

1. 设置背景图片：background-image: url(路径)
2. 设置背景图片尺寸：background-size: 200px 300px;
3. 禁止重复：background-repeat: no-repeat;
4. 设置背景图片位置：background-position: 50% 100%;

七、文本和字体相关样式

1. 文本修饰

text-decoration: overline      /* 上划线 */
				 underline     /* 下划线 */
				 line-through  /* 删除线 */
				 none          /* 去掉下划线 */

2. 对齐方式

text-align: left      /* 靠左 */ 
			right     /* 靠右 */
			center    /* 居中 */

3. 文本颜色

color: red;

4. 行高(当值等于高时，可以实现垂直居中)

line-height: 20px;

5. 文本阴影

text-shadow: h-shadow v-shadow blur color;
/* h-shadow：水平阴影位置 */
/* v-shadow：垂直阴影位置 */
/* blur：浓度（值越大越模糊） */
/* color：颜色 */

6. 字体大小(默认大小16px)

font-size: 20px;

7. 字体设置

font-family: xxxx,xxx,xxx,xxx;   //设置多个字体，浏览器支持哪个就用哪个，都不支持就是默认的
font: 20px xxx,xxx,xxx;

8. 斜体

font-style: italic;

八、元素显示方式display

1. block：块级元素, 独占一行,可以修改元素宽高，包括：h1-h6，p，div等
2. inline：行内元素, 共占一行,不能修改元素宽高，包括：span，b，i，small，超链接等
3. inline-block：行内块元素，共占一行并且可以修改元素宽高，包括：input，img等

元素默认的显示方式可以修改，常见的修改就是将行内元素的显示方式改成块级或行内块，因为行内元素不能改宽高

九、盒子模型

学习盒子模型主要学习的是如何控制元素的显示效果：大小位置内容位置边框

盒子模型=宽高+外边距+内边距+边框，作用：控制元素的显示效果
- 宽高：控制元素的显示大小
- 外边距：控制元素的显示位置
- 内边距：控制元素内容的位置
- 边框：控制元素边框效果

宽高width/height

赋值方式：1. 像素 2. 上级元素百分比
行内元素不能修改宽高

外边距margin

元素距上级元素或相邻兄弟元素的距离称为外边距

赋值方式：

单独某个方向添加外边距

margin-left: 50px;
margin-bottom: 50px;
margin-top: 50px;
margin-right: 20px;

给四个方向添加外边距
```
margin: 20px;
```
上下和左右赋值
```
margin: 20px 40px;
```
块级元素居中
```
margin: 0 auto;
```
上右下左赋值，顺时针
```
margin: 10px 20px 30px 40px;
```

上下相邻两个元素外边距取最大值，左右相邻外边距累加
粘连问题：当元素上边缘和上级元素上边缘重叠时，给元素添加上外边距会出现粘连问题，给上级元素添加overflow: hidden解决此问题

内边距padding

元素内容距离元素边缘的距离称为内边距
给元素添加内边距会影响元素所占的宽高

赋值方式：和外边距类似

padding-left/right/top/bottom:10px;  /* 单独某个方向赋值 */
padding:10px;                        /* 四个方向10 */
padding:10px 20px;                   /* 上下10 左右20 */
padding:10px 20px 30px 40px;         /* 上右下左,顺时针 */

边框

赋值方式：border：粗细样式颜色;

单独方向赋值：border-left/right/top/bottom: 粗细样式颜色
圆角：border-radius: 5px; 值越大越圆，值大于宽高一半时为圆形
去掉边框：border: none/0;

十、定位方式

1. 文档流定位(静态定位)

元素默认的定位方式
特点：块级元素从上到下排列，行内元素从左向右排列
通过外边距控制元素位置
格式：position: static;

2. 相对定位

格式：position: relative;
特点：元素不脱离文档流(仍然站着原来的位置)
通过left/right/top/bottom控制元素的显示位置，值是相对于元素的初始位置
场景：当需要移动某个元素，并且其它元素位置不变的时候使用相对定位

3. 绝对定位

格式：position: absolute;
特点：元素脱离文档流(不占原来的位置)
通过left/right/top/bottom控制元素的显示位置，值是相对于窗口(默认)或某一个上级元素 (需要在上级元素中添加position: relative)
场景：当需要在页面中添加一个元素，这个元素不会影响其它元素的位置，这时使用绝对定位

相对定位和绝对定位总结：如果需要实现多个元素的层叠效果，则需要将默认的文档流定位改成相对定位或绝对定位，如果元素需要保留原有位置则使用相对定位，不需要保留原有位置则使用绝对定位

4. 固定定位position:fixed;

格式：position:fixed
特点：元素脱离文档流
通过left/right/top/bottom相对于窗口做位置偏移
场景：当需要将元素固定在窗口的某个位置时使用固定定位.

5. 浮动定位

格式：float:left/right;
特点：元素脱离文档流，元素从所在行向左或向右浮动，当撞到上级元素或其它浮动元素时停止.
如果一行装不下会自动换行，换行时有可能会被卡主
应用场景：当需要将纵向排列的元素改成横向排列时使用浮动定位

十一、常用属性

行内元素垂直对齐方式：vertical-align

vertical-align: top      /* 上对齐 */
				bottom   /* 下对齐 */
				middle   /* 中间对齐 */
				baseline /* 基线对齐（默认） */

如果需要对页面中的某一个元素进行位置微调, 可以使用相对定位进行调整,这种方式不会影响其它元素的显示效果

溢出设置overflow

overflow: hidden     /* 超出范围隐藏 */
		  visible	 /* 超出范围显示 */
		  scroll	 /* 超出范围滚动显示 */

图片悬停缩放

1. 需要先设置图片动画持续时间

img{
	/* 设置缩放动画持续时间,单位是秒 */
	transition-duration: 1s;
}

2. 悬停时设置动画缩放倍数

img:hover{
   	/* 设置缩放动画为1.2倍 */
   	transform: scale(1.2);
}