CSS-复习2

最新推荐文章于 2022-02-28 18:17:23 发布

画_船_听_雨

最新推荐文章于 2022-02-28 18:17:23 发布

阅读量130

点赞数

分类专栏：入门文章标签： css

本文链接：https://blog.csdn.net/weixin_52192654/article/details/114446286

版权

一、HTML网页中如何使用CSS

HTML中引入CSS样式的第一种方式:内联定义方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<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样式
	 border: 1px solid  black;
	 -->
	 <div style="width: 300px; height: 300px; background-color: gray;
		display: block; 
		border: 10px black solid;">
	 	
	 </div>
	</body>
</html>

2.HTML中引入样式的第二种方式：样式块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中引入样式的第二种方式：样式块</title>
		<style>
			/*
			这是CSS注释
			*/
		   /* id选择器
		   语法格式:
		   #id{
			   样式名:样式值;
			   样式名:样式值;
			   .....
		   } */
		   #usernameErrorMsg{
			   color: red;
			   font-size: 20px;
		   }
		   
		 /*  标签选择器
		   语法格式:
		   标签名{
			   样式名:样式值;
			   样式名:样式值;
			   .....
		   }
		   标签选择器作用范围比id选择器广. */
		  div{
			  background-color: black;
			  border: red 3px solid;
			  width: 100px;
			  height: 100px;
		  }
		  
		  /*
		  类选择器
		  语法格式：
		  .类名{
			  样式名:样式值;
			  样式名:样式值;
			  .....
		  }
		  */
		 .student{
			 border: 1px solid red;
			 width: 400px;
			 height: 30px;
		 }
			
		</style>
	</head>
	<body>
		
		设置样式字体大小20px，颜色为红色<br>
		<span id="usernameErrorMsg">
			对不起，用户名不能为空！
		</span>
		
		<div></div><br>
		<div></div><br>
		<div></div><br>
		<br><br><br>
	<!-- class相同的标签可以认位是同一类标签	 -->
	<input type="text" class="student"/>
	
	<br><br><br>
	
	<select class="student">
		<option>专科</option>
		<option>本科</option>
	</select>
	
		
	</body>
</html>

3.在HTML中使用CSS样式的第三种方式：引入外部独立的css文件

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

CSS

a{
	text-decoration: none;
}

/* cursor:鼠标样式,pointer是小手,hand也是,但是hand有浏览器兼容问题,建议使用pointer */
#baiduSpan{
	text-decoration: underline;
	cursor: pointer;
}

3.样式列表

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

4.测试选择器分组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试选择器分组</title>
		<style>
			.td1,p span{
				color: red;
				font-size: 30px;
			}
			
		</style>
	</head>
	<body>
		<h1>选择器分组</h1>
		<h2>将同样的样式应用于多个选择器选中的元素上，不同的选择器之间使用 , 分割</h2>
			
		<table border="1px" width="300px" cellspacing="0" cellpadding="2px">
		<tr>
			<td class="td1">张三</td>
			<td>23</td>
			<td>xian</td>
		</tr>
		
		<tr>
			<td class="td1">李四</td>
			<td>23</td>
			<td>xian</td>
		</tr>
		
		<tr>
			<td class="td1">王五

最低0.47元/天解锁文章

画_船_听_雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-复习2

一、HTML网页中如何使用CSSHTML中引入CSS样式的第一种方式:内联定义方式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML中引入CSS样式的第一种方式:内联定义方式</title> </head> <body> <!-- width 宽度样式 height 高度样式 backgrou
复制链接

扫一扫

专栏目录