前端复习笔记(二)——CSS
CSS样式
概述
- CSS: Cascading Style Sheets 层叠样式表
- 内容和样式相分离，便于修改样式
- 每个声明最后要加上分号最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号
- 为了使用样式更加容易阅读，可以每条代码写在一个新行内
添加方法
行内
eg:
<p style="color:red;">
emmmm
</p>
内嵌
- 即使有公共css代码，也是每个页面都要定义的
- 适合文件很少，CSS代码也不多的情况
- 页面太多，不易维护
<html>
<head>
<style>
p{
color:red;
}
</style>
</head>
</html>
外部样式
单独文件
引入:
<link rel="stylesheet" href="xxx.css"/>
优先级
行内>内嵌>外部样式
选择器
标签选择器
p{
...
}
html,body{
....
}
类别选择器
css：
.box1{
...
}
.box2{
....
}
html:
<div class="box1">
...
</div>
<div class="box2 box1">
</div>
ID选择器
#box1{
...
}
<div id="box1">
</div>
其余声明
- 集体声明
hq,p{...}
- 全局声明
*{...}
文字样式
颜色
| red,blue… | 颜色名 |
|---|---|
| rgb(x,x,x) | rgb值 |
| rgb(x%,x%,x%) | rgb百分比值 |
| rgba(x,x,x,x) | rgb值+透明度 |
| #rrggbb | 十六进制数，eg：红色:#ff0000 |
文本
字符间距 letter-spacing
h1{letter-spacing:2px}
h2{letter-spacing:-2px}
行高line-height
h3{line-height:2em}
对齐方式text-align
.box{text-align:center|right|justify}
装饰线 text-decoration
h1{text-decoration:overline(上划线)|line-through(中划线)|underline(下划线)|none(删除装饰)}
字体 font
- font: 字体的所有属性
- font-family: 字体
- font-size : 字号
- font-style: 斜体
- font-weigh: 字体粗细
所有
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
背景与超链接
背景属性
-
background: 背景所有属性 (颜色 图片 repeat)
-
background-color: 背景颜色
-
**background-image:url("")**背景图片
-
background-repeat: repeat|repeat-x| repeat-y | no-repeat
- 是否重复
超链接
:伪类选择器
- a:link 普通未被访问的链接
- a:visited 用户已访问的链接
- a:hover 用户指针位于链接的上方悬停
- a:active 链接被点击的时刻
a:link{
....
}
列表与表格
列表List
- list-style: 所有用于列表的属性设置的声明
- list-style-image: 为列表项设置图像
- url("")
- list-style-position: 标志的位置
- inside
- outside
- list-style-type: 标志的类型
- none 无标记
- disc 默认，实心圆
- circle 空心圆
- square 实心方块
- decimal 数字
- lower-roman 小写罗马数字
- upper-roman 大写罗马数字
- lower-alpha 小写英文字母
- upper-alpha 大写英文字母
- lower-Greek 小写希腊字母
- lower-latin 小写拉丁字母
- upper-latin 大写拉丁字母
表格
- width:…
- height:…
- border: 2px soild #ff0000
- border-collapse
奇偶选择器:nth-child(odd|even)
CSS布局与定位
概述
盒子模型
- 页面元素的大小
- 边框
- 与其他元素的距离
定位机制
- 文档流
- 浮动定位
- 层定位
盒子模型
- overflow属性: 当内容溢出盒子时
- hidden:超出部分不可见
- scroll:显示滚动条
- auto:如果有超出部分，显示滚动条
- border属性:
- border-witdh:px,thin,medium,thick
- border-style:dashed,dotted,solid,double
- border-color:颜色
- border:width,style,color
边距
| 外边距 | 内边距 | 组成 |
|---|---|---|
| margin | padding | 上右下左 |
| margin-left\right\top\bottom | padding-left\right\top\bottom | … |
div{margin:1px 2px 3px 4px;}
- margin的合并:垂直方向合并，水平方向不合并
- **div水平居中:**margin: 0 auto 浏览器自动计算
CSS定位
文档流 flow
浮动 float
层 layer
文档流
block
- 独占一行
- 元素的height,width,margin,padding都可设置
- block元素
<div>,<p><h1>-<h6>,<ol><ul><table><form>
a{
display:block
}
将元素显示为block元素
inline元素a转换为block元素，从而使a元素具有块状元素特点
inline
- 不单独占用一行
- width,height不可设置
- width就是它所包含的文字或图片的宽度，不可改变
- inline元素间存在间距问题
- 常见inline元素
<span><a>
div{
display:inline
}
将元素显示为inline
inline-block
- 同时具备inline元素，block元素的特点
- 不单独占用一行
- 元素的height,width,margin,padding都可设置
- 常见的inline-block:
<img>
div{
display:inline-block;
}
none
float浮动定位
- 属性:left,right,none
- left 左浮动
- right 右浮动
- None 不浮动
- clear属性: left,right,both
- 清除浮动
层定位
position属性
- fixed 固定定位
- 相对于浏览器窗口进行定位
- relative 相对定位
- 相对于其直接父元素进行定位
- absolute 绝对定位
- 相对于static定位以外的第一个父元素进行定位
- 属性有效
- static 默认值
- 没有定位，top,bottom,left,right,z-index 无效
CSS3
圆角边框与阴影
圆角边框border-radius
- border-top-left-radius: 左上角
- border-bottom-left-radius: 左下角
- border-top-right-radius: 右上角
- border-bottom-right-radius: 右下角
阴影box-shadow
box-shadow:inset 水平偏移 垂直偏移 模糊距离 颜色
inset(可选,内部阴影)|outset(默认值,外部阴影)
文本与文字
text-shadow属性
text-shadow:水平偏移 垂直偏移 阴影大小 颜色
word-wrap属性
允许长单词,url强制换行
- break-word 允许单词换行
- normal 不换行
@font-face规则
@font-face{
font-family:字体的名字;
src:url('xxx.ttf'),
....
url('xxx.eot');
}
p{
font-family:引用字体名字
}
2D变换
transform属性
对元素进行旋转、缩放、移动、拉伸
- rotate()
- 数字+deg 旋转的角度
- scale(x,y)
- 缩放的大小
#box{
transform:rotate(300deg)
}
过渡与动画
过渡 transition属性
- transition
- 属性名 持续时间 过渡方法
- transition-property
- 属性名|all 对哪个属性进行变化
- transition-duration
- 持续时间
- transition-timing-function
- 过渡使用的方法(函数)
- linear 匀速
- ease 慢快慢
- ease-in 慢快
- ease-out 快慢
- ease-in-out 慢快慢
- transition-delay
anamation 动画
@keyframes my1(动画名字)
{
...
}
div:hover{
animation:my1 5s linear
}
- animation 简写
- animation-name 引用动画的名称
- animation-duration 动画完成时间
- animation-timing-function 规定动画的速度曲线，默认ease
- animation-play-state running|paused
3D变换
transform-style:preserve-3d
- rotateX(2deg) X轴旋转
- rotateY(3deg) Y轴旋转
- rotateZ(4deg) Z轴旋转
- perpective 透视