1、概念
css: cascade style sheets
级联样式表/层叠样式表
语法：属性名:属性值
原理：把属性从标签中分离，html提供标签封装数据 css提供属性 作用到指定标签上来控制数据的样式
优点：
1 ：属性和标签的分离 实现样式复用
2 ：比html提供更丰富，更精准的属性样式
3 ：可以实现页面元素的任意布局
2 、 css与html整合的方式
<html> <!--html是根标签：所有标签都是其子标签-->
<head><!--头标签：对当前html文件进行统一的属性设置-->
<title>css01</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!--引入外部css文件-->
<link type="text/css" rel="stylesheet" href="02.css"/>
<style type="text/css">
/*css的注释*/
/*.p1：样式要作用于class=p1所有标签上*/
.p1{
border:3px solid blue; /*边框：符合属性：粗细 样式 颜色*/
color:#aaaaaa;/*内容颜色*/
font-size:30px;/*字体大小*/
text-align:center;/*文本对齐方式*/
background-color:#cccccc;/*背景图片*/
margin:5px;/*外边距*/
}
</style>
<style type="text/css">
/*引入外部css文件*/
@import url("01.css");
</style>
</head>
<body>
<h1>css与html整合的方式1：行内样式表(标签的style属性)</h1>
<!--所有的标签都有三个属性：id class style
style属性的值就是css代码
-->
<!--行内样式表：通过标签的style属性
缺点：css代码在标签中 无法实现样式复用
-->
<font style="color:#ff0000;font-size:20px;font-weight:bold;font-family:楷体;border:blue double 3px;">font标签</font><br/>
<font style="color:#ff0000;font-size:20px;font-weight:bold;font-family:楷体;border:blue double 3px;">font标签</font><br/>
<h1>css与html整合的方式2：内部样式表(head的style子标签)</h1>
<!--内部样式表：通过head的style子标签实现
缺点：css代码写在当前页面中 样式无法被其他页面复用
-->
<p class="p1">
p标签1 class="p1"
</p>
<p class="p1">
p标签1 class="p1"
</p>
<p class="p1">
p标签1 class="p1"
</p>
<p>
p标签1
</p>
<h1>css与html整合的方式3：外部样式表(head的style子标签)</h1>
<!--外部样式表：通过@import引入外部css文件 或者 通过head的link子标签来引入外部css文件-->
<hr/>
<hr/>
<h3>h3标签</h3>
<h3>h3标签</h3>
<h3>h3标签</h3>
</body>
<html>
hr{/*样式要作用于标签名为hr的所有标签上*/
width:80%;
height:10px;
margin:10px auto;
background-color:red;
}
h3{
color:yellow;
font-size:40px;
text-align:center;
margin:10px;
}
3 、选择器
用于选择当前样式要作用于那些元素上
通配符符选择器：*{}
标签选择器： 标签名{}
类选择器： .class值{}
id选择器： #id值{}
组合选择器： 选择器1,选择器2,选择器3{}
派生选择器： 父选择器 子选择器{}
伪类选择器： :xxx{}
<html> <!--html是根标签：所有标签都是其子标签-->
<head><!--头标签：对当前html文件进行统一的属性设置-->
<title>css02选择器</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
/*1:通配符选择器：选中当前页面的所有元素*/
*{
background:#cccccc;
}
/*2:标签选择器：选中指定标签名的所有标签*/
div{
border:1px solid blue;
}
/*3:类选择器：选中指定class值的所有标签*/
.cla1{
color:red;
}
/*4:id选择器：选中指定id值的某个标签*/
/*html规范：在同一个页面中id值必须唯一*/
#font_id1{
font-size:30px;
font-weight:bold;
}
/*5:组合选择器：样式作用于多个选择器选中的所有标签上*/
#font_id2,.cla2,span{
background-color:#33aacc;
width:600px;
}
/*6：派生选择器：样式作用于选中的父标签下的符合要求的子标签*/
.cla2 font{
color:blue;
border:1px solid red;
}
/*7：伪类选择器：实现页面动态效果：：：浏览器兼容性差
:link a标签未被访问过
:hover 鼠标悬停
:visited a标签已被访问过
:active 元素激活瞬间(a标签+按钮)
:focus 获取输入焦点(input组件)
:first-letter 第一个字符
*/
/*a标签未被服务过的样式*/
a:link{
font-size:40px;
background-color:#cccc33;
text-decoration:overline;
}
a:visited{
font-size:20px;
background-color:#33cccc;
text-decoration:line-through;
}
a:hover{
font-size:30px;
background-color:#cc33cc;
text-decoration:none;
}
a:active{
font-size:50px;
background-color:#33cc33;
text-decoration:line-through;
}
/*class=cla2的元素 鼠标悬停*/
.cla2:hover{
color:red;
font-size:40px;
}
/*p标签的第一个字符*/
p:first-letter{
color:#aaff33;
font-size:30px;
font-weight:bold;
}
/*input组件 获取输入焦点*/
input{
border:1px solid blue;
}
input:focus{
background-color:#aacc66;
}
</style>
</head>
<body>
<a href="#">11.jpg</a><br/>
<a href="#">12.jpg</a><br/>
<a href="#">13.jpg</a><br/>
<a href="#">14.jpg</a><br/>
<div class="cla2">div没有任何自带效果 唯一作用封装数据：<font>与css结合 块标签</font></div>
<div class="cla1">div</div>
<div class="cla1">div</div>
<span>span没有任何自带效果 唯一作用封装数据：<font>与css结合 行标签</font></span><br/>
<span class="cla2">span没有任何自带效果 唯一作用封装数据：<font>与css结合 行标签</font></span><br/>
<font class="cla1" id="font_id1">font标签</font><br/>
<font id="font_id2">font标签</font><br/>
<p>春眠不觉晓 处处闻啼鸟 夜来风雨声 花落知多少</p>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
</body>
<html>
4、 选择器的优先级
<html> <!--html是根标签：所有标签都是其子标签-->
<head><!--头标签：对当前html文件进行统一的属性设置-->
<title>css03选择器优先级</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
div{
border:1px solid blue;
width:300px;
height:100px;
margin:10px;
}
#div1{
color: red;
}
.cla1{
color: blue;
background:#cccccc;
}
div{
background:#ccaa33;
}
*{
background:#aacc88;
}
/*选择器优先级:
style属性 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
*/
</style>
</head>
<body>
<div class="cla1" id="div1">div class="cla1" id="div1"</div>
<div class="cla1" id="div1" style="color:yellow;">div class="cla1" id="div1"</div>
<div class="cla1">div class="cla1"</div>
<div class="cla1">div class="cla1"</div>
<div >div</div>
<div >div</div>
</body>
<html>
5、 盒子模型(掌握常用的属性)
把标签模拟成盒子 来学习常用的属性
<html> <!--html是根标签：所有标签都是其子标签-->
<head><!--头标签：对当前html文件进行统一的属性设置-->
<title>css03选择器优先级</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
div{
/*边框：复合属性*/
border:1px solid blue;
border-color:red;
border-left:3px double yellow;
border-right-color:green;
/*大小*/
/*height:150px;*/
width:400px;
/*边距*/
/*外边距：相邻边框之间的距离*/
margin:10px;/*上下左右：10px*/
margin:10px 40px;/*上下10px 左右40px*/
margin:10px 40px 80px 120px;/*上右下左*/
margin:20px auto;/*上下20px 左右居中*/
/*内边距：数据与边框之间的距离*/
padding:20px;
/*文本*/
text-indent:100px;/*首航缩进*/
text-align:right;/*文本对齐方式*/
word-break:break-all;/*边框内换行*/
/*字体*/
font: italic bold 30px 楷体;/*复合元素*/
font-weight:bold;/*加粗*/
font-size:28px;/*大小*/
font-family:楷体;/*样式*/
/*text-decoration : none || underline || blink || overline || line-through */
text-decoration:line-through;/*划线*/
letter-spacing:10px;
}
#div11{
/*背景*/
/*background : background-color || background-image || background-repeat || background-attachment || background-position */
background:#aaaaaa;
background-color:#aacc33;/*背景颜色*/
background-image:url("bg.png");/*背景图片*/
/*background-repeat : repeat | no-repeat | repeat-x | repeat-y 平铺方式*/
background-repeat:repeat-x;
height:400px;
}
</style>
</head>
<body>
<div id="div11">divstyle属性 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器</div>
<div id="div12">divaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div id="div13">divstyle属性 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器</div>
<div id="div14">divaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>
<html>
6 、布局
把元素放在页面的制定位置
6.1 、浮动
涉及的属性：float/clear
<html> <!--html是根标签：所有标签都是其子标签-->
<head><!--头标签：对当前html文件进行统一的属性设置-->
<title>css05 浮动</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
/*
不设置浮动和定位时 多个div呈现的顺序：：文档流
文档流排列方式：每行一个div 从上到下排序
*/
div{
/*边框：复合属性*/
border:1px solid blue;
/*大小*/
height:100px;
width:600px;
/*边距*/
/*外边距：相邻边框之间的距离*/
margin:20px;/*上下左右：10px*/
/*内边距：数据与边框之间的距离*/
padding:20px;
/*文本*/
word-break:break-all;/*边框内换行*/
/*字体*/
font: italic bold 16px 楷体;/*复合元素*/
}
#div11{
background-color:#aacc33;
float:left;/**/
}
#div12{
background-color:#66cc66;
/*float:left; */
clear:both;/*取消上一个元素的float命令对当前元素的影响 选择按文档流排序*/
}
#div13{
background-color:#3366cc;
float:right;
/*
float:right; 有两个效果
1：当前元素要放在尽可能的右边
2： 下一个元素要放在当前元素的左边
*/
}
#div14{
background-color:#aacccc;
float:left;
}
</style>
</head>
<body>
<div id="div11">div11111111111</div>
<div id="div12">div22222222222222222</div>
<div id="div13">div3333333333333333333333333</div>
<div id="div14">div44444444444444444444444444444444444444</div>
</body>
<html>
<html> <!--html是根标签：所有标签都是其子标签-->
<head><!--头标签：对当前html文件进行统一的属性设置-->
<title>css05 浮动</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
#div11{
width:600px;
border:1px solid blue;
margin:200px auto;
font-size:22px;
}
#div11 img{
width:350px;
height:300px;
float:right;
}
</style>
</head>
<body>
<div id="div11">
<img src="../imgs/1.jpg"/>
是根标签：所有标签都是其子标签是根标签：所有标签都是其子标签是根标签：
所有标签都是其子标签是根标签：所有标签都是其子标签是根标签：所有标签都是其子标签是根标签：
所有标签都是其子标签是根标签：所有标签都是其子标签是根标签：所有标签都是其子标签是根标签：
所有标签都是其子标签是根标签：所有标签都是其子标签是根标签：
所有标签都是其子标签是根标签：所有标签都是其子标签是根标签：所有标签都是其子标签
是根标签：所有标签都是其子标签是根标签：所有标签都是其子标签是根标签：所有标签都是其子标签
是根标签：所有标签都是其子标签是根标签：所有标签都是其子标签是根标签：所有标签都是其子标签
</div>
</body>
<html>
6.2、 绝对定位
<html> <!--html是根标签：所有标签都是其子标签-->
<head><!--头标签：对当前html文件进行统一的属性设置-->
<title>css06 定位</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
/*
position: absolute；绝对定位
position: relative；相对定位
top/bottom:
left/right:
*/
div{
width:240px;
height:130px;
border:1px solid blue;
margin:20px;
font-size:22px;
word-break:break-all;
padding:10px;
}
#div11{
background-color:#aacc33;
}
#div12{
background-color:#66cc66;
/*
position:absolute:绝对定位
1 文档流中不再保留当前元素的位置
2 如果当前元素的父辈元素设置了position 当前元素设置的top和left就相对于此父元素
如果当前元素的所有父辈元素都没设置position 当前元素设置的top和left就相对于body
*/
position:absolute;
top:100px;/*相对于窗口的上边框*/
left:200px;/*相对于窗口的左边框*/
}
#div13{
background-color:#3366cc;
}
#div14{
background-color:#aacccc;
}
body{
border:1px solid red;
background-color:#cccccc;
padding:0px;
}
#div0{
width:800px;
height:600px;
/*position:absolute;
top:100px;
left:200px;*/
margin-top:100px;
margin-left:200px;
}
</style>
</head>
<body>
<div id="div0">
<div id="div11">div11111111111</div>
<div id="div12">div22222222222222222</div>
<div id="div13">div3333333333333333333333333</div>
<div id="div14">div44444444444444444444444444444444444444</div>
</div>
</body>
<html>
6.3、 相对定位
<html> <!--html是根标签：所有标签都是其子标签-->
<head><!--头标签：对当前html文件进行统一的属性设置-->
<title>css06 定位</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
/*
position: absolute；绝对定位
position: relative；相对定位
top/bottom:
left/right:
*/
div{
width:240px;
height:130px;
border:1px solid blue;
margin:20px;
font-size:22px;
word-break:break-all;
padding:10px;
}
#div11{
background-color:#aacc33;
}
#div12{
background-color:#66cc66;
position:relative; /*相对定位：相对于当前元素在文档流中本来的位置*/
top:100px;/*相对于本来位置的上边框*/
left:200px;/*相对于本来位置的左边框*/
/*
position:relative; 相对定位
1 文档流中会保留当前元素的位置
2 相对于流中本来当前元素的位置
*/
}
#div13{
background-color:#3366cc;
}
#div14{
background-color:#aacccc;
}
body{
border:1px solid red;
background-color:#cccccc;
padding:0px;
}
</style>
</head>
<body>
<div id="div11">div11111111111</div>
<div id="div12">div22222222222222222</div>
<div id="div13">div3333333333333333333333333</div>
<div id="div14">div44444444444444444444444444444444444444</div>
</body>
<html>
6.4、 定位练习
<html> <!--html是根标签：所有标签都是其子标签-->
<head><!--头标签：对当前html文件进行统一的属性设置-->
<title>css05 定位</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
#div11{
width:420px;
border:1px solid blue;
margin:20px auto;
padding:10px;
}
img{
width:400px;
height:400px;
}
#font1{
font-size:38px;
font-weight:bold;
letter-spacing:30px;
color:red;
position:relative;
top:-190px;
left:100px;
}
</style>
</head>
<body>
<div id="div11" style="margin-top:200px;">
<img src="../imgs/1.jpg" />
<font id="font1">大好河山</font>
</div>
</body>
<html>
