承接HTML学习笔记

附上动力节点网课视频

CSS概述和在HTML中嵌入CSS样式的三种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>CSS概述</title>
	</head>
	<body>
		<h1>什么是CSS？</h1>
		<p>
			&nbsp;  CSS:Cascading Style Sheet(层叠样式语言).CSS是一种样式表语言。专门用来修饰HTML页面的。让HTML页面更好看。
			<br>
			&nbsp;  CSS是HTML的化妆品.CSS是离不开HTML的，CSS离开了HTML就没有意义了，所以还是新建HTML文件，编写HTML代码，HTML代码中编写央视，修饰HTML节点。
		</p>
		<br>
		<h2>在HTML嵌入CSS样式的第一种方式</h2>
		<p>
			<!--内联定义-->
			<!--盒子-->
			<!--
				内联定义的语法格式：
					<标签 style="样式名：样式值;样式名：样式值"></标签>
					样式可通过查找帮助文档来获取
			-->
			<div id="div1" style="width: 100px;height: 100px;background-color: #66FF66;">
				
			</div>
		</p>
		<h2>在HTML嵌入CSS样式的第二种方式</h2>
		<p>
			<!--样式块对象-->
			<style type="text/css">
				/* 这是CSS的注释*(与HTML不同) */
				/* 设置id="div2"元素的宽度高度和颜色 */
				/*
					设置某个元素的样式，首先你要选中这个元素，怎么选中一个或多个元素呢？
						常见的选择元素的方式有三种：（这里说的是常见的）
							id选择器
							标签选择器
							类选择器
				*/
				/* 关于id选择器 */
				/* id选择器只能作用于当前页面的一个节点，因为id是不能重复的 */
				#div2 {
					width: 100px;
					height: 100px;
					background-color: greenyellow;
				}
				/* 标签选择器 */
				/* 作用于当前页面中所有的input元素 */
				input {
					width: 100px;
					height: 10px;
					/* border-color: red;
					border-style: dashed;
					border-width: 1px; */
					/* 总样式 */
					border: 1px solid black;/* 宽度 样式 颜色 */
				}
				/* id选择器的优先级比标签选择器高 */
				#email {
					border: 20px dashed red;
				}
				/* 类选择器 */
				.student {
					width: 200px;
					height: 30px;
					background-color: #0000FF;
				}

				/* 以上三种选择器的优先级
					id选择器>类选择器>标签选择器 */
			</style>
			<div id="div2" type="text/css"></div>
			<br>
			用户名<input type="text" name="username" />
			<br>
			<br>
			密码<input type="password" name="password" />
			<br><br><br>
			邮箱地址：<input id="email" type="text" name="" />
			<br><br><br>
			<!-- 在HTML中，任何一个节点元素都有class属性，用来指定标签类名-->
			<!--以下虽然标签不同，但是它们的都属于同一类。为什么？因为类名相同-->
			<input class="student" type="text" />
			<br><br><br>
			<input class="student" type="text" name="" />
			<br><br><br>
			<div class="student">3</div>
		</p>

		<h2>在HTML嵌入CSS样式的第三种方式</h2>
		<!--引入外部独立的CSS样式表文件-->
		<!--实际开发中较多使用这种方式，可以降低维护成本，修改一个文件即可-->
		<link rel="stylesheet" type="text/css" href="C:/Users/yxz/Desktop/css/my.css" />
		<div id="div1"></div>
		<div id="div2"></div>
	</body>
</html>

附.css文件代码

#div1 {
	width: 300px;
	height: 300px;
	background: #ADFF2F;
	border: 1px solid black;
	position: absolute; /* 绝对定位 */
	/* 绝对定位的时候只要设置x轴和y轴坐标即可 */
	top: 200px;
	left: 500px;
}

#div2 {
	width: 200px;
	height: 200px;
	background: red;
	border: 1px solid black;
	position: absolute; /* 绝对定位 */
	top: 300px;
	left: 600px;
}
}

css.png

常见CSS样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>常用的CSS样式</title>
		<!--样式块-->
		<style type="text/css">
			.numbers{
				display: none; /*  block */ 
				/* 
					display样式
						1.属于布局样式
						2.用来设置显示或者隐藏
						3.隐藏：none
						4.显示：block或者inline-bloc
							block：以块的形式展现，并且独自占用一行
							inline-block：以块的形式展现，但是不会自己独自占用一行
				*/		

			}
			#nameError {
				font-size: 12px;
				color: red;
			}
			.baidu {
				text-decoration: none;/* underline */
			}
			#cc {
				list-style-type: noen;
			}
			/* :hover专门用来设置鼠标悬停效果的 */
			/*使用hover的时候:俩边不能出现空格*/
			#bgpowernode:hover{
				color: red;
				cursor: pointer;
			}
			.div5 {
				width: 300px;
				height: 300px;
				background-color: #444;
				border: 34px red solid;
				/* 在元素外边打补丁 */
				margin-top: 10px;
				margin-left: 100px;
				/* 内补丁 */
				padding-right: 100px;
			}
			#outdiv {
				width: 300px;
				height: 300px;
				background-color: blue;
				float: right;
			}
			#innerdiv {
				width: 100px;
				height: 100px;
				background-color: red;
				/* 设置当前节点元素的浮动效果，只是浮动于当前元素的父元素内部 */
				float: right;
			}
			#mydiv2 {
				width: 100px;
				height: 100px;
				background-color: red;
				/* 绝对定位 */
				position: absolute;
				top: 0px;
				left: 100px;
			}
		</style>
	</head>
	<body>
		<!--设置鼠标悬停效果-->
		<!--鼠标移动到以下文本上，字体颜色变红，鼠标变小手-->
		<span id="bgpowernode">柚子皮</span>
		<!--无序列表-->
		<ul id="cc">
			<li>a
				<ul class="numbers">
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</li>
			<li>b
				<ul class="numbers">
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</li>
			<li>c
				<ul class="numbers"> 
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</li>
		</ul>
		<!--字体样式-->
		<span id="nameError">用户名不能为空</span>
		<br><br>
		<!--文本装饰-->
		<a class="baidu" href="http:www.baidu.com">百度</a>
		<br><br><br><br>
		<!--内补丁，外补丁-->
		<div class="div5"></div>

		<!--浮动效果-->
		<div id="outdiv">
			<div id="innerdiv">

			</div>
		</div>
		<div id="mydiv2"></div>
	</body>
</html>

image.png

暂停于此