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: [字体风格][字体变形][字体加粗]<字体大小>[/行高]<字体设置>