Java Web ------ CSS基础（语法，选择器）

最新推荐文章于 2024-11-14 17:40:35 发布

d1183

最新推荐文章于 2024-11-14 17:40:35 发布

阅读量228

点赞数

分类专栏： Java 学习文章标签： css web

本文链接：https://blog.csdn.net/d1183/article/details/105953202

版权

Java 学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.语法

1.1 内联样式，内部样式，外部样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 2.内部样式：在head元素里面的style标签里写样式
此样式可以被当前页面众多元素复用。 -->
<style>
	/*CSS的注释是这样的*/
	h2 {
		color: blue;
	}
</style>


<!-- 3.外部样式:在单独的css文件中写的样式，那个网页
	引用该文件，这个网页就能复用这些样式 -->
<link rel="stylesheet" href="my.css"/>

</head>
<body>
	<!-- 1.内联样式：在元素的style属性内直接
		写样式，此样式无法复用 -->
	<h1 style="color:red;">CSS</h1>
	
	<h2>CSS有三种用法</h2>
	<p>1.内联样式</p>
	<p>2.内部样式</p>
	<p>3.外部样式</p>
</body>
</html>

同目录下的my.css

p {
	color: yellow;
}

效果图：
在这里插入图片描述

1.2 继承性，层叠性，优先级

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	/*1.继承性：父类的样式可以被子元素继承。（颜色字体）*/
	body{
		font-family: "微软雅黑","文泉驿正黑","黑体";
	}
	
	/*2.层叠性：给一个元素设置不同的声明，其效果会叠加。*/
	h1 {
		color: red;
	}
	/*........*/
	h1{
		font-size: 50px;
	}
	
	/*3.优先级：给同一个元素设置相同的声明，
		效果以后者为准，也就是就近原则。*/
	h2 {
		color: green;
	}
	/*....*/
	h2 {
		color: yellow;
	}
}
</style>

</head>
<body>
	<h1>李老师</h1>
	<h2>范传奇</h2>
</body>
</html>

效果图：
在这里插入图片描述
2.选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	/*1.元素选择器*/
	/*2.类选择器：选择class等于某值的所有元素
		。class是程序员根据逻辑自己给元素增加的分类。*/
	.girl {
		color: pink;
	}
	/*3.id选择器：选择id等于某值的唯一的元素。*/
	#p4 {
		color: yellow;
	}
	/*4.选择器组：写出一组选择器，选中每个选择器所对应的
	目标的并集*/
	.girl,#p4 {
		font-weight: bold;
	}
	/*5.派生选择器*/
	/*5.1选择某元素的子孙*/
	#p5 b {
		color: red;
	}
	/*5.2选择某元素的儿子*/
	#p5>b {
		font-size: 30px;
	}
	/*伪类选择器：根据元素的状态选择元素*/
	/*6.1选择未访问过的超链接*/
	a:link {
		color: green;
	}
	/*6.2选择已访问过的超链接*/
	a:visited {
		color: red;
	}
	/*6.3选择激活态（正在点）的按钮*/
	#i1:active {
		background-color: blue;
	}
	/*6.4选择有焦点的文本框/密码框/文本域*/
	#i2:focus {
		background-color: green;
	}
	/*6.5选择鼠标悬停态（触碰）的图片*/
	img:hover {
		width: 250px;
		height: 250px;
	}
</style>

</head>
<body>
	<p class="girl">李老师呀李老师</p>
	<p>范传奇呀范传奇</p>
	<p class="girl">王克晶呀王克晶</p>
	<p id="p4">瞧你们那点破事</p>
	<p id="p5">
		北京市<u>海滨区<b>北三环</b>西路</u>甲18号<b>中鼎大厦</b>B座8层
	</p>
	
	<p>
		<a href="http://www.tmooc.cn">达内</a>
		<a href="http://doc.tedu.cn">文档</a>
		<a href="http://www.xiabian.cn">瞎编</a>
	</p>
	<p>
		<input type="button" value="按钮" id="i1"/>
	</p>
	<p>
		<input type="text" id="i2"/>
	</p>
	<p>
		<img alt="" src="../images/01.jpg">
	</p>
</body>
</html>