1.style=”text-align:center;文本对齐方式:居中对齐
// left左对齐,right右对齐,justify两端对齐,center居中对齐
font-size:25px;字体大小为25像素
color:red;字体颜色为红色
background-color:背景色”
2.行内样式调用方式:
<any style="…….."></any>
3.text-indent:2em;首行缩进
4.样式定义:
<1>、类定义:可以多次使用
要求:以点开始,后面用字母开头命名.name
调用:<anyclass="name"><any>
例如:
.content{
color:red;
font-size:16px;
background:blue;
}
调用时:<div class="content"></div>
<2>、id定义:全页面只能用一次
要求:以及#开头, #name
调用:<any id="name"></any>
例如:
#content{
color:red;
font-size:16px;
background:blue;
}
调用时:<p id="content"></p>
<3>、标签名定义
例如:
p{
font-size=14px;
text-align:center;
}
则所有的p标签都有这两个样式。
5.样式调用方式:
//页面内样式表
<1>、行内样式 范围:只在本页面中,其中行内样式范围只在这一行
<any style="样式名:样式值;"></any>
<2>、页面内样式:head中定义
<style>
.name{
样式名:样式值;
}
</style>
调用:<any class="样式名"></any>
//外部样式表 范围只要链接都可以起作用
<3>、链接式(链接页面外的样式)
在head中链接
<linkrel="stylesheet" href="链接的外部css文件"/>
<4>、导入式
<style>
@import url(two.css);
/style>
<3>、<4>均需要建立css文件
a.
.名称{
样式名:样式值;
}
调用时:<any class="样式名"></any>
b. 标签名称 如
p{
样式名:样式值;
}
调用时:<p> </p>
6、DIV定义边框
.box={
width:800px;/*宽*/
height:500px;/*高*/
margin:0 auto; /*居中*/
border:solid 1px red;/*边框线:实线 1像素颜色*/
}
(1)线型:solid实线
dashed虚线
double双线
dotted 点状线
(2)background-color:背景颜色
background:背景颜色/背景图像
background-image:背景图像
background:greenyellow url(../img/img1.jpg) no-repeat right bottom;
语法:
background: 背景色 背景图像 是否重复 水平位置 垂直位置;
(3)是否重复:
no-repeat不重复
repeat-x 水平重复
repeat-y 垂直重复
repeat 重复
(4)水平位置:left左,center 中, right 右,精确像素
垂直位置:top 上,center 中, bottom 下,精确像素
(5)margin 边距
margin-left/margin-right/margin-top/margin-bottom
margin:a ;示四边边距都相同
margin:a b;表示上下为a,左右为b
margin:a b c;示上为a左右为b下为c
margin:a b c d;示上a 右b 下c 左d
(7)padding 填充
padding-left/padding-right/padding-top/padding-bottom
padding:a ;表示四边填充都相同
padding:a b;表示上下为a,左右为b
padding:a b c;示上为a左右为b下为c
padding:a b c d;示上a 右b 下c 左d
(8)line-height: 行高 行间距
font-size:12px字体大小
ont-family :字体
font-weight:bold;字体加粗
font-style:italic;字体倾斜 normal正常
text-decoration:none/underline/overline 去下划线/加下划线/加上边线
7.超链接的4种状态(伪对象)
a:link 超链接访问前状态
a:hover 鼠标悬停时的样式
a:active 鼠标点击时的样式
a:visited超链接访问后的样式