CSS属性 、字体、文本、边框属性、背景、 浮动、精灵图、属性继承、大小写转换、边框图片、元素类型

css属性

字体类

• 字体大小 font-size
• 字体加粗 font-weight:bold/100-900/normal
• 字体类型 font-family
• 字体倾斜 font-style:italic/normal
• 字体复合写法
  font:字体加粗(可选) 字体倾斜(可选) 字体大小/行高 字体类型

文本类

• 文本颜色 color: 颜色单词/十六进制/rgb()
• 文本水平对齐方式 text-align:left/center/right/justify
• 文本修饰 text-decoration:underline/overline/line-through/none
• 文本缩进 text-indent:数值px/em 可以设置负数
• 行高 line-height
• 单行文本：文本垂直居中
  多行文本：增大行间距

大小写转换 ： text-transform
capitalize: 首字母大写
uppercase: 全部大写
lowercase: 全部小写

字符之间的距离
letter-spacing: 数值px 可以设置负数，对于汉字是字和字之间，对于英文单词字母和字母

词间距
word-spacing:数值px; 可以设置负数，加大单词和单词之间的距离

边框属性

border-style： solid/ dashed/dotted/double

border-width
border-color

• 边框颜色不写的时候跟随字体颜色

单方向边框

• left/right/top/bottom
• border-left:none/o;

边框图片
border-image:url(图路径) 裁切的大小;

border: 40px solid red; (先有40px的大小去放边框图片)
border-image: url(img/下载.jpg) 40;

元素类型

block

• div/h1-h6/p/ul/ol/li/dl/dt/dd
• 特点
  • 可以设置宽高
  • 独占一行
  • 可以作为一个容器（盒子）包含其他元素
    P标签不可以包含所有的块元素，尤其是p

inline

• span/a/i/em/b/strong/del/u/sup/sub
• 特点
  • 不可以设置宽高，由元素本身撑开
  • 可以和其他行内元素显示在一行
  • 为其设置浮动，元素可以变为块元素
  • 若标签之间回车，会形成空袭可以写在同一行或者添加浮动（见内联或者内联块之间的间距）

inline-block

• img/input
• 可以同一行显示 可以设置宽高

元素类型转换

• display:block/inline/inline-block/none
• display:none 隐藏后不占位
• visibility:hidden 隐藏后占位

内联或者内联块之间的间距

(1)将代码写同一行
(2)给该元素加浮动
(3)给元素加一个父元素，给父元素设置font-size:0;子元素设置正常的字体大小

解决图片自带底部留白

1. img{display:block}
2. img{vertical-align:middle/top/bottom}
3. img{float:left}
4. 给图片的父元素设置font-size:0;

• 浏览器分辨率问题
  background-size:cover

浮动

• 浮动的属性和值 float:none/left/right

• 浮动元素超出父元素后会掉下来

精灵图:改变图片的位置

减少浏览器请求t图片的次数
减小浏览器的体积

css属性继承

可继承

• 文字类
  font-size
  font-style
  font-weight
  font-family
• 文本类
  color
  text-align
  text-indenet
  line-height
• 列表类
  list-style

不可继承

• height/width
• padding/margin
• diaplay/border

继承样式权重最低