kuiini的前端学习第三周

kuiini

已于 2023-11-19 20:34:56 修改

阅读量125

点赞数 5

分类专栏： CSS 文章标签：前端学习 css3 html5 笔记

于 2023-11-18 21:41:54 首次发布

本文链接：https://blog.csdn.net/kuiini/article/details/134483498

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS 基础知识

一、CSS 定义

1、初识 CSS

层叠样式表（Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 文档的呈现（美化内容）。

书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。
<title>CSS 初体验</title>
<style>
	/* 选择器 {} */
 p{
     /* CSS 属性 */
     color:red;
 }
</style>
<p>体验 CSS</p>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
 	<style>
		/* CSS 代码 */
    	/* 选择器 { CSS 属性} */
    	/* 属性名和属性值成对出现 → 键值对 */
    	p {
	         /* 文字颜色 */
	         color: red;
	        /* 字号 */
	        font-size: 30px;
	    }
 </style>
</head>
<body>
	<p>体验 CSS</p>
</body>
</html>

效果：
在这里插入图片描述

2、总结

CSS 书写在 title 标签下方
style 标签里面可以书写 CSS 代码
CSS 书写规则是选择器（属性名：属性值；）

二、CSS 引入方式

内部样式表：学习使用

CSS 代码写在 style 标签里面

外部样式表：开发使用

CSS 代码写在单独的 CSS 文件（.css)

在 HTML 使用 link 标签引入
<link rel="stylesheet" href="./my.css">

示例：

效果：
行内样式：配合 JavaScript 使用
CSS 写在标签的 style 属性里
<div style="color: red; font-size:20px;">这是 div 标签</div>
示例：
<!DOCTYPE html>
<html lang="en">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
</head>
<body>
  	
  	<div style="color: green; font-size: 30px;">这是 div 标签</div>
</body>
</html>
效果：

总结：

实际工作中，常用外部样式表 .CSS文件引入方式。
在 HTML 中，使用 link 标签可以引入外部样式表。

三、选择器

作用：查找标签，设置样式。

基础选择器

标签选择器
类选择器
id 选择器
通配符选择器

1、标签选择器

使用标签名作为选择器 → 选中同名标签设置相同的样式。
例如：p, h1, div, a, img…
<style>
 p {
     color: red;
 }
</style>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
  	<style>
      	/* 特点：选中同名标签设置相同的样式，无法差异化同名标签的样式 */
      	p {
          	color: red;
      	}
  	</style>
</head>
<body>
  	<p>这是 p 标签</p>
  	<p>1111</p>
  	<p>2222</p>
</body>
</html>

效果：
在这里插入图片描述

2、类选择器

作用：查找标签，差异化设置标签的显示效果。

步骤：

定义类选择器 → .类名
使用类选择器 → 标签添加 class=“类名”

<style>
	/*定义类选择器*/
    .red {
        color: red;
    }
</style>

<!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>

注意：

类名自定义，==不要用纯数字或中文，尽量用英文命名
一个类选择器可以供多个标签使用
一个标签可以使用多个类名，类名之间用空格隔开

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
  	<style>
      	/* 定义 */
      	.red {
          	color: red;;
      	}
      	.size {
          	font-size: 50px;
      	}
 </style>
</head>
<body>
  	<!-- 使用 -->
  	<!-- 一个类选择器可以给多个标签使用 -->
  	<p class="red">1111</p>
  	<p>2222</p>
  	<!-- 一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开 -->
  	<div class="red size">这是 div 标签</div>
</body>
</html>

效果：
在这里插入图片描述

开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd

3、id选择器

作用：查找标签，差异化设置标签的显示效果。

场景：id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式

步骤：
定义 id 选择器 → #id名
使用 id 选择器 → 标签添加 id=“id名”
<style>
	/*定义 id 选择器*/
    #red {
        color: red;
    }
</style>

<div id="red">这是 div 标签</div>
规则：

同一个 id 选择器在一个页面只能用一次

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
  	<style>
      	/* 定义 */
      	#red {
          	color: red;
      	}
  	</style>
</head>
<body>
  	<!-- 使用 -->
  	<div id="red">div 标签</div>
</body>
</html>

效果：
在这里插入图片描述

4、通配符选择器

作用：查找页面所有标签，设置相同样式。

通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同样式
* {
	color: red;
}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
  	<style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <p>p 标签</p>
    <div>div 标签</div>
    <h1>h1 标签</h1>
    <ul>
        <li>li</li>
        <li>li</li>
        <li>li</li>
    </ul>
    <strong>strong</strong>
</body>
</html>

效果：
在这里插入图片描述

四、画盒子

目标：使用合适的选择器画盒子

新属性：

属性名 作用
width 宽度
height 高度
background-color 背景色

属性名	作用
width	宽度
height	高度
background-color	背景色

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
  	<style>
      	.red {
          	/* 宽度 */
          	width: 100px;
          	/* 高度 */
          	height: 100px;
          	/* 背景色 */
          	background-color: red;
      	}
      	.yellow {
          	width: 200px;
          	height: 200px;
          	background-color: yellow;
      	}
  	</style>
</head>
<body>
  	<div class="red">div1</div>
  	<div class="yellow">div2</div>
</body>
</html>

效果：
在这里插入图片描述

五、文字控制属性

1、字体大小

属性名：font-size
属性值：文字尺寸，PC 端网页最常用的单位 px
p {
	font-size: 30px;
}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
  	<style>
      	/* 经验：谷歌浏览器文字有默认大小 16px */
      	p {
          	/* font-size 属性必须有单位，否则属性值不生效 */
          	font-size: 30px;
      	}
  	</style>
</head>
<body>
  	<p>测试字体大小</p>
 	</body>
</html>

效果：
在这里插入图片描述

2、字体粗细

属性名：font-weight

属性值：

数字（开发使用）

正常 400
加粗 700

关键字

正常 normal
加粗 bold
/* 不加粗 */
font-weight: 400;
/* 加粗 */
font-weight: 700;

正常	400
加粗	700

正常	normal
加粗	bold

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
  	<style>
      	h3 {
          	font-weight: 400;
      	}
      	div {
          	font-weight: 700;
      	}
  	</style>
</head>
<body>
  	<h3>h3 标题</h3>
  	<div>div 标签</div>
</body>
</html>

原效果：
在这里插入图片描述
当前效果：

3、字体倾斜

作用：清除文字默认的倾斜效果

属性名：font-style

属性值：

正常（不倾斜）：normal
倾斜：italic

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Document</title>
  	<style>
      	em {
          	font-style: normal;
      	}
      	div {
          	font-style: italic;
      	}
  	</style>
</head>
<body>
  	<em>em 标签</em>
  	<div>div 标签</div>
</body>
</html>

原效果：
在这里插入图片描述
当前效果：

4、行高

①行高

作用：设置多行文本的间距

属性名：line-height

属性值：

数字 + px
数字（当前标签font-size属性值的倍数）
line-height: 30px;
/* 当前标签字体大小为16px */
line-height: 2;

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
  	<style>
      	p {
          	font-size: 20px;
          	/* line-height: 30px; */
          	/* 行高值是数字，表示当前标签字体大小的倍数 */
          	line-height: 2;
      	}
  	</style>
</head>
<body>
  	<p>在大学期间，我将重点提升自己的专业素养水平，坚持学习高校专业性知识，同时注重科技创新能力和科学实践能力，综合发展。本人将认真完成本科专业课程，领会吸收所学知识，提升自身专业素养，根据自身学习情况合理制定学习计划。充分利用校园资源，例如学校图书馆，加强自身修养，汲取其它知识与本领。同时，积极参与学校组织活动，寻求为学校服务的机会，贡献自己的力量</p>
</body>
</html>

原效果：
在这里插入图片描述
当前效果：

行高的组成：上间距 + 文本高度 + 下间距

行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。

总结：

用数字 + px 或数字（当前标签 font-size 值得倍数）来书写 line-height 属性值
测量行高的方法是从一行文字得最顶（最底）测量到下一行文字的最顶（最底）

②行高-垂直居中

垂直居中技巧：行高属性值等于盒子高度属性值

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
  	<style>
      	div {
          	height: 100px;
          	background-color: skyblue;
          	/* 注意：只能是单行文字垂直居中 */
          	line-height: 100px;
      	}
  	</style>
</head>
<body>
  	<div>文字</div>
</body>
</html>

原效果：
在这里插入图片描述
当前效果：

5、字体族

属性名：font-family

属性值：字体名

font-family: 楷体;

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
  	<style>
      	div {
          	font-family: 楷体;
      	}
  	</style>
</head>
<body>
  	<div>测试文字</div>
</body>
</html>

原效果：
在这里插入图片描述
当前效果：

font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5BBB\4F53", sans-serif;
拓展（了解）：font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左到右依次查找

font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体(sans-serif)

6、font 复合属性

div {
  	/* 文字倾斜 */
 	font-style: italic;
  	/* 文字加粗 */
  	font-weight: 700;
  	/* 字体大小是30px */
  	font-size: 30px;
  	/* 行高为字号的2倍 */
  	line-height: 2;
	 	/* 字体是楷体 */
	 	font-famil: 楷体;
}

div {
	/* font: 是否倾斜 是否加粗 字号/行高 字体; */
	font: italic 700 30px/2 楷体;
}

使用场景：设置网页文字公共样式

复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。

font: 是否倾斜是否加粗字号/行高字体（必须按顺序书写）
div {
  	font: intalic 700 30px/2 楷体;
}
注意：字号和字体值必须书写，否则 font 属性不生效

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
  	<style>
      	/* 文字倾斜、文字加粗、字体大小是30px、行高2倍、楷体 */
      	div {
          	font: italic 700 30px/2 楷体;
          	/* fonr 属性必须写字号和字体，否则属性不生效 */
          	/* font: 30px 楷体; */
          	/* font: italic 700 30px/2; */
      	}
  	</style>
</head>
<body>
  	<div>测试 font 属性</div>
</body>
</html>

原效果：
在这里插入图片描述
当前效果：

7、文本缩进

属性名：text-indent

属性值：
数字 + px
数字 + em（推荐：1em = 当前标签的字号大小）
p {
    text-indent: 2em;
}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
  	<style>
      	p {
          	text-indent: 2em;
          	font-size: 30px;
      	}
  	</style>
</head>
<body>
  	<p>苍茫世界，天之高，地之广，人心不古。面对利益诱惑，有人出卖亲朋好友，有人始终坚贞不屈，有人看破红尘归隐山林，又有的人宁愿背负千古罪名，也不愿放弃……晴天，黑云滚动，厚重的云层随时可能坍塌下来。氤氲的彩色薄雾在天空中飘舞。凛冽的狂风在与山崖较着劲。海面波澜不定，澎湃着的浪花把岩石拍打得凸显狰狞。</p>
</body>
</html>

原效果：
在这里插入图片描述
当前效果：

8、文本对齐方式

作用：控制内容水平对齐方式

属性名：text-align

属性值：

属性值 效果
left 左对齐（默认）
center 居中对齐
right 右对齐

text-align: center;

属性值	效果
left	左对齐（默认）
center	居中对齐
right	右对齐

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
  	<style>
      	h1 {
          	/* 本质：居中的是文字内容，不是标题 */
          	/* text-align: left; */
          	text-align: center;
          	/* text-align: right; */
      	}
  	</style>
</head>
<body>
  	<h1>标题文字</h1>
</body>
</html>

原效果：
在这里插入图片描述
当前效果：

9、图片对齐方式

text-align本质是控制内容的对齐方式，属性要设置给内容的父级。
<style>
 div {
     text-align: center;
 }
</style>
<div>
  	<img src="#" alt="">
</div>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
  	<style>
      	div {
          	text-align: center;
      	}
  	</style>
</head>
<body>
  	<div>
      	<img src="./image/网图4.jpg" alt="">
  	</div>
</body>
</html>

原效果；
不宜放出😁
当前效果：
不宜放出😁

10、文本修饰线

属性名：text-decoration

属性值：

属性值 效果
none 无
underline 下划线
line-through 删除线
overline 上划线

属性值	效果
none	无
underline	下划线
line-through	删除线
overline	上划线

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Document</title>
  	<style>
      	a {
          	text-decoration: none;
      	}
      	div {
          	text-decoration: underline;
      	}
      	p {
          	text-decoration: line-through;
      	}
      	span {
          	text-decoration: overline;
      	}
  	</style>
</head>
<body>
  	<a href="#">a 标签，去掉下划线</a>
  	<div>div 标签，添加下划线</div>
  	<p>p 标签，添加删除线</p>
  	<span>span 标签，添加顶划线</span>
</body>
</html>

原效果：
在这里插入图片描述
当前效果：

11、color 文字颜色

属性名：color

属性值：

颜色表示方式 属性值 说明 使用场景
颜色关键字颜色英文单词 red、green、blue… 学习测试
rgb表示法 rgb(r, g, b) r,g,b表示红绿蓝三原色，取值：0 - 255 了解
rgba表示法 rgba(r, g, b, a) a表示透明度，取值：0 - 1 开发使用，实现透明色
十六进制表示法 #RRGGBB #000000，#ffcc00，简写：#000，#fc0 开发使用（从设计稿复制）

颜色表示方式	属性值	说明	使用场景
颜色关键字	颜色英文单词	red、green、blue…	学习测试
rgb表示法	rgb(r, g, b)	r,g,b表示红绿蓝三原色，取值：0 - 255	了解
rgba表示法	rgba(r, g, b, a)	a表示透明度，取值：0 - 1	开发使用，实现透明色
十六进制表示法	#RRGGBB	#000000，#ffcc00，简写：#000，#fc0	开发使用（从设计稿复制）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            background-color: aqua;
            /* color: red; */
            /* color: rgb(0, 255, 0); */
            /* color: rgba(0,0,0,0.3); */
            /* color: #0000ff; */
            color: #00f;
        }
    </style>
</head>
<body>
    <h1>h1 标签</h1>
</body>
</html>

原效果：
在这里插入图片描述
当前效果：

六、调试工具

作用：检查、调试代码；帮助程序员发现代码问题、解决问题

打开调试工具
浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查
F12

使用调试工具

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: red;
            font-size: 39;
        }
    </style>
</head>
<body>
    <div>测试文字</div>
</body>
</html>
/* 
	调试工具的细节
    1. 如果是错误的属性，有黄色感叹号
	2. CSS 属性的前面有多选框，如果勾选：这个属性生效；如果没有勾选：这个属性不生效
*/