HTML学习 day04

1、字体、文本声明

  声明语句必须要包含在{}号之中；
  属性和属性值之间用“:”分隔；
  当有多个属性时，用“；”进行区分；
  在书写属性时属性之间使用空格、换行等，并不影响属性的显示；
  如果一个属性有多个值，则每个属性值之间用空格分隔开。

CSS属性-字体

      font-size 字体大小属性：可设置字体的大小，常用单位px。网页默认大小16px
      font-style 字体风格属性：设置字体是否倾斜。font-style:normal/italic/oblique  分别为正常/斜体
      font-weight 字体加粗属性：设置字体加粗。font-weight:normal/100-900/bold/bolder  分别为正常/加粗
      font-family 字体名称属性：设置字体名称。font-family:"字体名称"
      text-align 文本对齐属性：设置文本对齐格式。text-align:top/bottom/middle/justify(两端对齐)
      vertical-align 垂直对齐方式。vertical-align:top/bottom/middle
      line-height 行高属性：设置行距。line-height:数值/倍数

      text-decoration 文本修饰属性：设定文本划线属性
      语法：text-decoration:none/underline(下划线)/overline(上划线)/line-through(删除线)/blink(文字闪烁)

      letter-spacing 设置文本字符间距。控制字母或者汉字的间距
      word-sapcing 设置单词字母间距。
      text-transform 大小写切换。text-transform:none/capitalize(每个字母大写开头)/uppercase(仅有大写字母)/lowercase(仅有小写字母)
      font-variant:normal/small-caps/inherit 小型大写字母 规定应该从父元素继承

      font:font-weight font-style font-size/ line-height font-family; 文字属性的缩写
      注意：文字缩写属性必须要在font-size和font-family同时存在时才会生效
      其中font-weight 和font-style没有会使用缺省值。
      font-size和line-height必须以"/"(反斜杠)连接。
      文字属性的简写必须按照此顺序

      color 颜色属性。color:颜色;
      width 宽度属性。值为数值，单位px/%
      height 高度属性。值为数值，单位px/%

2、列表的声明

CSS属性-列表

      定义列表符号样式：1.list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)
                     2.使用图片作为符号：list-style-image:url（所使用图片的路径及全称）
                     3.定义列表符号位置：list-style-position:outside/inside

3、背景的声明

CSS属性-背景

      background-color 为元素设置背景色
      background-image 为元素设置背景图。background-image:url(图片的路径及全称)
      background-repeat 设置背景图是否平铺。
      语法：background-repeat:repeat/repeat-x/repeat-y/no-repeat

      background-position 背景定位属性，设置背景图片属性，
      通过方向或者数值来设置：left top；或者0px 0px；分别表示水平位置和垂直位置

      background-attachment 背景附着属性，设定图片是否跟随内容滚动 值：scroll/fixed
      语法：background:背景颜色  背景图像   背景位置  背景重复 背景附着

4、浮动的详细讲解

CSS属性-浮动

• 网页元素的三种位置方式
  
  1.普通流：普通流中元素框的位置由元素在XHTML中的位置决定。元素从上到下依次排列
  
  2.浮动：浮动的元素脱离普通流。浮动的元素可以在左右移动，直到它的外边框边缘碰到包含块或另一个浮动元素的边缘。
  
  3.定位

     float:none/left/right; 左/右浮动。浮动框是脱离了普通的文档流
     clear：none/left/right/both 无/左/右/全部不允许浮动