- css语法
- css的引入方法
- 选择器分类
- 基本选择器
- 组合选择器
- 属性选择器
- 分组选择器
- 伪类选择器
- 超链接未访问
- 超链接已访问
- 鼠标悬停
- 鼠标点击
- 输入框获取焦点时样式
- 伪元素选择器
- 选择器的优先级
- 属性
- 文字属性
- font-family
- font-weight
- font-size
- color
- text-align
- line-height
- text-decoration
- 背景属性
- display属性
- 盒模型
- 浮动和清除浮动
- 位置属性
css语法
div{
width: 100px;
height: 100px;
}
css的引入方法
内嵌样式
<html>
<head>
<style>
div{
width: 100px;
height: 100px;
}
style>
head>
<body>
<div>div>
body>
html>
行内样式
<html>
<head>
head>
<body>
<div style='width:100px; height:100px'>div>
body>
html>
外部样式
<html>
<head>
<link rel='stylesheet' href='css/index.css'>
head>
<body>
<div>div>
body>
html>
选择器分类
基本选择器
标签选择器
<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{
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>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;
}
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是以首屏页面左下角做参考点
