Web前端学习笔记:day02(CSS)

CSS

1、什么是 CSS

CSS是层叠样式表，不属于编程语言
CSS英文全称：Cascading Style Sheet 

2、CSS的作用是什么

 CSS是HTML的化装品，可以让HTML变的更炫酷 ，是专门来修饰HTML的

3、CSS在哪儿编写

CSS代码是嵌入在HTML中的，没有HTML代码，CSS代码是无效的

4、CSS注释

在style体内使用/*注释*/

5、HTML嵌入CSS代码方式

第一种：内联嵌入

1、语法：style=”样式名1:样式值1;样式名2:样式值2;”
2、在HTML中，大部分标签都有style属性，在该属性中可以设置该标签的CSS样式
示例一：style属性完成a标签的样式：让其有下划线，有鼠标悬停效果手型
	字体下划线：text-decoration:underline
	鼠标悬停手势效果：cursor:hand; （该样式IE中支持，FireFox 中不支持）
	鼠标悬停手势效果：cursor:pointer;

第二种：定义内部样式块对象

1、在head标签中添加：<style type=”text/css”></style>
	id选择器
		语法格式：
			#id{
			样式名 : 样式值;
			样式名 : 样式值;
			样式名 : 样式值;
			....
			}
	标签选择器
		语法格式：
			标签名 {
			样式名 : 样式值;
			样式名 : 样式值;
			样式名 : 样式值;
			....
			}
		标签选择器作用的范围比id选择器广
	类选择器
		语法格式：
			.类名{
			样式名 : 样式值;
			样式名 : 样式值;
			样式名 : 样式值;
			....
			}

第三种：引入外部独立的css文件

 1、在head标签中：<link rel=stylesheet href=”1.css” type=”text/css”>
 	href后面写css文件地址

6、CSS样式的绝对定位

1、标签的position属性可以实现绝对定位
	<style type="text/css">
		#div1{
			background-color: red;
			border: 1px black solid;
			width: 300px;
			height: 300px;
			position : absolute; /*绝对定位*/
			left: 100px;
			top: 100px;
			}
	</style>

web前端开发中最难的是解决各个浏览器的兼容问题