1.CSS:层叠样式表（Cascading Style Sheet).W3C要求页面内容和样式分离(HTML专门用来展 示内容,CSS专门用来排版写样式).
CSS文件后缀名:.css
2.页面引入CSS的方式:优先级:就近原则.
2.1:行内样式:在标签中直接用style属性写样式.
优点:直接方便
缺点:代码复用性差;内容和样式混在一起,违反W3C要求.
eg:
大家今天写代码要细心
2.2:内部样式:在<head>标签中写
优点:可以实现页面内样式复用
缺点:不能实现页面间的样式.
eg:<!--内部样式-->
<style type="text/css">
h2{
color:red;
}
</style>
2.3:外部样式:先写一个外部css文件,那个页面要用这个文件,就在这个页面的<head>中 用<link/>引入就可.
优点:可以实现页面间样式复用;符合W3C规范.
eg:<!--引入外部样式-->
<link rel="stylesheet" href="css/1.css" />
2.4:(了解)导入样式:在<head>中<style>标签中用@import导入外面css
<!--导入外部CSS文件-->
<style type="text/css">
@import url("css/1.css");
</style>
注意:导入样式 VS 外部样式
2.4.1:导入样式只有部分浏览器支持;外部样式所有浏览都支持.
2.4.2:加载时机不同:导入样式,先加载完html页面,再加载导入css文件;
外部样式,执行时就将CSS文件中代码引用了.
3.CSS的总语法:
选择器{
样式名1:样式值1;
样式名2:样式值2;
…
}
4.注释:/注释内容/
5.选择器:优先级: id选择器>类选择>标签选择器
5.1:标签选择器:选中页面上同一种标签.
eg:/标签选择器/
h1{
color:blue;
}
5.2:类选择器:先给标签取类名,然后以.类名开头.
eg:<!--给标签取类名-->
<h3 class="c2 c3">活的,女的</h3>
/*类选择器*/
.c2{
color: yellow;
}
.c3{
border: solid 1px red;
}
5.3:ID选择器:先给标签取id名,然后以#id名开头.
注意:在一个 HTML 文档中，每个ID 选择器会使用一次，所以同一个页面中不能有相同 名称ID名,但是同一个页面中可以有多个不同ID选择器。
eg:<!--给标签取id名-->
<h4 id="d2">潘金莲这款</h4>
/*id选择器*/
#d2{
color: green;
}
5.4:通用选择器(全局选择器):用*表示选中页面上所有标签.
eg: /*通用选择器*/
*{
color: orangered;
}
5.5:后代选择器:选择器之间以空格分隔
eg:/*后代选择器*/
body span{
color: red;
}
5.6:子选择器:选择器之间以>分隔
eg:/*子选择器*/
body>span{
color: red;
}
5.7:相邻兄弟选择器:(选中当前标签紧跟着弟弟标签),选择器之间以+分隔
eg:/*相邻兄弟选择器*/
h2+h3{
color: red;
}
5.8:群组选择器:选择器之间以,分隔
eg:/*群组选择器*/
h1,h2,h3{
color: red;
}
5.9:属性选择器:标签名[属性1][属性名2=值]
eg:/*属性选择器:标签名[属性1][属性名2=值]*/
h3[class]{
color: red;
}
6.超链接伪类样式
/鼠标单击前样式/
a:link{
color: red;
}
/*鼠标经过样式*/
a:hover{
color: green;
}
/*鼠标单击时样式*/
a:active{
color: blueviolet;
}
/*鼠标单击后样式*/
a:visited{
color: deeppink;
}
7.CSS中常用样式
7.1:字体样式
font-family:字体类型,eg:宋体,楷体
font-size:字体大小
font-style:字体倾斜类型,eg:italic,normal
font-weight:字体粗细
color:字体颜色
eg:/字体样式/
div{
/font-size: 30px;
font-family: “宋体”;
font-style: italic;
font-weight: bolder;
color: red;/
font:italic bolder 30px "宋体";
}
7.2:文本样式
letter-spacing:设置字符间距。
line-height:设置行高。
text-align:规定文本的水平对齐方式。
text-decoration:规定添加到文本的装饰效果。
text-indent:规定文本块首行的缩进。
eg:
/*文本样式*/
p{
text-indent: 50px;
letter-spacing: 20px;
line-height: 100px;
text-align: center;
text-decoration: underline;
}
/*去掉超链接下划线*/
a{
text-decoration: none;
}
7.3:背景样式
background-color:设置元素的背景颜色。
background-image:设置元素的背景图像。
background-position:设置背景图像的开始位置。
background-repeat:设置是否及如何重复背景图像。
eg:/*背景样式*/
body{
/*background-color: red;
background-image:url(img/gameBg2.jpg);
background-repeat: no-repeat;
background-position: 500px 200px;*/
background: url(img/gameBg2.jpg) 500px 200px no-repeat;
}
7.4:列表样式
list-style:在一个声明中设置所有的列表属性。
list-style-image:将图象设置为列表项标记
list-style-position:设置列表项标记的放置位置。
list-style-type:设置列表项标记的类型。
eg:/*列表样式*/
li{
border: solid 1px red;
list-style-position:inside;
/*list-style-type: decimal;
list-style: none;*/
list-style-image: url(img/sub-3.gif);
}
8.盒子模型:将html页面每个标签看作是一个盒子模型.
8.1:盒子模型的组成:标签内容,边框(border),内边距(padding),外边距(margin)
8.2:盒子模型的属性(border,padding,margin)按方位来设值:上-右-下-左
border:5px;上-右-下-左每个边框线都是5像素.
border:1px 2px; 上下边框线1px,左右边框线2px
border:1px 2px 3px; 上边框线1px,左右边框线2px,下边框线3px
border:1px 2px 3px,4px; 上边框线1px,右边框线2px,下边框线3px,左边框线4px
border-方位名:直接给指定方位设值
8.2:边框(border):
border-color:边框颜色
border-style:边框类型,eg:solid(实线),dashed
border-width:边框粗细
border:类型,粗线,颜色.
8.3:内边距(padding):标签内容与边框之间距离.
8.4:外边距(margin):标签边框与其他标签边框之间距离.
8.5:盒子模型的宽度=元素的宽度+左右内边距+左右边框线.
8.6:盒子模型的高度=元素的高度+上下内边距+上下边框线.
8.7:每个页面从里到外的结构:
margin->背景颜色->背景图片->padding->content->border
注意:客户从外到里看的.
8.8:能用外边距微调距离时,就不要用内边距.
9.position定位:静态定位(static,默认),相对定位(relative),绝对定位(absolute),
固定定位(fixed).
9.1:相对定位(relative):相对标签原来位置发生偏移,不影响其他标签.没有脱离标准文档流.
eg:/相对定位/
position: relative;
left: 200px;
top:50px;
9.2:绝对定位(absolute):相对当前标签的设置了position的父标签或父父级标签或视窗原点来发生偏移.脱离标签文档流,所以当前标签后面标签会将当前标签位置占着.
eg:/绝对定位/
position: absolute;
left:400px;
top:150px;
9.3:固定定位(fixed):生成绝对定位的元素，相对于浏览器窗口进行定位。
z-index:数字; 设置标签所在页面层次,默认页面在0层
eg:/*制作流氓广告*/
img{
/*固定定位*/
position: fixed;
z-index: 1;
left:500px;
top:150px;
}
9.4:定位一般用来微整标签的位置,能用相对定位,就不要用绝对定位.
10.浮动(float):将块级元素变成行级元素.float:left/right;
清除浮动:clear:left/right/both;
注意:如果一个元素浮动了,后面的元素受到浮动影响,如果后面的元素不想受浮动影响, 就要清除浮动.
eg:#d1,#d2{
float: left;
}
#d3{
clear: both;
}
11.CSS布局:(重点)
11.1:div+css:整体布局.
11.2:div+ul-li:做导航条/左右侧菜单
11.3:div+dl-dt-dd:做图文混排功能
11.4:form+table:做规整的表单
11.5:margin:0px auto; 页面整体居中
11.6:text-align:center;文字水平居中
11.7:line-height:高度; 文字在这一行垂直居中
11.8:vertical-align: middle;当前这一行如果有文字和图片时,想让图片垂直居中,
用这个属性
回顾:
1.超链接
2.框架集
3.内联框架,特殊字符
4.CSS定义及作用
5.页面引入CSS的方式
6.css的总语法
7.css的选择器(标签,类选择器,id选择器,通用,后代选择器,子选择器,相邻兄弟选择器, 群组选择器,属性选择器)
8.css的新式(文本,字体,背景,列表样式)
9.超链接伪类式(a:link,a:hover,a:active,a:visted)
10.盒子模型:(标签内容,内边距,外边距,边框)
盒子模型的宽度=内容宽度+左右内边距+左右边框
11.定位(静态定位,相对定位,绝对定位,固定)
12.浮动/清除浮动