CSS学习

最新推荐文章于 2024-09-23 15:32:37 发布

huwentaocn

最新推荐文章于 2024-09-23 15:32:37 发布

阅读量163

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/hwt1070359898/article/details/89196171

css 专栏收录该内容

1 篇文章

订阅专栏

CSS：层叠样式表

CSS作用：美化页面，提高代码复用性

1、块标签：

<!--块标签：div 自动换行-->
		<div>张三</div>
		<div>李四</div>

<!--块标签：span 不换行-->
		<span>王五</span>
		<span>赵六</span>

☆2、选择器：

☆（1）元素选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				color: red;
				font-family: "微软雅黑";
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<div>大家好，我第一次学css，请大家多多关照!</div>
		<div>大家好，我第一次学css，请大家多多关照!</div>
		<div>大家好，我第一次学css，请大家多多关照!</div>
		<div>大家好，我第一次学css，请大家多多关照!</div>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*
			 * 元素的名称{
			 * 		属性名称：属性值;
			 * }
			 */
			span{
				color: blue;
			}
		</style>
	</head>
	<body>
		<span>css入门之选择器学习</span>
		<span>css入门之选择器学习</span>
		<span>css入门之选择器学习</span>
		<span>css入门之选择器学习</span>
		<span>css入门之选择器学习</span>
	</body>
</html>

☆（2）类选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*
			 * .类的名称{
			 * 		属性名称：属性值;
			 * }
			 */
			.fruits{
				color: green;
			}
			.vegetables{
				color: greenyellow;
			}
		</style>
	</head>
	<body>
		<div class="fruits">苹果</div>
		<div class="vegetables">黄瓜</div>
		<div class="fruits">香蕉</div>
		<div class="vegetables">萝卜</div>
	</body>
</html>

☆（3）ID选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*
			 * #ID的名称{
			 * 		属性名称：属性值;
			 * }
			 * ps:ID的名称必须是唯一的
			 */
			#div1{
				color: red;
			}
		</style>
	</head>
	<body>
		<!--将IOS改成红色-->
		<div>JAVAEE</div>
		<div id="div1">IOS</div>
		<div>Android</div>
	</body>
</html>

ps:ID的名称必须是唯一的

（4）属性选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*修改包含title属性的a标签*/
			a[title]{
				color: red;
			}
			/*修改title属性为“aaa”的a标签*/
			a[title="aaa"]{
				color: yellow;
			}
			/*修改包含class和href属性的a标签*/
			a[href][class]{
				color: black;
			}
		</style>
	</head>
	<body>
		<a href="#" title="aaa">张三</a>
		<a href="#">李四</a>
		<a href="#" title="bbb">王五</a>
		<a href="#" class="class1">赵六</a>
	</body>
</html>

（5）后代选择器：

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

（6）伪类选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a:link{color: red;}        /*未访问的链接*/
			a:visited{color: yellow;}  /*已访问的链接*/
			a:hover{color: blue;}      /*鼠标移动到链接上*/
			a:active{color: green;}    /*选定的链接*/
			
		</style>
	</head>
	<body>
		<a href="#">黑马程序员</a>
	</body>
</html>

PS：选择器优先级：行内样式 > ID选择器 > 类选择器 > 元素选择器

3、引入方式：

行内样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="fruits" style="color: greenyellow;">哈密瓜</div>
		<div class="vegetables">丝瓜</div>
		<div class="fruits">香蕉</div>
		<div class="vegetables">萝卜</div>
	</body>
</html>

内部样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*
			 * .类的名称{
			 * 		属性名称：属性值;
			 * }
			 */
			.fruits{
				color: green;
			}
			.vegetables{
				color: greenyellow;
			}
		</style>
	</head>
	<body>
		<div class="fruits"">哈密瓜</div>
		<div class="vegetables">丝瓜</div>
		<div class="fruits">香蕉</div>
		<div class="vegetables">萝卜</div>
	</body>
</html>

外部样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="style1.css"/>
	</head>
	<body>
		<div class="fruits">哈密瓜</div>
		<div class="vegetables">丝瓜</div>
		<div class="fruits">香蕉</div>
		<div class="vegetables">萝卜</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="style1.css"/>
	</head>
	<body>
		<div class="fruits">苹果</div>
		<div class="vegetables">黄瓜</div>
		<div class="fruits">香蕉</div>
		<div class="vegetables">萝卜</div>
	</body>
</html>

/*
 * style.css
 */
.fruits{
	color: green;
}
.vegetables{
	color: greenyellow;
}

4、浮动：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			css浮动：浮动的元素会脱离正常的文档流，在正常的文档流中不占空间
				float属性：
					left
					right
				clear属性：清楚浮动
					both：两边都不允许浮动
					left：左边不允许浮动
					right：右边不允许浮动
			流式布局
		-->
		<div style="width: 200px; height: 200px; background-color: red; float: left;"></div>
		<div style="width: 200px; height: 200px; background-color: yellow; float: left;"></div>
		<div style="width: 200px; height: 200px; background-color: blue; float: left;"></div>
		<div style="width: 200px; height: 200px; background-color: red; float: left;"></div>
		<div style="clear: both;"></div>
		<div style="width: 200px; height: 200px; background-color: yellow;"></div>
		<div style="width: 200px; height: 200px; background-color: blue;"></div>
	</body>
</html>

清除浮动：

<div style="clear: both;"></div>

5、盒子模型：

盒子模型：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			内边距：(上右下左)
				padding-top:
				padding-right:
				padding-bottom:
				padding-left:
			PS：padding:10px;   上下左右都是10px
				padding:10px 20px;  上下10px，左右20px
				padding:10px 20px 30px;   上10px，右20px，下30px，左20px
				padding:10px 20px 30px 40px;   上10px，右20px，下30px，左40px
			外边距：
				margin-top:
				margin-right:
				margin-bottom:
				margin-left:
				
		-->
		<div style="border: 3px solid red; width: 400px; height: 400px;">
			<div style="border: 1px solid gray; width: 100px; height: 100px;">肾7plus</div>
		</div>
	</body>
</html>

绝对定位：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			绝对定位：
				position:absolute;
				top:
				left:
		-->
		<div style=" border: 5px solid red;width: 400px; height: 400px; position: absolute;top: 200px; left: 200px;">
			<h1>黑马程序员</h1>
		</div>
	</body>
</html>