第三章 CSS样式

百密一疏^^

于 2022-06-06 17:52:30 发布

阅读量161

点赞数 1

分类专栏：前端学习

本文链接：https://blog.csdn.net/m0_71674778/article/details/125150642

版权

CSS 样式表选择器内容与样式分离优先级

关键词由CSDN通过智能技术生成

前端学习专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1.CSS入门

1.1为什么需要CSS

通过定义CSS样式表，能让网页具有美观一致的界面，可以将网页制作得更加绚丽多彩。一个样式文件可以作用于多个页面，具有更好的易用性和扩展性，通过修改样式文件，能制作出内容相同，而外形不同的多姿多彩得页面。

通过CSS可以实现内容和样式分离。方便后期维护。

1.2 CSS概念

Cascading Style shet 层叠样式表：层叠性

1.3 CSS应用

1.3.1 内部样式表(在head标签中通过style标签定义样式)

语法格式：

<head>
....
<style type="text/css">
选择器
{ 
  样式属性1 : 值1 ;  
  样式属性2 : 值2 ;
  ...  
}
</style>
</head>

选择器：用于选择到某个html元素，然后为元素设置css样式

注意：所有得符号用英文

1.3.2 外部样式表

 外部样式表的使用步骤：
  1.定义好html页面内容
  2.新建一个单独的css文件
  3.在css文件中直接定义样式内容
  4.在html文件中引用css文件

<!-- 引入外部的样式表文件 -->
<link rel="stylesheet" href="样式文件路径" type="text/css" />

css1.caa

h1{
	color:red;
}

.ys1{
	color:green;
}

.ys2{
	color:blue;
}

css2.css

h1{
	color:gray;
}

.ys1{
	color:orange;
}

.ys2{
	color:pink;
}

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

  <!--
  外部样式表的使用步骤：
  1.定义好html页面内容
  2.新建一个单独的css文件
  3.在css文件中直接定义样式内容
  4.在html文件中引用css文件
  -->

  <!--在当前html中引用外部样式表-->
  <link rel="stylesheet"
	    type="text/css"
		href="css1.css" />

 </head>

 <body>
  <h1>这是表题内容</h1>
  <p class="ys1">这是P标签内容</p>
  <p class="ys2">这是P标签内容</p>
 </body>
</html>

优点：一个样式文件可以作用于多个页面，具有更好得易用性和扩展性。通过修改样式文件，能制作出内容相同，而外观不同的多姿多彩的页面。

1.3.3 行内样式表

通过style属性定义行内样式

<!-- 行内样式表 ：不推荐使用 -->
<h2 style="color:red; font-family:宋体;">内容</h2>

2. 基础选择器

2.1 标签选择器

使用HTML标签名定义样式，匹配到的HTML元素，自动应用定义的样式

<!--定义css内部样式表:在head标签内部定义
	样式的作用:目的是修饰html内容
  -->
  <style type="text/css">
	/* 注释代码 

	选择器
	{
		样式属性1 : 值1 ;
		样式属性2 : 值2 ;
		...
	}	

	选择器:用于选择匹配页面中的特定元素
	标签选择器: 用html标签名做选择器，自动匹配对应的标签元素

	问题: 如何只让第二句和第四句变绿
	类选择器,id选择器
	*/

	h1
	{
		font-size:40px; /*字体大小*/
		color: red;  /*字体颜色*/
		text-align:center;  /*居中*/
	}
	
	p
	{
		color:green;
		font-size:20px;
		text-align:center;
	}

  </style>

<h1>静夜思</h1>
  <p>床前明月光,</p>
  <p>疑是地上霜。</p>
  <p>举头弯明月,</p>
  <p>低头思故乡。</p>

2.2类选择器

进行更细致化或更灵活的样式控制要使用类样式

使用耒阳市(类选择器)的步骤：

①定义类样式：在style标签中用”.样式名“的方式定义类样式

②使用类样式：在需要使用类样式的元素中通过class属性引用样式名

<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	/*请让第2个p和第2个li变红*/
	/*进行更细致化或更灵活的样式控制要使用类样式*/
	/*
	使用类样式(类选择器)的步骤：
	1. 定义类样式: 在style标签中用".样式名"的方式定义类样式
	2. 使用类样式: 在需要使用类样式的元素中通过class属性引用样式名
	*/

	.hs{
		color:red;
	}

  </style>
 </head>

 <body>
  <h1 class="hs">这是标题内容</h1>
  <p>这是第1个P标签</p>
  <p class="hs">这是第2个P标签</p>
  <p>这是第3个P标签</p>
  <p>这是第4个P标签</p>
  <ul>
	<li>这是第1个li</li>
	<li class="hs">这是第2个li</li>
	<li>这是第3个li</li>
	<li>这是第4个li</li>
  </ul>
 </body>
</html>

2.3 id选择器

id选择器：identifier唯一的

id属性定义的元素在整个页面必须唯一，也就是id名是不能重复

id一般用于定义页面的布局元素div，span

id在js中用于js获取对象的时候使用

id定义样式的步骤：

①在style标签中用”#id名“的方式定义样式

②在需要使用id样式的元素中通过id属性引用id属性引用id名来使用样式

<head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	/*id选择器: identifier 唯一的
	  id属性定义的元素在整个页面必须唯一，也就是id名是不能重复
	  
	  id一般用于定义页面的布局元素 div,span
	  id在js中用于js获取对象的时候使用

	  id定义样式的步骤：
	  1. 在style标签中用 "#id名"的方式定义样式
	  2. 在需要使用id样式的元素中通过id属性引用id名来使用样式
	*/

	#bt{
		color:blue;
	}

	#p2{
		color:green;
	}

	#li3{
		color:red;
	}

  </style>
 </head>

 <body>
  <h1 id="bt">这是标题内容</h1>
  <p >这是第1个P标签</p>
  <p id="p2">这是第2个P标签</p>
  <p>这是第3个P标签</p>
  <p>这是第4个P标签</p>
  <ul>
	<li>这是第1个li</li>
	<li>这是第2个li</li>
	<li id="li3">这是第3个li</li>
	<li>这是第4个li</li>
  </ul>
 </body>
</html>

2.4优先级

样式权重:对于一个元素，只是用权重高的样式

！important：1000

行内： 1000

id：100

类：10

标签：1

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

  <!--定义样式表-->
  <style type="text/css">
	/*
	样式权重: 对于同一个元素，只使用权重高的样式
	!important: 10000
	行内:       1000
	id:         100
	类:         10
	标签:       1
	*/

	#zs{
		color:purple;
	}

	.huangs{
		color:orange;	
	}

	/*交叉选择器*/
	h1.huangs{
		color:red !important ;
	}
	/*后面覆盖前面的,就近原则*/
	h1{
		color:blue;
	}
  </style>

 </head>

 <body>
  <h1 class="huangs" id="zs" style="color:green;">这是为难的标题</h1>
  <h1>asdfasdf</h1>
 </body>
</html>