HTML&CSS&DIV

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超链接访问后的样式