楔子:
1、什么是CSS,有什么作用?
1)CSS(Cascading Style Sheet):层叠样式表语言。
2) CSS的作用是:
修饰HTML页面,设置HTML页面中的某些元素的样式,让HTML页面更好看。
HTML还是主体,CSS依赖HTML。CSS的存在就是修饰HTML,所以新建的文件还是xx.html文件。
2、CSS需要掌握到什么程度?
第一,常见的CSS样式会写,第二,别人写的CSS样式能看懂。
3、在HTML页面中嵌套使用CSS的三种方式:
第一种方式:在标签内部使用style属性来设置元素的CSS样式,这种方式称为内联定义方式。
语法格式:
<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>
第二种方式:在head标签中使用style块,这种方式被称为样式块方式。
语法格式:
<head>
<style type="text/css">
选择器 {
样式名 : 样式值;
样式名 : 样式值;
.....
}
选择器 {
样式名 : 样式值;
样式名 : 样式值;
.....
}
</style>
</head>
第三种方式:链入外部样式表文件,这种方式最常用(将样式写到一个独立的xxx.css文件当中,在需要的网页上直接引入css文件,样式就引入了)。
语法格式:
<link type="text/css" rel="stylesheet" href="css文件的路径" />
这种方式易维护,维护成本较低。
正文:
1、HTML引入样式的第一种方式:内联定义方式:
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML引入样式的第一种方式:内联定义方式</title> </head> <body> <!--宽500像素,高60像素,背景颜色为“#CCFF”--> <div style="width: 500px;height: 60px;background-color: #CCFFFF;"></div> <br /><br /> <!-- 样式display 为none,则图片有隐藏 为block,则显示图片 --> <div style="width: 500px;height: 60px;background-color: #CCFFFF;display: none;"></div> <br /><br /> <div style="width: 500px;height: 60px;background-color: #CCFFFF; border-color: red;border-width: 1px;border-style: solid;"></div> <br /><br /> <!-- border-color: red;border-width: 1px;border-style: solid; 可以整合为 border: red 1px solid; --> <div style="width: 500px;height: 60px;background-color: #CCFFFF;border: red 1px solid;"></div> </body> </html>
谷歌浏览器:
2、HTML中引入CSS样式的第二种方式:样式块:
代码:
<!doctype html> <html> <head> <title>HTML中引入CSS样式的第二种方式:样式块</title> <!--固定格式--> <style type="text/css"> /* id选择器 语法格式: #id{ 样式名 : 样式值; 样式名 : 样式值; 样式名 : 样式值; .... } */ #usernameErrorMsg { color : red; font-size : 12px; } /* 标签选择器 语法格式: 标签名 { 同上(id选择器) } 标签选择器作用的范围比id选择器广。 */ div { background-color : black; border : 1px solid red; width : 100px; height : 100px; } /* 类选择器 语法格式: .类名{ 同上上(其他俩个选择器) } */ .student { border : 1px solid red; width : 400px; height : 30px; } </style> </head> <body> <!-- 设置样式字体大小12px,颜色为红色 --> <span id="usernameErrorMsg">对不起,用户名不能为空!</span> <div></div> <div></div> <!--class相同的标签可以认为是同一类标签。--> <br><br><br> <input type="text" class="student"/> <br><br><br> <select class="student"> <option>专科</option> <option>本科</option> </select> </body> </html>
谷歌浏览器:
3、在HTML中使用CSS样式的第三种方式:引入外部独立的css文件:
html代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在HTML中使用CSS样式的第三种方式:引入外部独立的css文件</title> <!--引入css--> <!--rel,type都是固定写法,href后加引入的css路径--> <link rel="stylesheet" type="text/css" href="css/1.css" /> </head> <body> <a href="http://www.baidu.com">百度</a> <span id="baiduSpan">点击我链接到百度哦!</span> </body> </html>
css代码:
/* 标签选择器 */ a { /* 使下划线消失 */ text-decoration : none; } /* cursor : 鼠标样式,pointer是小手,hand也是,但是hand有浏览器兼容问题,建议使用pointer */ /* id选择器 */ #baiduSpan { /* 下划线; 鼠标光标变为小手 */ text-decoration: underline; cursor: pointer; }
谷歌浏览器:(小手没截成功。。。)
4、列表样式:
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列表样式</title> <style type="text/css"> /* 标签选择器 */ ul{ /* 让列表中的标志消失 list-style-type: none; */ /* 让列表中的标志变为空心圈圈 list-style-type: circle ; */ /*让列表中的标志变为黑心方块*/ list-style-type: square ; } </style> </head> <body> <ul> <li>中国 <ul> <li>北京</li> <li>上海</li> <li>重庆</li> </ul> </li> <li>美国</li> <li>俄国</li> </ul> </body> </html>
谷歌浏览器:
5、CSS样式的绝对定位:
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS样式的绝对定位</title> <style type="text/css"> /*id选择器*/ #div1{ background-color: red; border: 1px black solid; width: 300px; height: 300px; position : absolute; /*绝对定位*/ left: 100px; top: 100px; } </style> </head> <body> <div id="div1"></div> </body> </html>
谷歌浏览器: