HTML续 + CSS

最新推荐文章于 2024-08-14 10:15:39 发布

我就不信这个名字还会重名

最新推荐文章于 2024-08-14 10:15:39 发布

阅读量101

点赞数

分类专栏： Note 文章标签： html css

本文链接：https://blog.csdn.net/weixin_44548206/article/details/105883571

版权

Note 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

	<div style="width: 100px;height: 100px;background-color: red">
		soo jooi jia sfhos shfuisyp jsiai  
		<!-- 空格代表分隔符,只能空一格 -->
	</div>

	<!-- HTML编码 -->
	&nbsp; <!-- //空格 -->
	我是&nbsp;&nbsp;&nbsp;&nbsp;天才
	<br>  <!-- 换行符 -->


	<!-- 父子结构 -->
	<!-- 有序列表 -->
	<ol type="a"> 
		<!-- 1  A  a:27进制   i:罗马数字  
			reverse ="reversed"  逆序
			start="3"  从第三个开始排序
		-->
		<li>marvrel</li>
		<li>返老还童</li>
		<li>我不是药神</li>
	</ol>

	<!-- 无序列表 -->
	<ul type="circle">
		<li>苹果</li>
		<li>橘子</li>
		<li>梨子</li>
	</ul>


	<!-- 添加图片 -->
	<!-- src(source)三种方式:
		1.网上url
		2.本地绝对路径
		3.本地相对路径 -->
		<!-- alt:图片占位符 -->
		<!-- title:图片提示符 -->
	<img src="" style="width: 200px" alt="这是安迪" title="this is Andy">


	<!-- herf:超文本引用 -->
	<!-- a:anchor 锚      超链接 -->
	<!-- 1.超链接
		 2.锚点
		 3.打电话/发邮件
		 4.协议限定符 -->
	
	<a href="https://www.baidu.com">www.baidu.com</a>
	
	<a href="#demo1">find demo1</a>
	<a href="#demo2">find demo2</a>

	<a href="tel:155****3882">联系商家</a>
	<a href="mailto:***@**.com"></a>

	<a href="javascript:while(1){alert('让你手欠')}">你点我试试</a>



	<!-- 表单标签:发送数据 -->
	<!-- method可以是get/post -->
	<form method="get" action="http://....">
		<p>
			Username:<input type="text" name="username" value="请输入用户名">
		</p>
		<p>
			Password:<input type="password" name="password">
		</p>
		<input type="submit" value="login">

		你们喜欢的明星
		1.范爷<input type="radio" name="star" checked="checked">
		2.牛大壮<input type="radio" name="star">
		<!-- radio:单选 -->
		<!-- checkbox:多选 -->
	</form>

	<h1>Province</h1>
	<select name="Province">
		<option value="Anhui">Anhui</option>
		<option value="Henan">Henan</option>
		<option value="Hebei">Hebei</option>
	</select>
	
	<!-- md5加密 -->



<!-- 1.引入css
	行间样式*/ -->
<div style="width: 100px;height: 100px;background-color:red "></div>>

<!-- 2.页面级CSS -->
<!-- head里面写style标签,然后里面写CSS-->

<!-- 3.外部CSS文件 -->
<div></div>


<!-- 选择器 -->
<!-- 1.id -->
<div id="only">123</div>

<!-- 2.class -->
<div class="demo demo1">456</div>
<div class="demo">234</div>

<!-- 3.标签选择器 -->
<span>777</span>
<div>
	<span>888</span>
</div>

<!-- 4.属性选择器 -->
<div id="only" class="demo">123</div>

<!-- 5.通配符选择器 -->


<!-- 优先级:!important > 行间样式 > id > class > 标签选择器 > 通配符 == 属性选择器-->
<!-- 优先级相同时,后面的覆盖前面的 -->

</body>
</html>

外部CSS文件如下:

/*HTML 结构
css  样式
JavaScript  行为*/

/*cascading style sheet 层叠样式表*/

/*1.引入css*/
/*行间样式*/
div{
	width:100px;
	height: 100px;
	background-radius: 50%;
	background-color: black;

}


#only{
	background-color: green; 
}

.demo{
	background-color: yellow;
}

.demo1{
	color: #f40;
}

span{
	color: #f40;
	font-weight: bold;
}

[id]{

}

[id="only"]{

}

/*全局*/
*{
	background-color: green;
}

css权重
!important			Infinity(正无穷)
行间样式				1000
id					100
class|属性|伪类		10
标签|伪元素			1
通配符				0

256进制 IE7.0版本

我就不信这个名字还会重名

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML续 + CSS

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>doucument</title> <link rel="stylesheet" type="text/css" href="lesson3.css"></head><...
复制链接

扫一扫