一、选择器
1.标签选择器
标签名 {
属性 1: 属性值 1;
属性 2: 属性值 2;
属性 3: 属性值 3;
...
}
2.id和class选择器
#first{
color:pink;
}
.box {
width: 150px;
height: 100px;
font-size: 30px;
}
3.通配符选择器
* {
color: red;
}
4.后代选择器
可以选择父元素里面子元素
ol li a {
color: red;
}
5.子选择器
只能选择作为某元素的最近一级子元素
.nav>a {
color: red;
}
6.并集选择器
div,
p {
color: pink;
}
7.交集选择器
既能被选择器1选中,又能被选择器2选中
选择器之间是紧挨着的
如果有标签选择器,标签选择器必须写在最前面
p.red {
color: red;
}
8.伪类选择器
一般与a标签搭配使用,也可用于元素的过渡
/*未访问的链接*/
a:link {
color: #333;
text-decoration: none;
}
/*访问过的链接*/
a:visited {
color: orange;
}
/*鼠标活跃的链接*/
a:hover {
color: skyblue;
}
/*鼠标正在按下还没有弹起的那个链接 */
a:active {
color: green;
}
9.focus伪类选择器
:focus 伪类选择器,用于选取获得焦点的表单元素
input:focus {
background-color: pink;
color: red;
}
10.结构伪类选择器
根据元素在HTML中的结构关系查找元素
减少对与HTML中类的依赖
常用与查找父级元素中的子元素
选择器 | 说明 |
E:first-child{} | 匹配父元素的第一个子元素 |
E:last-child{} | 匹配父元素的最后一个子元素 |
E:nth-child(n){} | 匹配父元素的第n个子元素 |
E:nth-last-child(n){} | 匹配父元素的倒数第n个子元素 |
n的常见公式:
偶数:2n | even
奇数:2n+1 | odd
11.伪元素
必须设置content属性才能生效
伪元素默认是行内元素
伪元素 | 说明 |
::before | 在父元素内容的最前添加一个伪元素 |
::after | 在父元素内容的最后添加一个伪元素 |
.father::before {
/* 必加的属性 */
content: '';
display: block;
width: 100px;
height: 100px;
background-color: orange;
}
12.属性选择器
/* 找到页面中的input,并且需要有type属性 */
input[type]:focus{
background-color: pink;
}
/* 找到页面中的input,并且需要type属性值为text */
input[type="text"] {
background-color: red;
}
二、字体样式
属性 | 说明 |
font-family | 字体类型 |
font-size | 字体大小 |
font-weight | 字体粗细 |
font-style | 字体斜体 |
color | 颜色 |
1.font-family
font-family: '微软雅黑';
2. font-size
font-size:15px;
3.color
color:blue;
4.font-weight
font-weight:normal | bold | 400 | 500 | 600;
5.font-style
font-style:normal | italic | oblique
6.复合写法
font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft yahei';
font: italic 700 16px 'Microsoft yahei';
三、文本样式
属性 | 说明 |
text-decoration | 下划线、删除线、顶划线 |
text-transform | 文本大小写 |
font-variant | 将英文文本转换为“小型”大写字母 |
text-indent | 段落首行缩进 |
text-align | 文本水平对齐方式 |
text-shadow | 文本阴影 |
line-height | 行高 |
1.text-decoration
text-decoration:none | underline(下划线) | line-through(删除线) | overline(顶格线)
2.text-transform
转换文本的大小写,只是针对英文而言
text-transform:none | uppercase(大写) | lowercase(小写) | capitalize(首字母大写)
3.font-variant
把文本设置成小型大写字母,只是针对英文而言
font-variant:normal | samll-caps(小型大写字母)
4.text-indent
文本首行的缩进
text-indent:16px
5.text-align
文本对对齐方式
只能针对文本文字和 标签,对其他标签无效
text-align:left | center | right
5.text-shadows
文本阴影
text-shadow: h-shadow v-shadow blur color;
6.line-height
行高
line-height:1.6
四、边框样式
属性 | 说明 |
border-width | 边框的宽度 |
border-style | 边框的外观 |
border-color | 边框的颜色 |
border-radius | 边框圆角 |
1.border-weight
边框的宽度
border-weight:5px;
2.border-style
边框的外观
border-style:none | solid(实线) | dashed(虚线)
3.border-color
border-color:#000
4.border-radius
border-radius:50%
4.边框复合写法
/*所有边框*/
border:5px solid blud
五、背景样式
属性 | 说明 |
background-color | 背景颜色 |
background-image | 背景图像的路径 |
background-repeat | 图像显示方式 |
background-position | 背景图像定位 |
background-attachment | 是否随内容滚动 |
1. background-color
backgroud-color:pink
2.background-image
设置背景图像
background-image:url("src/img01.jpg")
3.background-repeat
定义背景图像的显示方式,例如不平铺、横向平铺和两个方向都平铺
background-repeat:no-repeat | repeat(默认平铺) | repeat-x | repeat-y
4.backgroud-position
定义了背景图像在该元素的位置
background-postion:center top
background-postion:10px top
5.background-attachment
设置背景图像是随对象滚动还是固定不动
fixed 背景相对于视口固定
local 相对于元素的内容固定
scroll相对于元素本身固定
background-attachment:fixed | local | scroll
6.背景的复合写法
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: transparent url(image.jpg) repeat-y fixed top ;
六、图片样式
属性 | 说明 |
width | 宽 |
height | 高 |
border | 边框 |
text-align | 水平对齐 |
vertical-align | 垂直对齐(top middle baseline bottom) |
七、列表样式
属性 | 说明 |
list-style-type | 列表项符号 |
list-style-image | 自定义列表项符号 |
1.list-style-type
none 去除列表符号
有序列表
decimal 默认123
lower-romen 小写罗马数字i、ii、iii
upper-roman 大写罗马数字I、II、III
lower-alpha 小写英文字母a、b、c
upper-alpha 大写英文字母A、B、C
无序列表
disc 默认值,实心圆 ●
circle 空心圆 ○
aquare 实心正方形 ■
2.list-style-image
list-style-image:url(img.png)
八、表格样式
属性 | 说明 |
border | 边框 |
border-collapse | 边框是否合并(separate | collapse 合并 |
border-spacing | 表格边框间距 |
weight height | 宽度与高度 |
caption-side | 表格标题位置 |
1.border
表格边框
border:1px solid #000
2.border-collapse
边框是否被折叠成一个单一的边框或隔开
border-collapse:separate(默认值) | collapse(边框合并)
3.border-spacing
定义表格边框间距
border-spacing:5px 10px
4.caption-side
表格标题的位置
caption-side:top(默认) | botton
九、盒子模型
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
margin border padding content
1.border
属性 | 作用 |
border-width | 定义边框粗细 |
border-style | 边框的样式 |
border-color | 边框颜色 |
border : border-width || border-style || border-color
none:默认值
solid:单实线
dashed:虚线
dotted:点线
2.padding
设置内边距,即边框与内容之间的距离
padding-top``padding-right``padding-bottom``paddign-left
值的个数 | 表达意思 |
padding:5px; | 设置全部内边距 |
padding:5p 10px; | 上下为5px,左右为10px |
padding:5px 10px 20px; | 上5px,左右10px,下20px |
padding:5px 10px 20px 30px; | 上右下左 |
3.maggin
设置外边距,即控制盒子和盒子之间的距离
margin:0 auto盒子水平居中
4.box-sizing
box-sizing:border-box
5.box-shadow
box-shadow:h-shadow v-shadow blur spread color inset
值 | 描述 |
h-shadow | 必需。水平阴影的位置。允许负值 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸 |
color | 可选。阴影的颜色。请参阅CSS颜色值。 |
inset | 可选。将外部阴影(outset)改为内部阴影。 |
十、浮动布局
浮动元素会生成一个块级框,而不论它本身是何种元素
folat:left | right
十一、定位布局
position 定位 = 定位模式 + 边偏移(top bottom left right)
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位
1.static 静态定位
静态定位是元素的默认定位方式,无定位的意思
在布局时很少用到
2.relative 相对定位
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的
原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它
相对定位并没有脱标。它最典型的应用是给绝对定位当父元素的
postiton:relative
3.absolute 绝对定位
元素在移动位置的时候,是相对于它祖先元素来说的
如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位
如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置
绝对定位不再占有原先的位置(脱标)
position:absolute
4.fixed 固定定位
固定定位是元素固定于浏览器可视区的位置
以浏览器的可视窗口为参照点移动元素
固定定位不再占有原先的位置(脱标)
position:fixed
5.sticky 粘性定位
粘性定位可以被认为是相对定位和固定定位的混合
以浏览器的可视窗口为参照点移动元素(固定定位特点
粘性定位占有原先的位置(相对定位特点)
必须添加 top 、left、right、bottom 其中一个才有效
position:sticky; top:10px;
6.z-index 叠放次序
使用 z-index 来控制盒子的前后次序 (z轴)
数值可以是正整数、负整数或 0, 默认是 auto,数值越大,盒子越靠上
如果属性值相同,则按照书写顺序,后来居上
数字后面不能加单位
只有定位的盒子才有 z-index 属性
十二、用户界面样式
界面样式,就是更改一些用户操作样式,以便提高更好的用户体验
更改用户的鼠标样式
表单轮廓
防止表单域拖拽
1.cursor 鼠标样式
cursor:default | pointer | move | text | not-allowed
pointer 鼠标小手
move 鼠标移动
text 鼠标文本
not-allowed 鼠标禁止
2.outline 轮廓线
活跃状态下的样式
outline:0 | none 去掉默认的边框样式
input {
outline: none;
}
3.resize 防止拖拽文本域
textarea{
resize:none;
}
十三、overflow、display、visibility
1.overflow
控制内容溢出元素框时显示的方式
overflow:visible | hidden | scroll | aoto | inherit
值 | 描述 |
visible | 默认值。内容不会被修剪,会呈现在元素框之外 |
hidden | 内容会被修剪,并且其余内容是不可见的 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 |
inherit | 规定应该从父元素继承 overflow 属性的值 |
2.display与 visibility
display属性设置一个元素应如何显示
visibility属性指定一个元素应可见还是隐藏
visibility:hidden 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间
display:none 可以隐藏某个元素,且隐藏的元素不会占用任何空间。
十三、transition 过渡
**作用:**让元素的样式慢慢变化,常配合hover使用
div {
width: 200px;
height: 200px;
background-color: red;
/* 过渡: 属性名 时长*/
transition: all 1s;
}
div:hover {
width: 800px;
background-color: yellow;
}
十四、transform 转换
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等
经常和transition搭配使用
translate(x,y) 2d转换
scale(x,y) 2d缩放
rotate(angle) 2d旋转 (deg)
十五、animation 动画
动画( animation)是CSS3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果
相比较过渡,动画可以实现更多变化,更多控制,连续自动插放等效果
@keyframes | 规定动画 |
animation | 简写属性,除了animation-play-state |
animation-name | 使用的动画 |
animation-duration | 动画时间 |
animation-timing-function | 速度曲线,默认是"ease"”。 |
animation-delay | 何时开始,默认是0. |
animation-iteration-count | 播放的次数,默认是1,还有 infinite |
animation-direction | 是否在下一周期逆向播放,默认是" normal" alternate逆播放 |
animation-play-state | 是否正在运行或暂停。默认是" running" 还有’ paused 暂停 |
animation-fill-mode | 规定动画结束后状态:forwards (保持)、backwards(回到起始) |
1.@keyframes 定义动画
0%是动画的开始,100%是动画的完成。这样的规则就是动画序列
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间,或用关键词"from"和"to",等同于0%和100%
@keyframes animation{
0%{
...
}
100%{
...
}
}
@keyframes move {
from {
transform: translateX(0px);
}
to {
transform: translateX(1400px);
}
}
div {
width: 100px;
height: 100px;
background-color: teal;
/* 调用动画 */
animation-name: move;
/* 持续时间 */
animation-duration: 3s;
}
2.animation-direction 动画是否逆向播放
animation-direction:norma | reverse | alternate | alternate=reverse
normal 默认的
reverse (终点=>起点)
alternate 到达终点是否原路返回 (起点=>终点=>起点)
alternate-reverse (终点=>起点=>终点)
3.animation-fill-mode 动画结束后状态
animation-fill-mode:forwards | backwords
forwards 保持当前位置
backwards 回到初始位置
4.animation-timing-function 动画速度曲线
@keyframes move {
0% {}
100% {
width: 200px;
}
div {
width: 0;
height: 30px;
background-color: teal;
/* animation: move 4s linear forwards(保持现状); */
animation: move 4s steps(10) forwards;
}
值 | 描述 |
linear | 匀速 |
ease | 默认。低速-加快-变慢 |
ease-in | 以低速开始 |
ease-out | 以低速结束 |
ease-in-out | 以低速开始和结束。 |
steps | 时间函数中的间隔数量 |
5.animation 简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
/*animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;*/
animation:move 1s ease 2s 3 alertnate fowwards
@keyframes move {
from {
transform: translate(0, 0);
}
to {
transform: translate(1000px, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: teal;
/* 动画名称 */
/* animation-name: move; */
/* 持续时间 */
/* animation-duration: 2s; */
/* 速度曲线 */
/* animation-timing-function: ease-in; */
/* 何时开始:延迟一秒 */
/* animation-delay: 1s; */
/* 重复次数 */
/* animation-iteration-count: 2; */
/* 是否逆向播放 */
/* animation-direction: alternate-reverse; */
/* 结束后状态 */
/* animation-fill-mode: forwards; */
animation: move 2s linear 0s infinite alternate forwards;
}
/* 鼠标经过暂停动画 */
div:hover{
animation-play-state: paused;
}