初学javaDay25-前端篇

前端
W3c组织机构
HTML: html标签 符合结构化标准(举例:盖房的主体结构)(了解)
CSS: 对html标签进行修饰 符合标准样式(举例:给主体结构装修)(了解)
javascript :具体的应用 符合应用化标准(举例:具体的某个功能) (重点)

CSS

CSS:Cascding style Sheet:层叠样式表
如何给标签进行修饰?
格式:
head标签中指定

<style>
标签名{
	CSS样式属性1:属性值1;
	CSS样式属性2:属性值2;	
}
</style>

CSS的使用方式:
1)行内样式:
在标签中指定style属性 =“css样式:css属性值;css样式属性2:css属性值2”
弊端:
a.样式属性和html标签以及标签基本属性混合使用,不利于后期管理
b.一次只能修饰一个标签,太麻烦了…

2)内部样式(内联样式)
在head标签中指定style标签

<style>
		选择器 (标签选择器/id选择器/类选择器){
			CSS样式属性1:属性值1;
			CSS样式属性2:属性值2;
		}
<style>	

弊端:
样代码和html标签混合使用,不利于后期管理

3)外部样式(外联样式) 前端工程师一般都会使用第三种方式
a)单独创建一个后缀名字.css结尾的文件
书写css样式
选择器 (标签选择器/id选择器/类选择器){
CSS样式属性1:属性值1;
CSS样式属性2:属性值2;
}
b)在当前html文件中导入css文件

<link href="外部的css文件路径" rel="stylesheet" />

	link标签:导入外部的css文件
	href属性:都的外部css文件路径 (url)
	rel:固定格式 
			stylesheet:样式表(我们在css文件中书写的样式一定是样式库中有的属性)		
特点:
	1)css样式代码和html标签不会混合使用
	2)方便后期管理,分目录管理对应的文件

CSS选择器:分类
1)标签选择器
标签名称{
css样式代码
}
2)类选择器
在指定的标签中可以指定相同的class属性
注意:在同一个html页面下,多个标签的class属性是可以同名的
class=“值”
格式:
.class属性值{
css样式代码
}
优先级:类选择器 > 标签选择器
3)id选择器
在标签中给定id属性 指定id属性值
格式:
#id属性值{
css样式代码;
}
注意事项:如果单纯是为了进行网页布局,可以指定同名id,但是不建议,保证html标签中id属性值必须到唯一
javacript DOM编程
var 标签对象 = document.getElementById(“id属性值”) ;----->如果id是重复的,导致获取不到标签对象
优先级:id选择器 > class选择器 > 标签(element)选择器
4)并集选择器
选择中多个标签,将多个选择器一块使用
多个选择器中间使用逗号隔开,分别给对应的标签进行修饰
格式:
selector1,selector2,…{
css样式属性:属性值;

	}

5)交集选择器: (子元素选择器)
选中的元素一定子元素
格式:
selector1 selector2 …{ css样式代码} selector2选择器选中的元素一定是selector1选择器选中的元素的子元素!
6)通用选择器 :*
7)伪类选择器
描述一个元素(标签)的一种状态
1)link状态:鼠标没有访问过的状态
2)hover状态:鼠标经过状态
3)active状态:鼠标激活状态(鼠标点击了,没有松开)
4)visited状态:鼠标访问过的状态(点击了,并且松开了)

CSS样式
CSS边框属性:
/设置边框的大小/边框的颜色/边框的样式 :有四个边/
/上边框宽度/
border-top-width/(color)/(style): 10px
/下边框宽度/
border-bottom-width: 20px;
/左边框宽度/
border-left-width: 30px;
/右边框宽度/
border-right-width: 40px;