CSS
添加方法
- 行内添加
<p style="color:red"></p>
- 内嵌添加
<head>
<style type="text/css">
p{
color:red;
}
</style>
</head>
- 单独文件
link+tab
<link rel="stylesheet" href="css/style.css" />
css选择器
- 标签选择器 h1 p
- 类别选择器 .class
- ID选择器 #id
选择器的嵌套,用空格:p span{}
集体申明,标签用逗号连接:p,h1{}
全局申明, *{}
响应式布局
- 固定宽度 960px/980px/1190px/1210px
- 流式布局 100%
- 响应式布局 检测设备信息,宽度不同,布局不同
CSS3:Media Query 媒体查询
1. 超小屏 《768
2. 小屏 》768
3. 中屏 》992
4. 大屏 》1200
5. 从上至下执行
<style>
body{
background-color:black;
}
@media screen and (min-width:768px)
body{
background-color:red;
}
@media screen and (min-width:992px)
body{
background-color:green;
}
</style>
框架:bootstrap
视口:布局视口 = 设备视觉视口
sublime快捷键
- !
- meta:vp
- link:css
- a:link
- #id
- .class
- inp
- tabel>tr3>th+td2