3.java web 之 CSS

最新推荐文章于 2023-03-17 13:23:29 发布

Harden13up

最新推荐文章于 2023-03-17 13:23:29 发布

阅读量215

点赞数 1

本文链接：https://blog.csdn.net/Harden13up/article/details/88053379

版权

java web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS ： 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]

常用选择器：

ID选择器内部引用 <style> </style>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*
			 
			 #ID的名称{
				  属性名称:属性的值;
				  属性名称:属性的值;
				}
			 * */
			#div1{
				color: red;
			}
			
		</style>
	</head>
	<body>
		<!--请将JAVAEE颜色改成红色-->
		<div id="div1">JAVAEE</div>
		<div>IOS</div>
		<div>ANDROID</div>
		
	</body>
</html>

后代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*请将H1下面的所有 em 元素 的内容颜色改成 红色*/
			/*中间以空格隔开的是后代选择器*/
			h1 > em{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>
			This is a 
			<em>儿子</em>
			<strong>
				<em>孙子</em>
			</strong>
		 heading
		</h1>
	</body>
</html>

属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--修改包含title属性的a标签-->
		<style>
			/*a[title='aaa']{
				color: red;
			}*/
			a[href][title]{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<a href="#" title="aaa">张三</a>
		<a href="#" >李四</a>
	</body>
</html>

伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			a:link {color: red}		/* 未访问的链接 */
			a:visited {color: #00FF00}	/* 已访问的链接 */
			a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
			a:active {color: #0000FF}	/* 选定的链接 */

			
		</style>
	</head>
	<body>
		<a href="#">黑马程序员</a>
	</body>
</html>

元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				color:blue;
			}
		</style>
	</head>
	<body>
		<span>讲完这个内容大家就可以下课了</span>
		<span>讲完这个内容大家就可以下课了</span>
		<span>讲完这个内容大家就可以下课了</span>
		<span>讲完这个内容大家就可以下课了</span>
	</body>
</html>

类选择器外部引用（常用）

test.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <link rel="stylesheet" type="text/css" href="./main.css"/>
		<!--
			.类的名称{
			   属性名称:属性的值;
			  	属性名称:属性的值;
			}
		-->
		
	</head>
	<body>
		<!--
			请将水果类,改成黄色
			蔬菜类改成绿色
		-->
		<div class="shuiguo">香蕉</div>
		<div class="shucai">黄瓜</div>
		<div class="shuiguo">苹果</div>
		<div class="shucai">茄子</div>
		<div class="shuiguo">橘子</div>
	</body>
</html>

main.css


			.shuiguo{
				color: yellow;
			}
			.shucai{
				color: green;
			}

Harden13up

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录