层叠样式表
每个 html 标签, 都有一个 style 属性
<div>......</div>
属性与值之间使用冒号: 连接
属性与属性之间使用分号; 连接
使用 HTML 的 < style > 标签, 要写在 < head > 标签中
- <style type="text/css">
- div{
- color:red;
- }</style>
- @import url(CSS 文件的路径);
也要写在 head 标签中 style 标签中
css 文件的格式
div{color:black;}
某些浏览器中不支持
头标签的 link 标签
<link rel="stylesheet" type="text/css' href="div.css"/>
此种方式较常用
选择器
class 选择器
<style> .haha={color:black;}</style>
所有 class 属性值是 haha 的标签, 都会起作用
<div class="haha">....</div>
id 选择器
<style> #haha={color:black;}</style>
所有 id 属性值是 haha 的标签都会起作用
<div id="haha">....</div>
选择器的优先级
class 选择器大于标签选择器, id 选择器大于 class 选择器, 单独标签中的 style 属性的优先级最高
扩展选择器
关联选择器
<div><p>xxx</p></div>
要设置 div 标签里的 p 标签的样式使用:
div p {xxx}
组合选择器
将两个不同的标签设置相同的样式
div,p {xxx}
伪元素选择器
利用 CSS 中已有的样式
如超链接, 有原始状态, 悬停, 点击, 已点击等状态
在头标签的 style 标签中定义以下即可
- a:link{ }
- a:hover{ }
- :active{ }
- :visited{ }
CSS 的盒子模型
div+CSS
属性:
border
边框
padding 补白
内边距 (文本内容与边框的间距)
margin
外边距
float
值: left 表示文本流向对象的右边
不常用
position
值:
absolute
将对象从文档流中拖出, 会飘在上边一层
可以通过 top\left 属性, 调整 div 的位置
relative
不会将对象从文档流中拖出
同样可以使用 top\left 属性调整位置
来源: http://www.bubuko.com/infodetail-2756587.html