html代码入门书记,html入门-4(示例代码)

css 基础 - 2

一．文本样式：

文字竖着书写：

语法：writing-mode : lr-tb、tb-rl

参数：lr-tb：从左向右，从上往下 　tb-rl：从上往下，从右向左

1.text-align：(水平对齐方式)

left(居左)  center(居中)   right(居右)

2.text-indent：(缩进)

单位：em(字符)  px(像素)

3.line-height：(行高)

4.cursor:(光标)

pointer(手型指针)

       wait(等待)

help (帮助)

            text(文本光标)

二．边框样式:( border)

1.top (上)  bottom(下) left(左) right(右)

2.width (线宽)

3.style：solid(实线)  dashed (点滑线)   dotted(点线)

4.color (颜色)

注意：合成样式中方位属性(top，bottom等)直接跟在border后面！

圆角：border-radius ： 10px

三．行元素与块元素

块元素:

1.独占一行

2.设置宽高有用

行元素:

1.行元素是紧挨着上一个元素显示，不会独占一行

2.设置宽高没有用

行&块元素 可以相互转换

display:  block  转成块元素

display: inline   转成行元素

display: inline-block   转成行块元素，变成行元素，但是具有块元素的特点(可以设置宽高)

四．精灵技术( css spirit )

1.background-image

2.background-color

3.background-position(位置)

left    center    right

top    center    bottom

4.background-repeat：(平铺方式)

no-repeat(不平铺) repeat-x(水平平铺) repeat-y(竖直平铺)

5.background-attachment：(固定)

6.background合成样式

background : url(“./img/1.jpg”) no-repeat center top fixed;

7.把容器的宽高 设置成 目标图片 的大小(宽&高)

8.调节background-position坐标值

透明度：

谷歌： opacity ： 0.5；

IE ： filter： alpha (opacity： 50)；

五．盒模型

1.padding:   盒子里面的内容 距离 盒子四周的距离, 可以简单的理解为"div"

padding:20px;                      (内容到四周边框的距离为20px)

padding-top:10px;              (内容到上边框的距离为10px)

padding-right:20px;           (内容到右边框的距离为20px)

padding-bottom:30px;      (内容到下边框的距离为30px)

padding-left:40px;              (内容到左边框的距离为40px)

padding:10px 20px;             (内容到上、下边框的距离均为10px，到左、右边框的距离均为20px)

padding:10px 20px 30px;  (内容到上边框的距离为10px，到左、右边框的距离均为20px，到下边框的距离为30px)

2.margin:  盒子&盒子之间的距离

方位属性与padding一样，不设(top等)方位属性时默认为四边