前端学习css(一)

最新推荐文章于 2024-10-02 15:35:50 发布

DragonChilder

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量88

点赞数

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

本文链接：https://blog.csdn.net/dragonchilder/article/details/117303149

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、CSS的引入方式（与HTML的结合方式）

1.style的属性方式（不推荐）

<div style="background-color: gray;color: white;">干饭人，干饭魂！</div>

2.style的标签方式

<head>
		<meta charset="utf-8">
		<title>css学习</title>
		<style type="text/css">
			div {
				background-color: black;
				color: aquamarine;
			}
		</style>
	</head>
	<body>
		<div>干饭人，干饭魂！</div>
	</body>

3.导入方式（不推荐）

<head>
		<meta charset="utf-8">
		<title>css学习</title>
		<style type="text/css">
			@import url("../css/01_css.css");
			<!--前提要将样式写在css文件里-->
		</style>
	</head>
	<body>
		<div>干饭人，干饭魂！</div>
	</body>

4.链接方式（推荐）

<head>
		<meta charset="utf-8">
		<title>css学习</title>
		<style type="text/css">
			<link rel="stylesheet" href="../css/01_css.css" type="text/css"/>
			<!--前提要将样式写在css文件里-->
		</style>
	</head>
	<body>
		<div>干饭人，干饭魂！</div>
	</body>

CSS的优先级-----就近原则

二、选择器

选择器：指定CSS要起作用的标签，那个标签名就是选择器。

1、HTML标签名选择器：直接以标签名为选择器

<head>
		<meta charset="utf-8">
		<title>选择器--标签/class/id</title>
		<style type="text/css">
			div{
				color: #808080;
			}
			span{
				color: blue;
			} 
			 div p{
				color: blue;
			}
			/*div里的p标签 */
			
		</style> 
	</head>
	<body>
		<div>干饭人，干饭魂！111</div>
		<span>干饭人，干饭魂！222</span>
		<div><p>干饭人，</p>干饭魂！333</div>
		<span>干饭人，干饭魂！444</span>
	</body>

2、class选择器：使用标签的class属性（推荐）

<head>
		<meta charset="utf-8">
		<title>选择器--标签/class/id</title>
		<style type="text/css">
			div.aa{
				color: gray;
			}
			/*class属性为aa的div */
			.aa{
				color: red;
			}
			.bb{
				color: #7FFFD4;
			}		
		</style> 
	</head>
	<body>
		<div class="aa">干饭人，干饭魂！111</div>
		<span class="aa">干饭人，干饭魂！222</span>
		<div class="bb">干饭人，干饭魂！333</div>
		<span class="bb">干饭人，干饭魂！444</span>
	</body>

3、id选择器：使用标签的id属性(id属性最好保持唯一性)

<head>
		<meta charset="utf-8">
		<title>选择器--标签/class/id</title>
		<style type="text/css">
			#aa{
				color: red;
			}
			#bb{
				color: #7FFFD4;
			}		
		</style> 
	</head>
	<body>
		<div id="aa">干饭人，干饭魂！111</div>
		<span id="aa">干饭人，干饭魂！222</span>
		<div id="bb">干饭人，干饭魂！333</div>
		<span id="bb">干饭人，干饭魂！444</span>
	</body>

优先级：
标签选择器 < class选择器 < id选择器 < style属性（就近原则）

4、伪元素选择器：HTML中预先设置好的选择器，称为伪元素
语法----元素：状态{}
有很多，部分举例

<head>
		<meta charset="utf-8">
		<title>伪元素选择器</title>
		<style type="text/css">
			/* 未被访问前的a标签 */
			a:link{
				text-decoration: none;
				color: #000000;
				font-size: small;
			}
			/* 被访问过的a标签 */
			a:visited{
				color: red;
				font-size: medium;
			}
			/* 鼠标悬停的a标签 */
			a:hover{
				color: yellow;
				font-size: large;
			}
			/* 鼠标长按的a标签 */
			a:active{
				color: blue;
				font-size: xx-large;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com" target="_blank">百&nbsp;&nbsp;度</a>
	</body>