HTML/CSS从零开始-常用属性(三)

 

一、css文本属性

 （1）文本大小{font-size:value;}

    单位：pt:9pt=12px;浏览器默认字体大小为16px
          em:1em=16px;
    在CSS2.0中
    xx-small:9px
     x-small:11px
       small:13px
       medium:16px
       large:19px
     x-large:23px
    xx-large:27px

(2)字体颜色

  {color: rbg250,250,250/#000000/red;}

(3)文本字体{font-family:"字体1","字体2","字体三";}

  浏览器按字体解读
  注意：字体名为中文时加双引号:“微软雅黑”；单个英文单词可不加:Arial;英文有空格加引号：“Times New Romen”;

(4）字体加粗{font-weight:;}

  属性值：normal/500(常规);bold/600-900(加粗)；bolder(更粗)；

(5)文字倾斜

{font-style:itatic（斜体字）/oblique（倾斜的文字）/normal(取消倾斜)}

(6)水平对齐方式

{text-align:left/center/right/justify(两端对齐);}

(7)垂直对齐方式

{vertical-align:top/bottom/middle;}

(8)文本行高

{line-height:normal/value;}

测量行高：本行文字的顶部到下一行文字的顶部；
单行文本：行高=容器高时，垂直居中；行高
说明：font简写顺序： font-style font-weight font-size/line-height font-family;
                  {normal 600 16px "微软雅黑";}

(9)文本修饰

{text-decoration:none/underline（下划线）/overline（下划线）/line-through(添加删除线)}

扩展：添加删除线

(10)首行缩进

{text-indent:value;}
    value是字的个数单位为：em;
    text-indent为负值，往前退
    只对文本首行起作用

（11）字间距

{letter-spacing:value;}
控制英文字母与汉字之间的距离

扩展：{word-break：break-all;}=
换行

二、边框

{border-top/bottom/right/left:1px solid/dotted/dashed/double;}

三、CSS列表属性

(1)列表符号样式

{list-style-type:disc(实心圆)/circle(空心圆)/squrare(空心方宽)/none(去掉列表符号);}
     {list-style-type:none}同等于{list-style;none;}

(2)图片作为列表符号

{list-style-image:url();}

(3)定义列表符号位置

{list-style-position:ouside/inside;}

(4)去掉列表符号

{list-style:none;}

四、背景属性

（1）背景颜色{background-color:value;}
（2）背景图片{background-image:url(路径);}
（3）背景图平铺{background-repeat:no-repeat(不平铺)/repeat(平铺)/repeat-x(水平铺)/repeat-y(垂直平铺);}
（4）背景图固定{background-attachment：scroll(滚动)/fixed(固定);}
（5）背景图位置{background-position:x y(数值：50px 50px;方向：right bottom;)}
     方向位置有：水平（left/center/right）垂直(top/center/bottom)
（6）简写：{background:url() no-repeat center top fixed  #f00;}
           {background:url() no-repeat center 100px #f00 scroll;}

五、网页常用的图片格式

（1）jpg:有损压缩 损失质量 适用颜色丰富的图像
（2）gif:有损压缩 损失色彩 支持透明、动画 适用颜色较少的图像
（3）png:损失图片色彩较少，不支持动画，支持透明，是fireworks;
说明：要求高存png,要求更高存gif,兼容时使用gif;

六、浮动（让竖立的元素横着排）

  {float:left/right/none}
（1）清除浮动{clear:left/right/both;}
说明：浮动之后的元素是脱离文档流是悬浮在上面的，当你浮动元素的前面那个元素是标准流中的元素时（没有浮动）
浮动之后的元素的位置是靠浏览器的，浮动元素后面的没有浮动的元素会挤进浮动元素原来的位置。
（2）解决高度塌陷
高度塌陷：产生的条件父级元素没有写高度，子元素浮动；
解决办法：(1)在浮动元素的最后加一个空的

,给这个div写上声明div{clear:both;}
          (2)在css中给父级元素添加一个声明，div{overflow:hidden;}

七、盒模型

1、定义：网页元素如何显示以及相互关系。
 边框 边界  补白 内容区

2、padding(补白)
(1)填充：padding在设定页面中的一个元素中一个元素内容到元素的边缘（边框）之间的距离，补白；
(2)用来调整内容在容器中的位置关系
(3)用来调整子元素在父级元素中的位置
(4)padding属性加在父级元素上面
关于padding值减不减问题？
1、减：父级元素有宽高
2、不减：父级元素没有宽高;
(5)如何减？
高-（top+bottom）；宽-（left+right）；       
3、语法：
四个值：{padding：top right bottom left；}
一个值：{padding：20px}={padding:20px 20px 20px 20px;}
二个值：{padding：20px 30px；}={padding：20px 30px 20px 30px;}
二个值：{padding：20px 30px 40px；}={padding：20px 30px 40px 30px;}
拆分：{padding-top/right/bottom/left:value；}

2、margin
(1)边际：margin在设定页面中元素外边的空白区；
(2)margin属性加在子级元素上面     
(3)语法：
四个值：{margin：top right bottom left；}
一个值：{margin：20px}={padding:20px 20px 20px 20px;}
二个值：{margin：20px 30px；}={padding：20px 30px 20px 30px;}
二个值：{margin：20px 30px 40px；}={padding：20px 30px 40px 30px;}
拆分：{margin-top/right/bottom/left:value；}