第三次网页前端培训笔记（css）

最新推荐文章于 2024-07-12 16:27:40 发布

菜鸟不是

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量475

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_52665223/article/details/122797599

版权

css基本语法

选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
css声明要以分号结束，声明以{}括起来
建议一行书写一个属性

注：当有多重样式时，越精准越优先

1.行内式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h2 style="colorl:red;font-family;楷体;">Hello World</h2>
	</body>
</html>

2.嵌入式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			h2{
				color:red;
				font-family: "arial black";
			}
		</style>
	</head>
	<body>
		<h2>Hello World</h2>
		<h2>Hello World</h2>
	</body>
</html>

3. 引入外联样式文件

新建一个css文件

h2{
	font-size:40px;
}

引入外联样式文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</body>
</html>

css选择器

1.通用选择器 *

2.元素选择器

3.id选择器 #

4.类选择器 .

5.分组选择器

组合选择器

1.后代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.food li{
				border: green solid 1px;
			}
		</style>
	</head>
	<body>
		<ul class="food">
			<li>水果
				<ul>
					<li>香蕉</li>
					<li>苹果</li>
					<li>梨</li>
				</ul>
			</li>
			<li>蔬菜
				<ul>
					<li>白菜</li>
					<li>油菜</li>
					<li>卷心菜</li>
				</ul>
				
			</li>
		</ul>
		<ul>
			<li>香蕉</li>
			<li>苹果</li>
			<li>梨</li>
		</ul>
	</body>
</html>

2.子代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.food2 > li {
				border: #6495ED dotted 2px;
			}
		</style>
	</head>
	<body>
		<ul class="food">
			<li>水果
				<ul>
					<li>香蕉</li>
					<li>苹果</li>
					<li>梨</li>
				</ul>
			</li>
			<li>蔬菜
				<ul>
					<li>白菜</li>
					<li>油菜</li>
					<li>卷心菜</li>
				</ul>
				
			</li>
		</ul>
		<ul class="food2">
			<li>水果
				<ul>
					<li>香蕉</li>
					<li>苹果</li>
					<li>梨</li>
				</ul>
			</li>
			<li>蔬菜
				<ul>
					<li>白菜</li>
					<li>油菜</li>
					<li>卷心菜</li>
				</ul>
				
			</li>
		</ul>
	</body>
</html>

3.相邻兄弟选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <style type="text/css">
			#mydiv+div{
				background-color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div>相邻兄弟选择器1</div>
		<div id="mydiv">相邻兄弟选择器2</div>
		<div>相邻兄弟选择器3</div>
		<div>相邻兄弟选择器4</div>
	</body>
</html>

4.普通兄弟选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <style type="text/css">
			#mydiv2~div{
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		
        <div>普通兄弟选择器1</div>
		<div id="mydiv2">普通兄弟选择器2</div>
		<div>普通兄弟选择器3</div>
		<div>普通兄弟选择器4</div>
	</body>
</html>

菜鸟不是

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第三次网页前端培训笔记（css）

css基本语法选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 css声明要以分号结束，声明以{}括起来建议一行书写一个属性注：当有多重样式时，越精准越优先1.行内式<!DOCTYPE html><html> <head> <meta charset="utf-8..
复制链接

扫一扫