1 CSS入门
1.1 引入
html:负责网页的结构
css: 负责网页的美观(样式)
1.2 体验
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
a{
font-size:18px;
color:#F00;}
</style>
</head>
<body>
<a href="">超链接</a><br />
<a href="">超链接</a><br />
<a href="">超链接</a><br />
<a href="">超链接</a><br />
</body>
</html>
1.3 定义
CSS(Cascading Style Sheet 层叠样式表) 简称,样式。
主要负责网页的美观。
1.4 css的使用方式
1)行内样式
注意:
1)使用标签的style属性进行css控制,css写在style属性值中
2)弊端:只能控制一个标签的样式
<a href="xxxx" style="font-size:19px;color:#090">超链接</a>
2)内部样式
注意:
1)使用style的标签进行css控制,css内容写在style标签体内
2)一次控制多个标签的样式
3)和html标签混杂在一起,不好维护。css内容无法在多个html页面中重用
<style type="text/css">
a{
font-size:24px;
color:#0F0;
}
</style>
3)外部样式(推荐使用)
注意:
1)建立独立后缀为css的文件,css内容写在该文件中
2)在使用css的html页面中,导入外部css文件
<!-- 导入外部css文件
href : 表示外部css文件的位置
rel: 表示关联的是样式表
-->
<link href="01.css" rel="stylesheet"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!--
<style type="text/css">
/*1.使用选择器选中你要设置样式的标签
2.给标签设置样式, 样式属性:样式值
*/
a{
font-size:36px;
color:#0F0}
</style>
-->
<!--将外部的css文件导入此html代码中-->
<link href="1.css" rel="stylesheet" />
</head>
<!--
css的使用方式:
1.行内样式:使用标签内部的style属性给每一个标签设置样式
缺点:一次只能给一个标签设置样式,如富哦标签比较多,工作量比较大,而且更改起来比较麻烦
2.内部样式:使用style标签,给style标签中写css的样式代码
缺点:css代码和html代码混杂在了一起,管理起来比较麻烦
3.外部样式(推荐):在html代码的外部,创建一个css文件,css文件中写独立的css代码,使用的时候,直接将css文件导入到html文件中即可
<link href="1.css" rel="stylesheet" />
href : 表示外部css文件的位置
rel: 表示关联的是样式表
-->
<body>
<a href="" >超链接</a><br />
<a href="" >超链接</a><br />
<a href="" >超链接</a><br />
<a href="" >超链接</a><br />
</body>
</html>
a{
font-size:36px;
color:#0F0}
2 CSS语法
a{
font-size:24px;
color:#F00;
}
选择器(selector):使用选择器来选择需要添加样式的标签。
CSS属性(property):给选择的标签添加什么样式。例如, 字体大小,颜色,背景.....
CSS值(value):添加样式的具体值。12px , 红色,背景图片....
2.1 选择器
标签选择器
作用: 选择同名的标签
div{
font-size:24px;
color:#F00;
}
注意:
1)选择到所有同名的标签
类选择器
作用: 选择同类的标签
/*类选择器*/
.c1{
font-size:24px;
color:#F00;
}
注意:
1)选择的标签必须有class的属性。同类的标签使用同名
2)当一个标签同时被标签选择器和类选择器选择,那么类选择器优先!!!
id选择器
作用: 选择一个标签
#d1{
font-size:24px;
color:#0F0;
}
注意:
1)选择的标签必须有id属性。
2)在同一个html页面中,建议不要出现两个同名的id属性的标签,后面使用javascript代码选择标签的时候,getElementById("id属性值")
3)id选择器的优先级最高!
并集选择器
/*并集选择器*/
.c1,#d1{
font-size:24px;
color:#0F0;
}
作用: 当多个选择器的css内容相同,那么可以使用并集选择器来合并css内容。
交集选择器
/*交集选择器
div里面的span标签
*/
.c1 span{
font-size:24px;
color:#0F0;
}
作用: 选择某个选择器中的子标签。
通用选择器
/*通用选择器*/
*{
font-size:24px;
color:#0F0;
}
作用; 选择所有的标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*标签选择器*/
div{
font-size:14px;
color:#F00;}
/*类选择器,给div1和div2设置样式*/
/*.c1{
font-size:16px;
color:#00F;}*/
/*使用id选择器给div1设置样式*/
#d1{
font-size:24px;
color:#600;}
/*将div4和div5的c2样式设置为和c1完全相同*/
/*.c2{
font-size:16px;
color:#00F;
}*/
/*当c1和c2中的css代码相同的时候,我们就可以使用并集选择器将两个选择其中的代码进行抽取,形成一个并集选择器*/
.c1,.c2{
font-size:16px;
color:#00F;
}
/*给div中的span标签设置一个样式,交集选择器*/
div span{
font-size:36px;
color:#006;
}
</style>
</head>
<body>
<div id="d1">div1</div><br />
<div class="c1">div2</div><br />
<div class="c1">div3</div><br />
<div class="c2">div4</div><br />
<div class="c2">div5</div><br />
<div><span>div中的span标签</span></div><br />
<span>独立的span标签</span>
</body>
</html>
伪类选择器
作用:控制标签在不同状态下的样式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!--
设置伪类选择器的时候,设置不同状态是有一定的顺序的(link-visited-hover-active)
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
-->
<style type="text/css">
a:link{
/*在a标签的link状态下需要展示的样式*/
font-size:24px;
color:#00F;
}
a:visited{
font-size:24px;
color:#900;
}
a:hover{
font-size:24px;
color:#F00;
text-decoration:line-through;
}
a:active{
font-size:24px;
color:#9F0;
}
</style>
</head>
<body>
<a href="3.css语法及选择器.html">伪类选择器</a>
</body>
</html>
标签有四种状态:
link: 没有访问过的状态
hover: 鼠标经过的状态
active:鼠标激活(按下但没有松开)的状态
visited: 已经被访问过的状态(鼠标点下且松开)
<style type="text/css">
/*使用link伪类控制--没有访问过的状态*/
a:link{
font-size:24px;
color:#F00;
}
/*使用visited伪类控制--已经被访问过的状态(鼠标点下且松开)*/
a:visited{
font-size:24px;
color:#CCC;
text-decoration:none;
}
/*使用hover伪类控制-鼠标经过的状态*/
a:hover{
font-size:24px;
color:#00F;
text-decoration:none;
}
/*使用active伪类控制--鼠标激活(按下但没有松开)的状态*/
a:active{
font-size:24px;
color:#0F0;
text-decoration:underline;
}
/*注意:
1)在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
2)在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有
效的。
正确顺序: link visited hover active
*/
</style>
</head>
<body>
<a href="01.css入门.html">超链接</a>
</body>
</html>
案例:给表格每一行鼠标经过加上背景
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*使用类选择器选中下面的三行*/
.c:hover{
background-color:#036;
}
</style>
</head>
<body>
<table border="1" align="center" width="400px" height="300px">
<tr>
<td>姓名</td>
<td>班级</td>
<td>成绩</td>
</tr>
<tr class="c">
<td>刘德华</td>
<td>java</td>
<td>60</td>
</tr>
<tr class="c">
<td>张学友</td>
<td>java</td>
<td>70</td>
</tr>
<tr class="c">
<td>郭富城</td>
<td>java</td>
<td>80</td>
</tr>
</table>
</body>
</html>
2.2 常用的CSS属性和值
CSS文本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
/*设置字符间距*/
letter-spacing:4px;
/*设置文本的位置*/
text-align:center;
/*给文本设置上划/下划/中划线*/
text-decoration:underline;
/*设置词语和词语之间的间距,设置之前需要分词,每个词语之间使用空格隔开*/
word-spacing:10px;
}
</style>
</head>
<body>
<div>中国 共产党 万岁</div>
</body>
</html>
CSS字体
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
/*设置字体*/
/*font-family:"黑体";*/
/*设置字体大小*/
/*font-size:36px;*/
/*设置字体样式*/
/*font-style:italic;*/
/*设置字体的粗细*/
/*font-weight:bold;*/
/*字体设置的简写属性,一定要注意属性的顺序*/
font:italic bold 36px "黑体";
}
</style>
</head>
<body>
<div>中国共产党万岁</div>
</body>
</html>
CSS背景
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{
/*给标签设置背景颜色*/
/*background-color:#006;*/
/*将背景设置为图片*/
/*background-image:url(05.%E7%B4%A0%E6%9D%90/mm.jpg);*/
/*设置背景图片的重复规则
repeat:默认显示的重复方式,x,y方向都重复
repeat-x:设置图片仅在x方向上重复
repeat-y:设置图片仅在y轴方向上进行重复
no-repeat:图片不重复
*/
/*background-repeat:no-repeat;*/
/*设置图片的位置*/
/*background-position:top right ;*/
/*设置图片背景的简写样式*/
background:#006 url(05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top right;
}
</style>
</head>
<body>
</body>
</html>
CSS列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul{
/*设置列表选项前面的样式*/
/*list-style-type:circle;*/
/*将图片设置为列表选项的一个标记*/
/*list-style-image:url(05.%E7%B4%A0%E6%9D%90/start.jpg);*/
/*列表样式的简写属性*/
list-style:url(05.%E7%B4%A0%E6%9D%90/start.jpg);
}
</style>
</head>
<body>
<ul>
<li>章子怡</li>
<li>刘亦菲</li>
<li>刘诗诗</li>
</ul>
</body>
</html>
CSS表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{
/*合并表格的边框*/
border-collapse:collapse;}
</style>
</head>
<body>
<table border="1" align="center" width="400px" height="300px">
<tr>
<td>姓名</td>
<td>班级</td>
<td>成绩</td>
</tr>
<tr class="c">
<td>刘德华</td>
<td>java</td>
<td>60</td>
</tr>
<tr class="c">
<td>张学友</td>
<td>java</td>
<td>70</td>
</tr>
<tr class="c">
<td>郭富城</td>
<td>java</td>
<td>80</td>
</tr>
</table>
</body>
</html>
CSS边框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
width:300px;
height:200px;
/*必须首先设置边框的样式之后,边框的颜色才可以显示*/
/*border-color:#F00;*/
/*给四个边框非别设置不同的颜色*/
/*
border-top-color:#0F0;
border-bottom-color:#063;
border-left-color:#9C0;
border-right-color:#F00;*/
/*设置边框的样式*/
/*border-style:solid;*/
/*实线:solid*/
/*border-left-style:solid;*/
/*点划线:dotted*/
/*border-top-style:dotted;*/
/*双实线:double*/
/*border-right-style:double;*/
/*虚线:dashed*/
/*border-bottom-style:dashed;*/
/*设置边框的宽度*/
/*border-width:5px;*/
/*border-left-width:1px;
border-top-width:3px;
border-right-width:6px;
border-bottom-width:9px;*/
/*使用简写属性,设置边框样式:booder:border-width border-style border-color*/
/*这个简写属性必须牢记*/
border:2px solid #F00;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
3 盒子模型
3.1 定义
可以把html页面上每个标签看做是一个盒子。
通过需求讲解盒子模型:
1.将盒子的宽高变为之前的两倍
2.将盒子厚度变为原来的两倍
3.盒子里面的内容距顶部内10px
4.盒子里面的内容距离左内边10px
5.下面的盒子距离上面的盒子10px(两种方式实现)
盒子相关的属性:
宽度和高度(width和height): 决定这个盒子的容量
内边距(padding): 盒子边框与内容的距离
边框(border): 盒子的厚度
外边距(margin): 盒子与盒子之间的距离
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
width:100px;
height:100px;
border:6px solid #900;}
#d1{
width:200px;
height:200px;
padding-top:10px;
padding-left:10px;
margin-bottom:10px;}
</style>
</head>
<body>
<div id="d1">div1</div>
<div>div2</div>
</body>
</html>
4 CSS定位(画图解释)
相对定位:relative(相对自己之前的位置)
绝对定位:abosolute(相对父标签的位置)
固定定位:fixed(相对浏览器位置固定,不随着滚动条的拖动而位置改变)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
width:100px;
height:100px;
border:3px solid #F00;}
#d2{
/*相对定位,相对于自己之前的位置*/
/*
position:relative;
top:20px;
left:20px;*/
/*绝对定位:相对于自己的父标签而言的*/
/*
position:absolute;
top:20px;
left:20px;*/
/*固定定位:相对于浏览器而言*/
position:fixed;
left:500px;
top:300px;
}
</style>
</head>
<body>
<div>div1</div>
<div id="d2">div2</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>