文章目录
- css语法
- css 引用方式
- 选择器分类
- 基本选择器
- 标签选择器
- ID选择器
- 类选择器
- 通用选择器
- 组合选择器
- 后代选择器
- 子代选择器
- 属性选择器
- 分组选择器
- 伪类选择器
- 超链接未访问
- 超链接已访问
- 鼠标悬停
- 鼠标点击
- 输入框获取焦点时样式
- 伪元素选择器
- 选择器的优先级
- 属性
- 文字属性
- font-family
- font-weight
- font-size
- color
- text-align
- line-height
- text-decoration
- 背景属性
- display属性
- 盒模型
- 浮动和清除浮动
- 位置属性
- 相对定位
- 绝对定位
css语法
- 选择器
- 样式声明
/* 我是注释: 这里使用 div 的标签选择器 */
div{
/* 声明属性和值 */
width: 100px;
height: 100px;
}
css 引用方式
- 行内样式
<div style="width:100px; height:100px"></div>
- 内联样式
<head>
<!-- 必须在 head 中 -->
<style>
/* 所有 div 标签都会应用这个样式 */
div{
width: 100px;
height: 100px;
}
</style>
</head>
- 外部样式
<head>
<link rel='stylesheet' href='css/index.css'>
</head>
选择器分类
基本选择器
标签选择器
<html>
<div></div>
</html>
<style>
div{
width: 100px;
height: 100px;
}
</style>
ID选择器
<html>
<div id='div1'></div>
</html>
<style>
#div1{
width: 100px;
height: 100px;
}
</style>
类选择器
<html>
<div class='div2'></div>
</html>
<style>
.div2{
width: 100px;
height: 100px;
}
</style>
通用选择器
<html>
<div></div>
</html>
<style>
*{
padding: 0;
margin: 0;
}
</style>
组合选择器
后代选择器
<html>
<div class='div1'>
<a class='a1' href='javascript:;'></a>
<div class='div2'>
<a class='a2' href='javascript:;'></a>
</div>
</div>
<html>
<style>
/* 取消 div 下所有 a 标签超链接下划线 */
div a{
text-decoration: none;
}
</style>
子代选择器
<html>
<div class='div1'>
<a class='a1' href='javascript:;'></a>
<div class='div2'>
<a class='a2' href='javascript:;'></a>
</div>
</div>
<html>
<style>
/* 取消 div1 下 a1 的超链接下划线 */
.div1>a{
text-decoration: none;
}
</style>
属性选择器
分组选择器
<html>
<p></p>
<a href='javascript:;'></a>
<html>
<style>
p,a{
color: red
}
</style>
伪类选择器
超链接未访问
a:link{
color: blue;
}
超链接已访问
a:visited{
color: gray;
}
鼠标悬停
a:hover{
color: white;
}
鼠标点击
a:active{
color: white;
}
输入框获取焦点时样式
input:focus{
outline: none;
background-color: #eee;
}
伪元素选择器
选择器的优先级
对于指明的样式来说:
内嵌样式的权重为1000
id选择器的权重为100
类选择器的权重为10
标签选择器的权重为1
对于未指明的样式来说:
权重为0
属性
文字属性
font-family
相当于设定字符集, 当浏览器不支持第一个的时候, 会尝试下一个
body{
font-family:"Microsoft Yahei","微软雅黑,","Arial"
}
font-weight
字体粗细, 一般400, 700
值 | 描述 |
normal | 标准 |
bord | 粗体 |
border | 更粗 |
lighter | 更细 |
100-900 | 设置具体值, 400->normal, 700->border |
inherit | 继承父元素的font-weight |
font-size
字体大小
p{
font-size: 12px;
}
color
字体颜色
/* 支持颜色名称 */
p{
color: red;
}
/* 支持rgb值 */
p{
color: rgb(255,103,0);
}
/* 支持十六进制值 */
p{
color: #7a7a7a;
}
text-align
文本对齐
值 | 描述 |
left | 左对齐 |
right | 右对齐 |
center | 居中对齐 |
justify | 两端对齐 |
line-height
行高, 上下居中
text-decoration
文字装饰
值 | 描述 |
none | 默认 |
underline | 文字下划线 |
overline | 文本上划线 |
line-through | 删除线 |
inherit | 继承父元素的text-decoration |
背景属性
display属性
block
默认占整行, 可以设置宽高
inline
行内元素
生效后, 宽高边距浮动等属性无效
inline-block
行内块, 可设置宽高
none
隐藏
盒模型
浮动和清除浮动
位置属性
相对定位
如果仅对当前div设置相对定位, 那么它和不设置相对位置没有任何变化
作用: 父相子决
父元素: 设置相对定位
子元素: 设置绝对定位
特点:
不脱标
压盖现象
不要使用相对定位调整布局
绝对定位
设置绝对定位的盒子, 脱离标准流
单独使用一个绝对定位的盒子
top属性是以页面左上角做参考点
bottom是以首屏页面左下角做参考点