网页前端第四次培训

css常用属性

1.css背景

CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
**background-color **
设置背景颜色，颜色值通常以下面几种方式定义：
十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

h1
{
    background-color:#6495ed;
}
p
{
    background-color:#e0ffff;
}
div
{
    background-color:#b0c4de;
}

（1）background-image

设置背景图片，通常以图片的链接方式定义值

body {
	background-image:url('paper.gif');
}

（2） background-repeat
          设置背景如何重复平铺，默认情况下 background-image 属性会在页面的水平或者垂直方向            平铺。
          可设置以下几个属性值：
           no-repeat 不平铺
           x-repeat 只在水平方向上平铺
           y-repeat 只在竖直方向上平铺

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

（3） background-attachment
          定义背景图片随滚动轴的移动方式，有以下几种属性值
          scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。
          fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上。
          local：背景图相对于元素内容固定，
          inhert:继承

body
{
background-image:url('back.png');
background-attachment:fixed;
}

2.CSS文本
 

body{
    color:gray;
}

（1）direction 设置文本方向
         rtl:从右到左
         ltr:从左到右
         inhreit:继承

p{
    direction:rtl;
}

（2）letter-spacing 设置字符间距

p{
    letter-spacing:normal;//默认间距为0        
}

（3）line-height 设置行高
         可设置具体值，也可设置字体大小的倍数

p{
    line-height：1.5;        
}

（4）text-align 对齐元素中的文本

h1 {
text-align:center;
}//文本居中
p.date {
text-align:right;
}//向右对齐

3.CSS display 属性

实例

设置段落生成一个行内框：

p.inline { display:inline; }

4.CSS Float(浮动)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

、

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

img
{
    float:right;
}

5.CSS 盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

（1） CSS 边框

CSS边框属性允许你指定一个元素边框的样式和颜色。

（2）CSS padding（填充）

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。