CSS的概念
1.Cascading Style Sheet 级联样式表
2.表现HTML或XHTML文件样式的计算机语言
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。
CSS的作用
1.能控制页面的样式和布局
2.网页文件与样式文件相分离,提高开发效率
块元素
1.独占一行
2.可以定义宽度和高度
常用块元素
div
,
p
,
ul
,
li
内联元素
1.一行排列显示
2.
不能定义宽度和高度
常用内联元素
span,a ,label
<div>和<span>标签
最大优点
没有任何的默认样式渲染
最大区别
<div>标签是块元素
<span>标签是内联元素
标签的嵌套规则
1.块级标签可以嵌套行内标签的,行内标签不可以套块标签
2.<p>标签不要套快属性标签,可以套a、span
3.嵌套的时候注意代码缩进
作用
1.结构化HTML元素
2.DIV+CSS网页布局
3.提高网页加载速度
注意:
<div>和
<span>
标签可以相互转换
(
display
属性)
规范角度而言,
<span>
标签中不内嵌
<div>标签
CSS语法
<style>标签
<html>
<head>
<style type="text/css">
h1{
font-size: 12px;
color: #F00;
}
</style>
</head>
<body>
...
</body>
</html>
注意:
1、应写在<head>标签之间;
2、加上
type="text/css"
属性
CSS选择器
<!--语法-->
选择器{
声明1;
声明2;
......
}
注意:
1.CSS的最后一条声明后的“
;”
可写可不写,
建议都要写上;
2.CSS
的多条声明可写在同一行
,
但开发时便于阅读建议分行写并缩进;
标签选择器
HTML标签作为标签选择器的名
称:<h1>…<h6>、
<p>
、
<img/>
注意:标签选择器直接应用于
HTML
标签
p{
font-size: 16px;
}
类选择器
<标签名 class= "class(类名称)">标签内容</标签名>
注意:网页中可给不同标签相同的class
.class{
font-size: 16px;
}
ID选择器
<标签名 id= "id(id名称)">标签内容</标签名>
注意:网页中标签的ID不能重复,唯一存在
#id{
font-size: 16px;
}
超链接伪类
/*未访问的链接*/
a:link{
color: red;
}
/*已访问的链接*/
a:visited{
color: blue;
}
/*当鼠标悬停在链接上*/
a:hover{
color: green;
}
/*被选择的链接*/
a:active{
color: yellow;
}
注意:
1、
在
CSS
定义中
,
a:hover
必须被置于
a:link
和
a:visited
之后
,
才是有效的
2、
在
CSS
定义中
,
a:active
必须被置于
a:hover
之后
,才是有效的
3、
记忆方法
:
l
o
v
e
ha
te
CSS复合选择器
并集选择器
注意:
1.多个选择器之间可以是多个不同或相同类型;
2.多个选择器之间必须用英文半角输入法逗号“
,
”隔开;
p,#id,.class{
font-size: 14px;
color: green;
}
交集选择器
注意:
1.格式为
:
标签
+
类选择器
或
标签+ID选择器
2.选择器之间不能有空格
h3.second{
font-size: 14px;
color: green;
}
后代选择器
注意:
1.选择器之间可以是多个不同或相同类型并有层级关系的;
2.选择器之间用空格隔开;
p a{
font-size: 14px;
color : green;
}
CSS引入方式
行内样式
使用
style
属性引入
CSS
样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
内部样式表
style标签中书写
CSS代码
…
<head>
<style type="text/css">
h3{
color: red;
}
</style>
</head>
…
外部样式表
1.CSS代码保存在扩展名为.css的样式表中
2.HTML文件引用扩展名为.css的样式表,有两种方式:
链接式、导入式
链接式
<link type="text/css" rel="styleSheet" href="CSS文件路径 " />
导入式
<style type ="text/css">
@import url("css文件路径");
</style>
链接式与导入式的区别
<link/>
1.属于XHTML
2.优先加载CSS文件到页面
@import
1.属于CSS 2.1
2.先加载HTML结构再加载CSS文件
CSS中的优先级
行内样式
>
内部样式表
>
外部样式
表
ID选择器 >
类选择器
>
标签选择器
CSS的属性
字体属性
属性 | 描述 |
---|---|
font-style
|
设置字体风格
|
font-weight
|
设置字体粗细
|
font-size
|
设置字体的尺寸
|
font-family
|
设置字体系列
|
font
|
简写属性
,
作用是把所有针对字体的属性设置在一个声明中(
注意顺序
)
例如
:
font: italic bold 16px "
楷体
";
|
文本属性
属性 | 描述 |
---|---|
color |
设置文本的颜色
,
如
red
,
#FF0000
|
line-height
|
设置文本的行高
|
text-align
|
设置文本的对齐方式
,
如
left
、
center
、
right
|
text-decoration
|
设置文本装修,如underline、none、line-through
|
背景属性(设置页面元素的背景样式)
属性 | 描述 |
---|---|
background-color
|
背景色
,
取值如
,
red
,
#FF0000
|
background-image
|
背景图片
,
如
: background-image: url( “./images/bg.png” );
|
background-position
|
背景位置
|
background-repeat
|
背景填充方式
,
取值
:
repeat-x | repeat-y | no-repeat
|
background
|
合写方式
,
如
background:
#fff url(bg.png) left top no-repeat;
|
列表属性
属性 | 描述 |
---|---|
list-style-image
|
将图片设置为列表标志
|
list-style-type
|
设置列表项标志的类型:
disc(实心圆
) | circle (
空心圆) | square(
正方形
)
|
list-style
|
以上属性的合并简写
,
或none去掉默认属性设置
|
鼠标形状控制(cursor属性)
值 | 说明 | 图例 |
---|---|---|
url | 需使用自定义光标的URL | -- |
default | 默认光标 | |
pointer | 超链接的指针 | |
wait | 指示程序正在忙 | |
help | 指示可用的帮助 | |
text | 指示文本 | |
crosshair | 鼠标呈现十字状 | |
move | 对象可被移动 |
盒子模型
外边距margin
margin-top 上
margin-right 下
margin-bottom 左
margin-left 右
margin
注意:
margin: 上 右 下 左
;
(
顺时针方向)
边框border
类别 | 属性 | 描述 |
---|---|---|
修饰属性 |
border-color
|
设置边框的颜色
,
如
border-color: #FF0;
|
border-width
|
设置边框的宽度
,
如
border-width
:
2px
| |
border-style
|
设置边框的类型
,
如
solid
(
实线
)、
dashed
(
虚线)、
none
(
无边框
)
等
| |
四个方向 |
border-top
|
上边框
|
border-right
|
右边框
| |
border-bottom
|
下边框
| |
border-left
|
左边框
| |
简写方式 |
border
|
统一设置
4
个方向边框的属性
,
如border:
1px solid red;
|
内边距(padding)
padding
-top 上
padding
-right 下
padding
-bottom 左
padding
-left 右
padding
注意:
padding
: 上 右 下 左;
(
顺时针方向)
盒子模型总尺度
盒子模型总尺度 = border + padding +margin + 内容尺寸(宽/高)
外边距可用于网页居中显示
margin-left: auto;
margin-right:auto;
块元素才能完全适用于盒子模型
使用
display
属性来相互转化:
none
(
元素隐藏
,
不可见
)
block
(
转为块元素
,
独占一行
)
inline
(
转为内联元素
,
不换行
)
浮动属性(float)
取值
:
left 左浮动
right 右浮动
none 不浮动
作用:
1.块元素同行排列显示,一般用于排版、分栏显示
2.设置浮动属性后,脱离文档流向指定的左或右边对齐直到父元素的边界或浮动的元素
注意:
使用浮动后要及时清除,以免影响其后的网页元素
清除浮动(clear)
清除浮动必要性:
1.浮动后,脱离了文档流不占网页空间
2.浮动后的网页元素会影响同级元素
clear属性清除浮动:
left
right
both
none
取值表明容器框的哪边不挨着浮动框
overflow属性
作用:
定义溢出元素内容区的内容会如何处理
取值:
visible (默认)
auto
hidden
scroll
定位属性(position)
1.relative(相对定位)
相对它原来的位置,通过指定偏移,到达新的位置。
仍在标准流中,它对父级盒子和相邻的盒子都没有任何影响
2.absolute(绝对定位)
相对已设定非static定位属性的父元素计算偏移量
fixed(相对浏览器固定定位,IE6不支持)
static(默认)
偏移量设置
X轴(left、right 属性)与Y轴(top、bottom属性)
可取值:像素或百分比