CSS的使用方法

• 写在标签内的style属性中

<p style="color:red;"></p>

• 写在<style> 元素中

<style>
    p{color:red}
</style>

• 通过外部引入

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

• @import 引入

@import url("./style.css")

CSS的基本语法

• CSS注释
  • /* 这里式注释内容 */
• CSS格式
  • 选择器{属性名:属性值;属性名:属性值;}
• 颜色单位
  • 英文名 red,green,blue...
  • 十六进制rgb #rgb/#rrggbb
  • rgb 数字（1-255） rgb(255,0,0)/百分比(1-100) rgb(100%,0,0)
• 长度单位
  • em（倍数）/px（像素）/%（百分比）...

选择器

• 标签选择器

p{
    width:600px;
    padding:20px;
    border:1px solid #ccc;
}

• ID选择器

#secondP{
    color: #369;
}

• CLASS选择器

.item{
    background-color:#f5f5f5;
}

• 全局选择器

* {
    border:1px solid red;
}

• 关联选择器
  • 选择器 选择器 如:.nav li / #box div / div .list / .container li
  • 选择器>选择器
• 组合选择器
  • 选择器,选择器,选择器.... 如: p.item
• 伪类选择器 如：a:link{} / a:hover{} / a:active{} / a:visited{}

选择器的优先级

id>class>tagName

• css权重
  !important Infinty
  行间样式 1000
  id 100
  class|属性|伪类 10
  标签|微元素 1（256进制）
  通配符 0

常见的CSS属性和值

字体属性

• font-family 字体设置 宋体|微软雅黑

font-family:"Arial","Helvetica",sans-serif;

• font-size: 字体大小
• font-style: 字体风格 normal | italic(字体本身的斜体) | oblique (强制斜体)
• font-weight: 字体加粗 normal | bold | lighter
• font-variant: 字体变形 normal | small-caps(字母小型大写)
• font: [字体风格][字体变形][字体加粗]<字体大小>[/行高]<字体设置>