学习笔记
一.css样式表
①行内样式
<div style="color:#000"></div>
②内嵌样式表
<style></style>
③外联式
<link rel='stylesheet' type='text/css' href='css文件路劲'></link>
二.css选择器
1.基础选择器
①标签选择器
h1{
color:#000000
}
html{
font-size:20px
}
②类选择器
.head{
color:#000
}
③id选择器
#{
color:#000
}
④通配符
*{
color:#000
}
2.复合选择器
①后代选择器
.head h3 {
color:#000
}
②子元素选择器
.head>h3{
color:#000
}
③交际选择器
h3.head{ #满足h3和.head的元素
color:#000
}
④并集选择器
h3,.ha.ead{
color:#000
}
⑤链接为例选择器
a:hover{
color:#000
}
a:link{
color:#999
}
3.属性选择器
div[id]{ # 选择div里面 属性有id的属性
cursor:default
}
div[id="num"]{ # 选择div里面 属性有id="num"属性
color:#000
}
div[id^="n"]{ # 选择div里面 属性有id="n" 开头^ 的属性
cursor:default
}
div[id$="m"]{ # 选择div里面 属性有id="m" 结尾$ 的属性
cursor:default
}
div[id*="nu"]{ 属性有id="n" 属性有id*="nu" 包含* 的属性
cursor:default
}
4.伪类选择器
div:first-child{ #查找第一子元素
color:#000
}
div:last-child{ #查找最后一个元素
color:#000
}
div:net-child(n){ #查找指定 n 个元素
color:#000
}
div:first-of-type{ #查找第一子元素
color:#000
}
div:first-of-type{ #查找最后一个元素
color:#000
}
div:first-of-type(n){ #查找指定 n 个元素
color:#000
}
5.伪元素选择器
① e:before #在元素前面插入一个元素
div::before {
content: "我";
display: inline-block;
width: 100px;
height: 100px;
background-color: pink;
}
② e:after #在元素后面插入一个元素
div::after {
content: "小猪佩奇";
display: inline-block;
width: 100px;
height: 100px;
background-color: pink;
}
三，样式
1.font字体样式 可以连写
①font-size 字体大小
h3{
font-size:20px
}
②font-family 字体类别
③font-weight 字体粗细
④font-style 字体风格
2.text文字外观样式
①color 文本颜色
②text-align 文本水平居中
③line-height 行间距 行高等于高 可以文本垂直居中
④text-indent 首行缩进
h3{
text-indent:2em
}
⑤text-decoration 文本的装饰线
3.背景background 可以连写
1.背景颜色 background-color
div{
background-color:#000
}
2.背景图片 background-image
div{
background-image:url('地址')
}
3.背景平铺 background-repeat
div{
background-repeat:repeat #平铺
background-repeat:no-repeat #不平铺
background-repeat:repeat-x #背景图像在横向上平铺
background-repeat:repeat-y #背景图像在纵向平铺
}
4.背景位置 background-position
div{
background-position:50% 50% #居中
background-position:center #居中
background-position:top right #上右
}
5.背景附着 background-attachment
div{
background-attachment:fixed #背景图像固定
background-attachment:scroll #背景图像随着内容滚动
}
6.背景透明 background: rgba(0, 0, 0, 0.3) opacity
div{
background:rgba(0,0,0,0.3) #rgba背景透明
opacity:0.2 #元素透明 这个元素里面所有内容都透明
}
4.圆角边框 border-radius
div{
border-radius:10px
}
5.盒子阴影 box-shadow
div{
box-shadow:0 15px 30px rgba(0,0,0, .4)
}
6.显示隐藏
①display #隐藏后不会保存元素
div{
display:none #影藏对象
display:block #显示，转换成块级元素
}
②visibility #隐藏元素后 会保留元素当前的位置
div{
visibility:visible #显示
visibility:hidden #影藏
}
③overflow #清楚浮动，影藏超出父盒子的内容
div{
overflow:hidden
}
7.用户界面显示
①鼠标样式 cursor
div{
cursor:pointer #小手
cursor:text #文本
cursor:not-allowed #禁止
}
②轮廓线 outline:none
③防止拖拽文本域 resize:none
④图片与文字的对齐 vertical-align
div{
vertical-align:center #居中
vertical-align:top #居顶
}
⑤去掉图片底层的空白间隙
img{
vertical-align:top,
border:0
}
⑥文字溢出显示省略号
div{
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
}
四，显示模式 display
1.块级元素 block
块级元素独占一行，可以设置宽高，如果没有设置宽度默认 100% 盒子内部可以放置块级元素
2.行内元素 inline
行内元素一行可以显示多个，高宽直接设置是无效的，默认宽度是内容的宽度 行内元素只能放置，文本，其他行内元素
3.行内块 inline-block
行内块 默认和相邻行内块元素 会有空白间隙，一行可以显示多个，默认宽高是他本身的宽度，可以设置宽高
4.标签显示模式的转换
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
五，盒子模型
1.盒子边框 border
div{
border:1px solid #ccc
}
2.内边距 padding
div{
padding:10px
}
3.外边距 margin
div{
margin:10px
}
六，浮动 float 让多个盒子水平排在一行
1.css布局的三种机制
①普通流 从上到下顺序排序
②浮动 让盒子浮动起来 float
div{
float:left #左浮动
float:right #右浮动
}
③定位 将盒子定位起来 position
定位(天) > 浮动(地) > 定位(海平线)
2.清除浮动
①隔墙法(添加一个额外的标签) <div style="clear:both"></div>
②父级添加overflow属性方法
div{
overflow:hidden
}
③after伪元素清除浮动
/* 1、使用after伪元素清除浮动 */
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
/* IE6、7 专有 */
.clearfix {
*zoom: 1;
}
④双伪元素清除浮动
/* 使用双伪元素清除浮动 */
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
七，定位 position
1.定位模式
①静态定位 static 元素的默认定位方式
②相对定位 relative 相对定位，是占用元有的位置
③绝对定位 absolute 绝对定位，是相对父级的
④固定定位 fixed 固定定位，是相对浏览器的绝对定位
2.使用定位盒子居中
div{
position:absolute
top:50%
left:50%
width:100px
height:100px
margin-top:-50px
margin-left:-50px
}
div{
position:absolute
top:50%
left:50%
width:100px
height:100px
transform: translate(-50%,-50%);
}
3.定位层级 #如果两个定位在一起那个层级高显示那个
div{
position:absolute
top:50%
left:50%
width:100px
height:100px
z-index:100
}
八，2d转换
①移动 translate
div{
transform:translate(x轴,y轴)
transform:translate(50px,50px)
}
②旋转 rotate
div{
transform:rotate(旋转的角度)
transform:rotate(60deg)
}
③缩放 scale
div{
transform:scale(宽的倍数,高的倍数)
transform:scale(2,2)
}
九，动画animation
1.定义动画 1定义 2调用
@keyframes num { # 定义动画效果
0%{
width:100px
background-color:red
}
100%{
width:600px
background-color:#000
}
}
div{
width:60px
height:200px
background-color:#000
margin:20px
animation-name: num # 调用定义动画
}
2.语法
@keyframes 定义动画
@keyframes num{
0%{
width:100px
}
50%{
width:200px
}
100%{
width:500px
}
}
animation 调用动画简写
animation-name 调用动画
div{
animation-name:num
}
animation-duration 规定时间完成动画
animation-timing-function 规定速度曲线
animation-delay 规定动画什么时候开始
animation-iteration-count 规定动画循环次数
animation-direction 规定动画内向播放
animation-fill-mode 规定动画完成后的 位置
3.调用动画的复合写法
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation: name duration timing-function delay iteration-count direction fill-mode;
4. 动画结束事件animationend
var div = document.querySelector("div");
div.addEventListener("animationend", function () {
console.log("div的动画结束之后，触发");
})
发表评论