css

最新推荐文章于 2024-11-01 12:26:05 发布

正在学习的大萌新

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量86

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_54337856/article/details/112684979

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

注意：此章为后端人员，只需了解即可，不需要过分记忆，皆因多数时间后端不会使用。
如英语过6级，无需查看此章，只需记住使用CSS时一些特定语法。
CSS概述
前端css:Cascding Style Sheet(层叠眼样式表语言)
CSS是一种样式表语言，专门用来修饰HTML页面。美化页面。
在HTML中嵌入CSS的三种方式：
内联样式：此样式优于内部样式和外部样式
<标签 style =“样式名：样式值”；“样式名：样式值…”><标签>
内部样式：从上到下顺序覆盖

外部样式：从上到下顺序覆盖
将css代码写入一个指定文件然后引入

```<html>
	<head>
		<meta charset="utf-8" />
		<title>css语言的编辑位置</title>
		<!--如果编写css了，三种写法的优先级：
							内联样式：永远是第一位
							内部样式和外部样式的优先级的顺序：从上到下的顺序覆盖-->
		<!--代码编写位置二：将所有的css代码提出来，放如一个style的标签中。内部写法--->
		<style type="text/css">
			div{
				color:burlywood;
			}<!--对所有的div标签进行设置，大括号中设置属性-->
		</style>
		<!---代码编写位置三：将所有的css代码提取出来，放入一个独立的css文件中，外部样式写法-->
		<link href="css/a.css" type="text/css" rel="stylesheet"/>
	</head>
	<body>
		<!--代码编写位置 一：可以在任意的html标签中使用style属性，在属性中便编写
		css代码，内联样式写法
		这种写法会导致过多的代码，使得标签看起来比较乱-->
		
		<div style="color:aqua;font-size:30px">撒旦发生法发我的</div>
		<div>按时打算发给v额外付钱</div>
		<div>阿斯顿发份v额法网法网发给我</div>
		<div>啊师傅瓦房店市公司</div>
		<span>埃是法国文案</span><br />
		<span>撒飞洒乳房war发放给·11</span>
	</body>
</html>

CSS中的选择器！
CSS中的选择器分位基本选择器和其他选择器！
1.类选择器：此选择器优于标签选择器
2.标签选择器：
3.id 选择器：此选择器由于类选择器
其使用方式如下：

<html>
	<head>
		<meta charset="utf-8">
		<title>基本选择器</title>
		<style type="text/css">
			/* 类选择器使用标签class属性值*/
			.c1{
				color:blue;
			}/*类选择器大于标签选择器*/
			/*标签选择器，使用的是我们的标签名称*/
			span{
				color:red;
			}/*id选择器大于类标签*/
			/*id 选择器：使用标签中id属性值。使用#*/
			#d1{
				color:black;
			}
		</style>
	</head>
	<body>
		<div id="d1" class="c1">阿萨法发噶我认罚五个挖吖我发给哇</div>
		<div class="c1">阿萨法发噶我认罚五个挖吖我发给哇</div>
		<span class="c1">阿萨法发噶我认罚五个挖吖我发给哇</span>
		<span >啊是富农矮黑人佛i瓦活佛共i阿黄体哦啊</span>
	</body>
</html>

其他选择器
统配选择器：表示整个页面，
分组选择器：将多种选择器放在一起
属性选择器：
其使用方式如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		/* 统配选择器：表示整个页面，但不包含输入的*/
		*{
			font-size:35px;
		}
		/*分组选择器 将多种选择器放一起*/
		span,label,#d1,c1{
			color:red;
		}
		/*属性选择器，此处type直接对应的是双引号中的属性，如改成password，将改为密码背景*/
		input[type="text"]{
			background-color:red;
		}/*注意如要区分input是否嵌套，则在其input前加入标签
		如： form input【】{}*/
	</style>
	
	<form action="http://www.jd.com" method="get">
		<label>账号：</label>
			<input type="text" placeholder="请输入账号" size="10"
			id ="d1" class="c1">
			
		<label>密码：</label>
			<input type="password" placeholder="请输入密码" size="10"
			id="d1" class="c1">
	</form>
</html>

文本和文字
在其文本和文字有许多的设置，具体请参考API文档。此下代码只列下部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本和文字</title>
		<style type="text/css">
			#d1{font-size:150%;/*文本的样式*/
			font-style:italic;/*倾斜*/
			font-variant:small-caps;/*英文字母转换*/
			font-weight:bolder;/*加粗*/
			font-family:华文彩云;/*字体，需注意此字体一定要是有效的准确名称*/
			}
			#d2{
				text-decoration-line:line-through;/*添加线的样式*/
				text-decoration-color:red;/*颜色*/
				text-decoration-style:wavy;/*线性*/
				text-indent:2em;/*间距*/
				line-height:1.5em;/*行高*/
				text-align:center;/*居中*/
				letter-spacing: 0.5em;/*字符距离*/
				direction:rtl;/*字体方向*/
			}
			h1,h3,h4{
				background-color:red;
			}
		</style>
	</head>
	<body><span>
		<h1>afweuiiiiiiiisdfsdfwetw</h1>
		<h2>afweuiiiiiiiisdfsdfwetw</h2>
		<h3>afweuiiiiiiiisdfsdfwetw</h3>
		<h4>afweuiiiiiiiisdfsdfwetw</h4>
		</span>
		<div id="d1">阿瑟东sadasdsi啊哈佛i娲皇宫i哦啊我国呵呵【忽然色鬼瑟瑞【股票</div>
		<div id="d2">阿瑟东sadasdsi啊哈佛i娲皇<br/>宫i哦啊我国呵呵【忽然色鬼瑟瑞【股票</div>
	</body>
</html>

超链接的多种状态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style type="text/css">
			/* 未被访问*/
			a:link{
				color:red;
				
			}
			/*已经被访问*/
			a:visited{
				color:green;
			}
			/*鼠标的悬停*/
			a:hover{
				color:blue;
				font-size:50px;
			}
			/*激活*/
			a:active{
				color:yellow;
			}
			</style>
	</head>
	<body>
		<a href="http://www.jd.com"target="_blank">京东</a><br />
		<a href="http://www.baidu.com"target="_blank">百度</a><br />
		<a href="http://www.taopao.com">淘宝</a>
	</body>
</html>

至此所列都为参考，如想深入则需多多参考同行,API，等
如其所见。在CSS中多数代码无逻辑，死绑，只需要知道在其正确的位置使用正确的代码，便可得到正确的效果。
需注意：前台所有的页面，你所看到的不一定就是你想到的做法，一种效果有多种做法，不同的软件使用都有达成理想的效果，一切以效果为主！
最后请铭记：
只有产生商业价值的软件，才是正在的如软件！
如无商业价值，则将被历史埋汰。