Css总结

CSS解释

层叠样式表
优点
1. 使HTML专注与网页的内容，CSS专注与网页的表现
2.提供了丰富的格式化功能
3.可以针对各种可视化浏览器来设置不同的样式

CSS的样式

• 行内样式

  style = "width: 100px; height:100px; background-color: #F00;"

• 内嵌样式
  在HTML中， 使用<style></style>标记，将样式写在<style>标记内

• 外链式
  将CSS写入单独的一个文件中， 注意该文件的文件扩展名为：.css
  在HTML文档中使用<link>标记引入css文件

<link type="text/css" rel ="stylesheet" href = "sy.css"/>

CSS选择器

• 基本选择器：
  标签选择器：input{height:100px；}
  id选择器： # msg
  class选择器：.className
• 包含选择器：

选择符a 选择符b  {规则}

子代选择器： > .box>a
后代选择器： # #msg a

• 通配符选择器：
  *{ font-family: "宋体"；}

CSS中字体相关样式

• font-family
  指定字体
  可以为文字指定多个字体， 不同字体间用“，” 隔开

• font-size
  字体大小

• font-style
  字体倾斜效果
  normal不倾斜，oblique和italic倾斜
  ltalic是使用文字的斜体，oblique是让没有斜体属性的文字倾斜!

• font-weight
  字体粗细

  
  image.png

• text-transform
  英文字母大小写转换

  
  image.png

• text-decoration
  文字的装饰效果

  
  image.png

• text-indent
  段落内容首行缩进（悬挂缩进）

• 字词间距
  英文文本
  letter-spacing 字母和字母间距
  word-spacing 单词和单词间距
  中文文本
  letter-spacing 字和字之间的间距

• overflow
  hidden(超出部分隐藏)/scroll(出现滚动条)/auto(浏览器自动处理)

• text-overflow
  clip(不显示省略标记，简单裁切) | elipsis(文本溢出显示省略标记)
  文本溢出处理
  white-space: pre/normal(空白保留)/nowrap(不换行)

• line-height
  段落内容的行高
  注意：文字在每一行自动上下居中

• text-align

  
  image.png

• vertical-align
  baseline/top/text-top/middle/bottom/... 垂直对齐方式
  该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。