CSS基础知识

最新推荐文章于 2022-05-10 14:25:47 发布

Hsq1103

最新推荐文章于 2022-05-10 14:25:47 发布

阅读量152

点赞数

分类专栏： CSS 文章标签： css 定位列表

本文链接：https://blog.csdn.net/jcdyn1219/article/details/115307374

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
	<head>
		<title>HTML中引入CSS样式的第一种方式：内联定义方式</title>
	</head>
	<body>
		
		<!--
			width 宽度样式
			height 高度样式
			background-color 背景色样式
			display 布局样式（none表示隐藏，block表示显示）
		-->
		<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
		border-color : red;border-width : 1px;border-style : solid;"></div>

		<br><br>

		<!--
			样式还能这样写：
				border : 1px solid black;
		-->
		<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
		border : 1px solid black;"></div>
		
		<!--此时display:none  布局隐藏显示不出来-->
		<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : none;
		border : 1px solid black;"></div>

	</body>
</html>

<!doctype html>
<html>
	<head>
		<title>HTML中引入CSS样式的第二种方式：样式块</title>

		<style type="text/css">
			/*
				这是CSS的注释。
			*/

			/*
				id选择器
				语法格式：
					#id{
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						....
					}
			*/
			#usernameErrorMsg {
				color : red;
				font-size : 12px;
			}

			/*
				标签选择器
				语法格式：
					标签名 {
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						....
					}
				标签选择器作用的范围比id选择器广。
			*/
			div {
				background-color : black;
				border : 1px solid red;
				width : 100px;
				height : 100px;
			}

			/*
				类选择器
				语法格式：
					.类名{
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						....
					}
			*/
			.student {
				border : 1px solid red;
				width : 400px;
				height : 30px;
			}

		</style>
	</head>
	
	<body>
		
		<!--
			设置样式字体大小12px，颜色为红色！
		-->
		<span id="usernameErrorMsg">对不起，用户名不能为空！</span>

		<div></div>
		<div></div>
		<div></div>

		<!--class相同的标签可以认为是同一类标签。-->
		<br><br><br>
		<input type="text" class="student"/>

		<br><br><br>

		<select class="student">
			<option>专科</option>
			<option>本科</option>
		</select>

	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在HTML中使用CSS样式的第三种方式：引入外部独立的css文件</title>
		
		<!--引入1.css-->
		<link rel="stylesheet" type="text/css" href="css/1.css" />
		
	</head>
	<body>
		
		<a href="http://www.baidu.com">百度</a>
		
		<span id="baiduSpan">点击我链接到百度哦！</span>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表样式</title>
		
		<style type="text/css">
			ul{
				/*list-style-type: none;*/
				/*list-style-type: circle ;*/
				list-style-type: square ;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>中国
				<ul>
					<li>北京</li>
					<li>上海</li>
					<li>重庆</li>
				</ul>
			</li>
			<li>美国</li>
			<li>俄国</li>
		</ul>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS样式的绝对定位</title>
		<style type="text/css">
			#div1{
				background-color: red;
				border: 1px black solid;
				width: 300px;
				height: 300px;
				position : absolute; /*绝对定位*/
				left: 100px;
				top: 100px;
			}
		</style>
	</head>
	<body>
		
		<div id="div1"></div>
		
	</body>
</html>

Hsq1103

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识

<!doctype html><html> <head> <title>HTML中引入CSS样式的第一种方式：内联定义方式</title> </head> <body>  <div.
复制链接

扫一扫