css基础1

最新推荐文章于 2023-08-18 20:40:23 发布

来年春至新枝发

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量646

点赞数

分类专栏：实践文章标签： css html css3

本文链接：https://blog.csdn.net/Adaobaozhao/article/details/122707765

版权

实践专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.lession3.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: greenyellow;

		}
	</style>
	<!-- 有下面这个link语句，所有的背景就是圆的，注释掉变成方的 -->
	<link rel="stylesheet" type="text/css" href="lession3.css">
</head>
<body>
	<form method="get" action="">
		<h1>
			FF-----------------------------------
		</h1>
			1.apple<input type="radio" name="f" value="apple">
			2.ornege<input type="radio" name="f" value="orenge">

		<input type="submit">
			1.apple<input type="checkbox" name="f" value="apple">
			2.ornege<input type="checkbox" name="f" value="orenge">

		<input type="submit">
		<h1>
			choose you sex
		</h1>
		male:<input type="radio" name="sex" value="male" checked="checked">
		female:<input type="radio" name="sex" value="female">
		<input type="submit">

		<h1>
			Procince
		</h1>
		<select name="province">
			<option>23</option>
			<option>26</option>
		</select>
		<input type="submit">
		<h1>
			Procince
		</h1>
		<select name="province">
			<option value="23">23</option>
			<option value="23">26</option>
		</select>
		<input type="submit">

	</form>
	<!-- 引入css -->
	方法1.行间样式
	<div style="width: 100px;
		height: 100px;
		background-color:darkred ;
	"></div>
	方法2.页面级css，写进head
	<div></div>
	方法3.外部引入css文件
	使用link，在head里面
	<hr><hr>
	<!-- 选择器 -->
	<!-- 1.id选择器 1对1关系-->
	<div id="on">123</div>
	<div id="oy">456</div>
	<!-- 2.clacss选择器：抓特点 多对多关系-->
	<div class="demo">789</div>
	<div class="demo demo1">756</div>
	<!-- 3.标签选择器 -->
	<div>159</div>
	<span>1269</span>
	<div>
		<span>1485</span>
	</div>
	<!-- 4.通配符选择器 -->
	全部都变
	<!-- 优先级id > class > 标签选择器 > 通配符 -->
	<div id="on" class="demo1">15746231</div>
	<!-- 行间样式 > id -->
	<div id="on" style="background-color: darkred;">124726</div>
	<div class="demo" id="on">class和属性优先级相同，谁在前面谁优先</div>
	<!-- ！important是老大 -->
	<div>是老大吗？
		css权重
		！important		infinity	256进制	
		style行间样式     1000
		id      		  100
		class|属性|伪类   10
		标签|伪元素        1
		通配符            0
	</div>

</body>
</html>

请添加图片描述 2.`div{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}
#on{
background-color: gray;

}
#oy{
background-color: rebeccapurple;
}
.demo{
background-color: palegoldenrod;
}
.demo1{
color: #f50;
}
div{
background-color: blackPink;!important
}
span{
color: #F40;
font-weight: bolder;

}
*{
background-color: golden rod;//把这个单词合起来就会有背景变化效果
}
/只要有class就会被选中/
[class]{
background-color: pink;
}
[id=“on”]{
font-weight: bold;
}
`
请添加图片描述 3.页面效果截图

来年春至新枝发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础1

1.lession3.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Document</title> <style type="text/css"> div{ width: 1
复制链接

扫一扫

专栏目录