第三天学习总结-CSDN博客

本文链接：https://blog.csdn.net/apple_51379126/article/details/123275452

本文详细介绍了CSS的基础知识，包括其用于页面样式设定的职责、样式表的使用方式（内联、内部、外部）、CSS语法、选择器（标签、ID、类）及其优先级，以及字体和文本样式的设定。强调了内容与表现的分离原则，提倡使用外部样式表以提高效率和代码复用性。

摘要由CSDN通过智能技术生成

今天上课主要学习了CSS，下面是具体内容：

html是用来封装数据，CSS是用来给页面数据进行样式效果设定。

CSS：层叠样式表：主要是负责页面的样式效果设置。（Cascading Style Sheet）

一个内容的最终呈现是多个样式叠加而成的

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

css的语法

Css注释 /* 我是注释的内容 */

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明；

如：selector {declaration1; declaration2; ... declarationN }

选择器是最终需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（key）是设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

Css注释 /* 我是注释的内容 */

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明；

如：selector {declaration1; declaration2; ... declarationN }

选择器是最终需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（key）是设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS和HMTL联合使用有两种使用方法分别是：内联样式、行内样式

内部样式：

内联样式可以实现css的样式，但是如果在一个页面中有很多相同的标签都需要同一个样式，在各自的标签内写css肯定不行，效率太低，而且html和css一起使用，看起来很臃肿，没有做到内容与表现相分离，不建议使用。

可以在html文件中直接把CSS代码抽取出来，在head标签中书写style标签，然后在引用到某个html标签上。

外部样式：

内部样式实现了同一页面中相同标签样式的统一，他是他的作用域仅仅是在一个页面，

如果在一个项目中，多个页面中有相同的标签，并且他们需要相同的CSS效果相同的时候，我们可以把CSS代码单独的抽取到一个独立的CSS文件中。在需要使用CSS代码的文件中引入这个CSS文件即可。

CSS文件中可以不用书写具体的style标签。而直接书写css代码。

使用link标签引入：

在head标签中可以直接使用link标签引入外部的css文件。

注意：link中的属性说明：

rel="stylesheet"表示连接的资源是一个样式表，即就是CSS文件,固定写法

type 表示连接的资源是文本资源，其中放的css代码，默认，可有可无

href表示资源的路径，css文件的地址。

样式优先级：

哪个css样式离标签最近，谁的优先级高，注意：只有发生冲突的时候才会考虑。

关于CSS的3个常用选择器：1：标签名选择器，2：id选择器，3：class选择器。

1：标签名选择器：

见名思意，就是通过标签的名字，选择最终css代码要作用的标签

Div,span -- 选择所有的div和span

Div span -- 选择的是div下面的所有的span。

2：id选择器：

在html中，所有标签中都有一个id属性，可以根据这个id的属性值，来确定CSS代码到底要作用在哪个标签上。

id 选择器以 "#" 来定义。要求每一个html标签的id属性值必须要唯一。

语法：

#id属性值{

css代码

} 注意：html标签中可以书写id属性，要求在html页面上所有的标签的id值不能重复，如果定义重复，虽然不会影响CSS的效果，但是后期学习JavaScript和DOM技术动态根据id获取页面上的标签时就会出现错误。记住：id唯一。

3：class选择器：

由于页面上的标签的id一般不会重复，使用id选择器只能给某个标签设置样式，如果有多个标签需要相同的样式，或者不同的标签需要相同的样式，这时我们可以使用html标签中的class属性，这时我们在css代码中就可以根据这个class属性值来选择css代码要作用的html标签。每一个html标签都可以书写class属性。

语法

.class属性值{

css代码

}

4：基本选择器的优先级：

ID选择器 > 类选择器 > 标签选择器。

5：字体样式：

font-family————设置字体类型

font-size—————设置字体大小

font-style—————设置字体风格

font-weight————设置字体的粗细

font————————在一个声明中设置所有字体属性。

6：文本样式：

color———————设置文本颜色

text-align—————设置元素水平对齐方式

text-indent————-设置首行文本的缩进

line-heigh—————设置文本的行高

text-decoration———设置文本的装饰。

行高 : 指的是文本行真实高度。

基线 : 并不是汉字的下端沿，而是英文字母"x"的下端沿。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<!-- 如果在本页中想使用外部的css样式的话，则一定要引入外部文件  -->
		
		
		<style>
			/* 
			 * 在这里编写的样式，则必须要遵循语法规则
			 * 选择器｛
			 * 	声明
			 * ｝
			 * */
			/* div 选中了当前页面的所有的 div标签 */
			/* 如果有重复的代码频繁的出现，代码的 冗余 */
			/*div{
				background-color: red;
				font-size: 30px;
			}*/
			
		</style>
		
	</head>
	<body>
		
		<!-- 写
			1、怎么写 -- 语法，选择器｛声明；声明｝， 声明=key:value, 如 color:red；
			2、写在哪里？
			  可以在三个地方：
			  1、任意的标签中，每一个标签都有一个style的属性，css样式可以在这个属性中编写,内联样式
			  	优点：直接作用在标签上， 缺点，只能作用在一个标签上
			  2、在html中的style标签中也可以编写css ： 内部样式
			  	优点：可以作用在多个标签上， 缺点：只能作用在本页
			  3、写在外部的css文件中 ， 外部样式
			  	某一个文件需要引用外部的css样式的话，需要使用link标签引入进来
			  	
			  如果三种类型的样式同时对某一个标签做相同样式设定的话，谁有效？
			  考虑优先级 ： 就近原则
			
			为谁去做美化，选中一些或者某一个标签， - 选择器
			为他做什么样的美化，具体的美化过程， --  声明
		-->
		
		<!--
			语法 ：选择器｛声明｝
			选择哪些标签进行样式的设定：标签名选择器，id选择器，class选择器/类选择器
		-->
		<style type="text/css">
			/* 选中了所有的div , 标签名选择器 */
			div{
				background-color: red
			}
			
			/*所谓的id选择器就是通过id的属性值选择最终的标签 ， #id的属性值 ，要求唯一  */
			#liu{
				background-color: blue ;
			}
			
			/* 类选择器，class选择器， 通过标签的class的属性值选择标签，class 是可以重复 
			 * 语法 ：.class的属性值
			 *  */
			/* 选中了所有的class = abc 的哪些标签*/
			.abc{
				background-color: yellowgreen;
			}
				
			/* 优先级 ：id >class > 标签名*/
			
			#spenEle{
				/* 字体进行样式的设定 */
				font-size: 80px;
				font-style: normal;
				font-family: "宋体";
				color: green;
				font-weight: 200;
			}
			
		</style>
		
		<span id="spenEle">震惊：还有二十分钟吃饭了</span>
		<span class="abc" style="font-size: 30px; color: red;">四大恶人之首：段延庆</span>
		<div>你心中的女神是：</div>
		<div id="liu" class="abc aaa">刘亦菲</div>
		<div id="shu" class="abc">舒畅</div>
		<div id="yang" class="abc">杨钰莹</div>
		<h2 class="abc">震惊：这个星期放假1天</h2>
		
		<br><br><br><br>
		<div>
			<a href="aaaa">
				<img src="img/falali.jpg" width="200px" height="100px" />
			</a>
		</div>
		
		<div>
			<h2>乌克兰南部欧洲最大核电站起火</h2>
			<p>最近【乌克兰南部欧洲最大核电站起火】事件在百度搜索的热度非常高，
				关注要排名的很多网友同样也在关注【乌克兰南部欧洲最大核电站起火 】这个事件，
				小编通过我们的AI舆情引擎查阅，为大家准备了完整关于【乌克兰南部欧洲最大核电站起火 】事件的所有相关内容，如果大家想知道情况的话，
				可以通过点击文章下方的热榜链接自动为您搜索与【乌克兰南部欧洲最大核电站起火】相关的事件内容。</p>
		</div>
		
		
	</body>
</html>