CSS的调用方式
- 在head中调用(<style>…</style>)
- 在body中调用(使用style属性)
- 调用css文件(demo.css)
CSS样式分类
- 行内样式;
<p style="color:#0000FF; font-size:24px; font-family: '方正舒体';">HELLO</p>
- 内嵌样式;
<head><style>…</style></head>
- 链接样式;
<head>
<link href="mycss.css" rel="stylesheet" type="text/css" />
</head>
- 导入样式;
<style type="text/css">
<!--
@import url(mycss.css);
@import mycss.css;
-->
</style>
PS:有时候导入不成功,一般不使用
CSS的优先级问题
四种方式优先级(高到低):
- 行内样式-内嵌样式-链接样式-导入样式;
- 按照最靠近元素的定义来显示
- 如果两个css文件冲突,以后面的为准
CSS选择器
选择器(selector):
- 标记选择器;
html标记名,例如:body、input、h2、select等
- 类别选择器;
class属性名,例如: .one{}、.two{}等,类别选择器(class)和“.”一起使用的
当使用多个类别选择器时,class属性中多个类别选择器之间用空格分隔!
<h2 class=“one two”>多个类别选择器同时应用</h2>
- ID选择器;
id属性名,例如: #one {}、#two {}等,ID选择器和“#”一起使用的
装饰超链接 伪类选择符
对链接的修饰
- a:link 未访问时的状态
- a:visited 访问过后的状态
- a:active 鼠标点中不放时的状态
- a:hover 鼠标划过时的状态
<a href=www.baidu.com>百度</a>
手形鼠标属性
<div style="cursor:hand;"></div>
定位属性
属性名 | 含义 | 属性值 |
Position | 位置 | Absolute|relative|static |
Left | top | 横向|纵向位置 | N em | % |
Width | height | 宽度|高度 | 同上 |
Clip | 剪切 | Shape | auto |
Overflow | 内容超出时 | Visible | hidden | scroll | auto |
Z-index | 立体效果 | Integer |
visibility | 可见性 | Inherit | visible | hidden |
盒子模型