css属性

css字体属性

 font-style：
            italic      字体倾斜
            oblique  内容倾斜
            normal   默认(可用于取消倾斜)

font-size

      浏览器默认的字体大小是16px
      pt  
     em ：如果自己有font-size值，相对于自己的font-size值，如果自己没有font-szie，相对于父元素的font-size值
      比如：1em=16px

font-weight
        normal  正常粗细
        bold      加粗
        bolder   更粗
        lighter   变细
       100-900（500为正常字体的粗细）

font-family：
    当英文字体只有一个单词组成时不加双引号；如：（Arial）；
    Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.
    正确格式为 font-family:"设定字号";"备用字号1";"备用字号2";

• 设置小写字母变为小型大写字母     font-variant: small-caps;
• rgba（）中的a可以设置透明度，范围是0~1之间
• 字体的复合属性，可以设置多个字体值，后两位设置的样式是固定的
  font :加粗   倾斜    字体大小    字体样式；

 

 

 

css文本属性

1. 首行缩进  text-indent:2em 可设置负值，可以实现影藏文本的效果，自动换行的标签管用（块元素）
2. 字间距(可以设置负值) letter-spacing
3. 词间距(可以设置负值，设置的是空格距离)  word-spacing
4. 文本的修饰（线条的修饰）

                  text-decoration：

                                         underline      下划线
                                         line-through  删除线
                                         overline        上划线
                                         none             取消线条
                                         inherit           继承父元素的属性值

 

• 文本大小写内容的转换

text-transform：
            capitalize    首字母大写
            uppercase  大写
            lowercase   小写

• 设置空白空间（内容是否换行，空格或者回车是否识别）

white-space：
               normal      默认效果
               pre            强制内容不换行，可以识别空格，回车
               nowrap     只有一个不换行的效果
               pre-wrap  自动换行，回车，空格都识别
               pre-line    自动换行，只能识别回车

• 水平对齐（只能给块元素设置）

 

• 行高（行高包含字体大小）

 

css背景属性

• 复合属性       background：颜色 图片 图片的平铺方式 图片的位置
• 背景颜色       background-color：
• 背景图片       background-image：url(图片的路径)

                         标签图片<img>：自带宽高（图片本身的大小）
                         背景图片：没有宽高大小（显示大小取决于盒子的大小；盒子小于图片时显示图片一角；盒子大于图片时，图片会自动平铺）

• 背景的平铺方式     background-repeat：
                                               no-repeat    不平铺，只出现一次
                                               repeat-x     水平平铺
                                               repeat-y     垂直平铺
                                               repeat       水平垂直都平铺（默认值）
• 设置背景图片的位置      background-position：    水平位置（left right center）   垂直位置（top bottom center）        left 和 top 为默认值
                                                   其他表示方式：    数值(px、%) ： 0px 0px  默认值            水平方向：正值往右，负值往左                                                                                                                                                                                                                                          垂直方向：正值往下，负值往上
                                                                                                  %：（盒子的宽度-图片宽度）的距离换算成百分比
• 固定背景图片的属性      background-attachment：fixed；
• 设置背景图片的大小      backgroud-size:    100% 100% (占满盒子，图片完整显示，但是可能会被压缩变形)                                                                               
                                                                        cover  （占满盒子，图片不一定完整显示，等比缩放）                                                                                               
                                                                       contain（不一定占满盒子，图片完整显示，等比缩放）

 

• 思考题

        如果复合属性之后出现了单独的属性所呈现的效果会是怎样？

background: red   url(images/img03.jpg)  repeat-x   20px 30px;

background-position:center;

答：如果这样写后出现的单独属性内容会覆盖掉复合属性的内容呈现的效果将会是：默认颜色 没有背景图片 默认平铺 居中

 

 

元素类别

• 块元素（p,div,h1-h6,ul,ol,li,dl,dt,dd,form,表格）

    1、块元素都是独占一行，自动换行，上下排列
           2、块元素可以设置宽高
           3、块元素可以嵌套内联元素，块元素也可以嵌套块元素，（p,h1-h6,dt除外）

 

• 内联元素（行内元素span，b，strong，i，em，a/input，img）

                   1、内联元素都是一行显示多个，水平排列的内容
                   2、内联元素设置不了宽高,内联元素的宽高由内容撑开
                   3、内联元素只能嵌套内联元素

 

元素浮动

• 浮动的特性：

 1、浮动的元素，不占位（不完全脱离），脱离文档流 ，盒子不占位，内容占位

 2、如果想要所有的内容都水平显示，需要所有的盒子都设置浮动

 3、浮动会受父元素宽度的限制，显示不下就会挤下来

 4、浮动不占位的副作用，只会影响本身盒子后面的第一个盒子，跟前面几个盒子没有关系（如果一排浮动的元素height不一样，被挤到第二排的浮动元素会受height影响）