02__CSS语言

最新推荐文章于 2024-05-18 16:20:54 发布

左绍骏

最新推荐文章于 2024-05-18 16:20:54 发布

阅读量106

点赞数

分类专栏： Web开发文章标签： css

本文链接：https://blog.csdn.net/LeoZuosj/article/details/120586215

版权

Web开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS语言

1. CSS的简介

（1）什么是CSS？
Cascading Style Sheets是层叠样式表，用来定义网页的显示效果。
可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。
* 样式表：有很多的属性和属性值，来设置内容样式。
* 层叠：一层一层的，样式的优先级。
** 优先级：最终以谁的样式为准。
* 使用css目的是：把网页的内容和样式进行分离，利用代码的维护。
* 想要使用css，不能单独使用，要和html结合使用
* css和html的如何结合使用。

2. css和html的结合方式

css和html有四种结合方式
第一种：使用html标签里面的属性 style=“css的代码”
* 代码 <div style="background-color:red;color:blue;">

<html>
 <head>
  <title>css示例</title>
 </head>
 <body>
	<div style="background-color:red;color:blue;">天之道，损有余而补不足，是故虚胜实，不足胜有余。</div>
 </body>
</html>

第二种：使用html的标签

* 格式
<style type="text/css">
	css的代码;
</style>
* 代码
  <style type="text/css">
	div {
		background-color:red;
		color:black;
	}
  </style>

<html>
 <head>
  <title>css示例</title>
  <style type="text/css">
	div {
		background-color:red;
		color:black;
	}
  </style>
 </head>
 <body>
	<div>天之道，损有余而补不足，是故虚胜实，不足胜有余。</div>
 </body>
</html>

第三种：使用html标签实现 link，写在head里面
* 首先创建css文件，在css文件里面写css代码
* 在html中使用link标签引入css文件
* 代码 <link rel="stylesheet" type="text/css" href="1.css"/>

<html>
 <head>
  <title>css示例</title>
  <link rel="stylesheet" type="text/css" href="1.css"/>
 </head>
 <body>
	<div>天之道，损有余而补不足，是故虚胜实，不足胜有余。</div>
 </body>
</html>

第四种：使用html的style标签，在标签里面使用语句样式操作
* 首先创建css文件，在css文件里面写css代码
* 写style标签，在标签里面 @import url(css路径);

<html>
 <head>
  <title>css示例</title>
  <style type="text/css">
	@import url(1.css);
  </style>
 </head>
 <body>
	<div>天之道，损有余而补不足，是故虚胜实，不足胜有余。</div>
 </body>
</html>

/*
 1.css代码
*/
div {
	background-color:yellow;
	color:black;
}

3. css的选择器

（1）css优先级
* 在一般情况下，优先级是后加载的优先级高
（2）格式规范：属性名称1:属性值1;属性名称2:属性值2;
（3）选择器：作用在哪个标签上（要对哪个标签里面的内容进行操作）
* css有三个基本选择
第一个：标签选择器
** 使用标签名称作为选择器
div {
background-color: red;
}

<html>
 <head>
  <title>css示例</title>
  <style type="text/css">
	div {
		background-color: red;
	}
  </style>
 </head>
 <body>
	<div style="background-color:green;">天之道，损有余而补不足</div>
	<div>天之道，损有余而补不足，是故虚胜实，不足胜有余。</div>
 </body>
</html>

第二个：class选择器
** 每个html标签上面都有一个属性class，通过设置class属性的值
** 代码
.haha {
background-color:red;
}

<html>
 <head>
  <title>css示例</title>
  <style type="text/css">
	/*div.haha {
		background-color:blue;
	}
	p.haha {
		background-color:blue;
	}*/
	.haha {
		background-color:red;
	}
  </style>
 </head>
 <body>
	<div class="haha">天之道，损有余而补不足，是故虚胜实，不足胜有余</div>
	<p class="haha">天之道，损有余而补不足，是故虚胜实，不足胜有余</p>
 </body>
</html>

第三个：id选择器
** 每个html标签都有一个属性id，通过设置id的属性值
** 代码
#hehe {
background-color:green;
}

<html>
 <head>
  <title>css示例</title>
  <style type="text/css">
	/*div#hehe {
		background-color:yellow;
	}
	p#hehe {
		background-color:yellow;
	}*/
	#hehe {
		background-color:green;
	}
  </style>
 </head>
 <body>
	<div id="hehe">天之道，损有余而补不足，是故虚胜实，不足胜有余</div>
	<p id="hehe">天之道，损有余而补不足，是故虚胜实，不足胜有余</p>
 </body>
</html>

（4）选择器的优先级
* style > id选择器 > class选择器 > 标签选择器

<html>
 <head>
  <title>html示例</title>
  <style type="text/css">
	/*
	id选择器
	*/
	#hehe {
		background-color:blue;
	}
   /*
	class选择器
	*/
	.haha {
		background-color:green;
	}
	/*
	标签选择器
	*/
	div {
		background-color:red;
	}
  </style>
 </head>
 <body>
	<div id="hehe" class="haha" style="background-color:yellow;">天之道，损有余而补不足，</div>
	<div>是故虚胜实，不足胜有余。</div>
	<div>不足胜有余。</div>
 </body>
</html>

4. css的扩展选择器

（1）关联选择器
* 设置嵌套标签的样式
** 代码
div p {
background-color:red;
}

<html>
 <head>
  <title>html示例</title>
  <style type="text/css">
	div p {
		background-color:red;
	}
  </style>
 </head>
 <body>
	<div><p>AAAAAAAAAAAAAAA</p></div>
	<p>BBBBBBBBBBBBBBBB</p>
 </body>
</html>

（2）组合选择器
* 设置不同的标签具有相同的样式
* 代码
div,p {
background-color:green;
}

<html>
 <head>
  <title>html示例</title>
  <style type="text/css">
	div,p {
		background-color:green;
	}
  </style>
 </head>
 <body>
	<div>这是div里面的内容</div>
	<p>这是p标签里面的内容</p>
 </body>
</html>

（3）伪元素选择器
* 比如超链接为例，
* 状态：原始状态、鼠标放上去的状态、点击状态、点击之后的状态
:link :hover :active :visited

<html>
 <head>
  <title>html示例</title>
  <style type="text/css">
	/*原始状态*/
	a:link {
		background-color: red;
		font-size:20px;
	}
	/*悬停状态*/
	a:hover {
		background-color: green;
		font-size:30px;
	}
	/*点击状态*/
	a:active {
		background-color: #660000;
		font-size:50px;
	}
	/*点击之后的状态*/
	a:visited {
		background-color: #ff33cc;
		font-size:20px;
	}
  </style>
 </head>
 <body>
	<a href="www.baidu1.com.cn" target="_blank">超链接</a>
 </body>
</html>

左绍骏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
02__CSS语言

CSS语言1. CSS的简介（1）什么是CSS？Cascading Style Sheets是层叠样式表，用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。* 样式表：有很多的属性和属性值，来设置内容样式。* 层叠：一层一层的，样式的优先级。** 优先级：最终以谁的样式为准。* 使用css目的是：把网页的内容和样式进行分离，利用代码的维护。* 想要使用css，不能单独使用，要和html结合使用* css和html的如何
复制链接

扫一扫