Web02_div+css

最新推荐文章于 2024-01-15 12:13:32 发布

macjor_90

最新推荐文章于 2024-01-15 12:13:32 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/macjor_90/article/details/80549048

版权

DIV：是一个块级元素，独自占一行，单独使用没有任何意义，常常与css一起使用，其主要用于页面布局。

Span：是一个内联元素，显示一行，单用无意义须与css搭配，其主要用于对括起来的内容进行修饰。

CSS：层级样式表，定义如何显示HTML元素，样式通常存在样式表中，解决内容和表现的分离。

CSS样式语法规范：

<style>
  选择器{属性：属性值}；
  选择器{属性：属性值}；
      ...
</style>

CSS引入的三种方法：

方法一：内部引入，在页面head标签内引入

<head>
	<meta charset="UTF-8">
	<title>内部映入</title>
	<style type="text/css">
	    #one{
		color: aqua;
		font-size: 28px;
	}
	</style>
</head>

方法二：外部引入，在外部创建.css的样式文件，通过link标签在页面中引入。

外部css文件
#one{
	color: darksalmon;
	font-size: 66px;
}

页面中引入
<head>
	<meta charset="UTF-8">
	<title>css外部引入</title>
	<link rel="stylesheet" type="text/css" href="../css/style.css"/>
	</head>

方法三：行内引入，适合样式单一较少的使用

行内引入
<body>
	<div id="one" style="color: blue;font-size: 42px;">
	行内引入，直接在元素定义的行中进行 style样式修饰。
	</div>
</body>

选择器：元素选择器、类选择器、属性选择器、id选择器，层级选择器。

元素选择器:例如div，span。

<html>
<head>
<meta charset="UTF-8">
	<title>元素选择器-div</title>
	<style type="text/css">
		div {
			color: red;
			font-size: 22px;
		}
	</style>
</head>
<body>
	<div >我如果爱你</div>
	<div >绝不学痴情的鸟儿</div>
	<div >为绿荫重复单调的旋律</div>
	</body>
</html>

类选择器：class, .类名的方式获取，用于多个相同的属性的div.

<html>
<head>
<meta charset="UTF-8">
	<title>类选择器</title>
	<style type="text/css">
		.one{
			color: goldenrod;
			font-size: 54px;
		}
		.two{
			color: cornflowerblue;
			font-size: 54px;
		}
	</style>
</head>
<body>
	<div class="one">假如生活欺骗了你</div>
	<div class="one">不要忧伤</div>
	<div class="two">不要害怕</div>
</body>
</html>

id选择器：#id名方式获取，一般id都是唯一。

<html>
<head>
	<meta charset="UTF-8">
	<title>id选择器</title>
	<style type="text/css">
		#one{
			color: aqua;
		}
		#two{
			color: blue;
		}
		#three{
			color: blueviolet;
		}
	</style>
</head>
<body>
	<div id="one">如果我们选择了最能为人类福利而劳动的职业</div>
	<div id="two">我们就不会为它的重负说压倒</div>
	<div id="three">我们感到的将不是点点欢乐</div>
</body>
</html>

层级选择器：例- ul li

<html>
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<style type="text/css">
			ul li{
				color: red;
				font-size: 25px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>中国</li>
			<li>美国</li>
			<li>日本</li>
		</ul>
	</body>
</html>

属性选择器：某个标签的属性 input[type="text"]

<html>
	<head>
		<meta charset="UTF-8">
		<title>属性选择器</title>
		<style type="text/css">
			input[type="text"]{
				background-color: cornflowerblue;
				height: 40px;
				width: 130px;
			} 
		</style>
	</head>
	<body>
		<input type="text" size="14px"/>
	</body>
</html>

macjor_90

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web02_div+css

DIV：是一个块级元素，独自占一行，单独使用没有任何意义，常常与css一起使用，其主要用于页面布局。Span：是一个内联元素，显示一行，单用无意义须与css搭配，其主要用于对括起来的内容进行修饰。CSS：层级样式表，定义如何显示HTML元素，样式通常存在样式表中，解决内容和表现的分离。CSS样式语法规范： &lt;style&gt; 选择器{属性：属性值}；选择器{属性：属...
复制链接

扫一扫

Web02_div+css

“相关推荐”对你有帮助么？