DOCTYPE : DOC -document文档,TYPE类型, 文档类型,作用告诉浏览器这是个什么文件
html:根元素 head:头部标签
meta:设器标签, charset编码
title:标题标签, body:身体标签单标签:
双标签:开始标签结束标签, html
css引入方式
1.行内样式:写到标签里,style属性引出,属性跟到引号里面
2.内部样式: head标签里面加上style标签
3.外部样式:
标签分类
块级元素:默认占整行,宽度可设,但是独自占一行行
内块元素:默认宽度和内容一样,可设宽
行内元素:默认宽度和内容样,宽度不可设
-----------------------------------------------------------------所有css---------------------------------------------------------
*{ padding:0; margin:0; box-sizing:border-box; }
html,body { 100%; height:100%; background-color:#f9f9f9; }
img{ display:block; } li{ list-style:none; } .cen{ 1200px; }
------------------------------------------------------------------------------------------------------------------------------------
引入css样式<link rel="stylesheet" href="css/style.css" />
------------------------------------------------------------- 常规属性------------------------------------------------------------
文字颜色color 宽度 width 高度 height 字体厚度 font-weight
外边距 margin 内边距 padding 浮动 float 鼠标经过时 hover
字体大小font-size 变成块 display:block 去序列号list-style:none 行高 line-height
去边框border:none 去轮廓:outline:none 底部边框border-bottom 去文本修饰text-decoration: none;
边框 border 轮廓 outline 虚线 dashed 层级 z-index
按钮 button 实线 solid 缩进 text-indent:1em 锁盒子box-sizing:border-box;
居中 text-align 第一个 first-child 第好几个 nth-child(2 ) 最后一个 last-child
插入超链接 <a href> li 列表 ul 无序 ol有序
盒子(文字)阴影 box(text)-shaow 5px(向右) 5px(向下) 5px(模糊度) red 权重:!important
不换行white-space: nowrap 文本框<textarea placeholder="。。。"></textarea>
设置背景图 background-image: url 四个透明度:visiblity opacity transparent rgba
固定位置:position:fixed 超出部分隐藏:overflow: hidden;
------------------------------------------------------------------设置背景--------------------------------------------------
背景位置 background-position:center (20px) 背景重复 background-repeat 背景固定background-attyachment:fixed
背景阴影值: rabg(30,29,24,7) 不透明度:opacity:0
----------------------------------------------------------------文本装饰---------------------------------------------------
字符转换(处理文本的大小写)text-transform:none不变 uppercase全大写 lowercase全小写 capitalize首字母大写
下划线 text-decoration:underline 上划线 overline 贯穿线 line-through 缩进 text-indent: 5em;
字间隔《文本 text》《文字letter》word-spacing: 30px 鼠标变成手cursor: pointer; 边框圆角化:border-radius:10px;
允许对长度单位进行拆分,并换行到下一行word-wrap:break-word
复选框--------------------------------------------------------------定位 平移-------------------------------------------------
定位总结position 相对定位relative 绝对定位 absolute 固定定位 fixed
(相对自己定位) (相对父级定位) (相对浏览器视窗定位)
变形:transform 翻转 rotate 平移 translate 放大(缩小)比例scale
倾斜 skew(单位deg)
------------------------------------------------------------------过渡---------------------------------------------------
过渡时长transition-duration:0.5s; 规定在过渡效果开始之前需要等待的时间 transition-delay:2s;
------------------------------------------------------------动画 --------------------------------------------------------
所有动画属性的简写属性animation 规定动画 @keyframes+名字 所费时间animation-duration:2s;
规定动画何时开始animation-delay: time; 动画播放次数animation-iteration-count: n | infinite(无限次);
是否逆向播放animation-direction: alternate(逆向); 匀速 linear
-----------------------------------------------------------兼容----------------------------------------------------
—moz— 火狐 —webkit— 谷歌 —o— Opera —ms— IE浏览器
------------------------------------------------------------适配------------------------------------------------------------------
@media (min-1366px) and (max-1920px) {
.banner{
height: 600px;
}
}