CSS

最新推荐文章于 2021-06-24 23:59:07 发布

A2307812087

最新推荐文章于 2021-06-24 23:59:07 发布

阅读量234

点赞数

本文链接：https://blog.csdn.net/A2307812087/article/details/83783010

版权

CSS

1语义化标签

w3c标准：
html结构 css样式 js 行为

遵循的原则：
先确定语义的HTML ，再选合适的CSS。

语义是否良好：

当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。

语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用

语义化的网页的好处，最主要的就是对搜索引擎友好，有了良好的结构和语义你的网页内容自然

容易被搜索引擎抓取。

核心：
合适的地方给一个最为合理的标签。

不管是谁都能看懂这块内容是什么。

物尽其用人尽其才1.重语义的地方多用有语义的标签，比如 h 和 p 等等，少用没有语义的标

签比如 div span 等等。

如果有地方可以用p 又可以用div，优先选用 p标签（结构更清晰，特别是文字段落）。
少用纯样式标签比如 b u font，可以运用css样式。如果有强调的地方，可以考虑

strong em 等有强调语义的标签。

CSS(Cascading Style Sheets)

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字

体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示

样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针

对不同的浏览器设置不同的样式。

2CSS(Cascading Style Sheets)

CSS
主要目的：控制网页中元素的样式
CSS 可以让我们从HTML结构和样式分离出来。
Css 可以让我

们专注结构。

专注结构：

就是h就是一个标题p就是一个段落。但是不应该再告诉我们，是什么颜色，是多大字号。
CSS

布局弱化标签布局。
代码更少，语义更好，搜索更容易…

3CSS样式规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要

了解CSS样式规则，具体格式如:
选择器｛属性１：属性值１；属性２；属性值２：属性３；属性值３：｝

在上面的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体

样式。其中，属性和属性值以“键值对”的形式出现，属性是对指定的对象设置的样式属性，例

如字体大小、文本颜色等。属性和属性值之间用英文“:”连接，多个“键值对”之间用英文“;

”进行区分

4.ID选择器和类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*
			 
			 #ID的名称{
				  属性名称:属性的值;
				  属性名称:属性的值;
				}
			 * */
			#div1{
				color: red;
			}
			
		</style>
	</head>
	<body>
		<!--请将JAVAEE颜色改成红色-->
		<div id="div1">JAVAEE</div>
		<div>IOS</div>
		<div>ANDROID</div>
		
	</body>
</html>

类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			.类的名称{
			   属性名称:属性的值;
			  	属性名称:属性的值;
			}
		-->
		<style>
			.shuiguo{
				color: yellow;
			}
			.shucai{
				color: green;
			}
		</style>
	</head>
	<body>
		<!--
			请将水果类,改成黄色
			蔬菜类改成绿色
		-->
		<div class="shuiguo">香蕉</div>
		<div class="shucai">黄瓜</div>
		<div class="shuiguo">苹果</div>
		<div class="shucai">茄子</div>
		<div class="shuiguo">橘子</div>
	</body>
</html>

5浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空

间
				float属性:
					left
					right
				
				clear属性: 清除浮动
					both : 两边都不允许浮动
					left: 左边不允许浮动
					right : 右边不允许浮动
			流式布局
		-->
		<div style="float:left;width: 200px; height: 200px; background-color: 

red;"></div>
		
		<div style="clear: both;"></div>
		
		<div style="width: 250px; height: 200px; background-color: 

greenyellow;"></div>
		<div style="width: 200px; height: 200px; background-color: 

blue;"></div>
		
		
	</body>
</html>

6ＣＳＳ选择器的优先级

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*元素选择器*/
			div{
				color: red;
			}
			/*类选择器*/
			.chifan{
				color: deeppink;
			}
			
			/*ID选择器*/
			#div1{
				color: greenyellow;
			}
			
			/*
			 按照选择器搜索精确度来编写:
			 	行内样式 > ID选择器 > 类选择器  > 元素选择器
			 */
			
			
			
			.first{
				color: green;
			}
			
			
			.second{
				color: blue;
			}
			
			/*就近原则*/
		</style>
	</head>
	<body>
		<!--<div class="chifan" id="div1" style="color: goldenrod;">扩展完,就

可以去吃饭啦!</div>-->
		
		<div class="second first ">讲完这个真的可以去吃饭啦!</div>
	</body>
</html>

JS

1js的组成

ECMAScript:核心部分；定义js的语法规范

DOM:document Object Model:文档对象模型。主要是用来管理页面的

BOM:Browser Object Model :浏览器对象模型，前进。后退。页面刷新。

2js案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			/* 弱变量类型*/
			var i = 1;
			var j = "zhangsan";  //string  --- >String
			
			//alert("lisi".length);
			
			var str1 = 111;
			var str2 = "111";
			
//			alert(str1 === str2);

		//向页面输出内容
			document.write("黑马程序员");
			//向控制台输出
			console.log("向控制台输出");
			
		</script>
	</head>
	<body>
	</body>
</html>

3页面校验


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			1.校验用户名, 长度不能小于6位
				1.确定事件: 提交事件 onsubmit
				2.事件要触发函数 checkForm()
				3. 函数中要去做一些校验
		-->
		<script>
			function checkForm(){
				
				//获取用户输入的内容
				var input1 = document.getElementById("username");
//				alert(input1.value);
				var uValue = input1.value;
				if(input1.value.length >= 6){
					
				}else{
					alert("对不起,用户名太短啦!")
					return false;
				}
				
				//邮箱的校验
				//获取用户输入的邮箱的值
				var email = document.getElementById("email")
				var uEmail = email.value;
				if(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-

9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(uEmail)){
					alert("校验成功");
				}else{
					alert("校验失败")
					return false;
				}
				
				return true;;
			}
		</script>
		
	</head>
	<body>
		<form action="../01-网站首页的优化/网站首页.html" onsubmit="return 

checkForm()" >
			用户名:<input type="text" id="username" /><br />
			密码:<input type="password" id="password" /><br />
			邮箱:<input type="text" id="email" /><br />
			
			<input type="submit" value="提交" />
		</form>
	</body>
</html>