页面笔记

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;
}
}

原文地址:https://www.cnblogs.com/ysboke/p/9441987.html