HTML&CSS学习笔记
-
选择器
*选择所有的标签 标签选择器：直接通过标签名选择 类名选择器:直接通过类名选择标签 类名前面一定需要加点 .+class名字 后代选择器：被包裹的都称为后代 div p 使用空格隔开 一般不能超过四级 清除样式 *{ margin: 0px; padding:0px; list-style: none; } div绝对水平居中 margin-left:auto; margin-right: auto; 浮动可以让标签变成水平排列 float:left水平靠左 float:right水平靠右 一个标签浮动，同级(同一个父级)标签必须浮动 在标准流中(不浮动)，父级可以检测到子级的高度 如果父级不够宽的时候，子级会自动落下来 子级浮动，父级检测不到高度。浮动塌陷 解决： 1、给父级增加高度 2、给父级加overflow:hidden; 取类名相当于人名，可以有多个 类名需要使用英文开始，不能和标签名一样 img{ /* 图片的值，只需要设置一个方向即可，另外一个值，计算机自动计算 */ width: 20px;标签分类：
第一种：单双标签 双标签:<标签></标签> 单标签:<标签>或<标签 /> 第二种：行内标签和快级标签 行内标签：和其他标签并排排列 span b u i a 行内标签设置宽高无效，上下外边距无效，左右有效 上下内边距有效，不占位。左右有效且占位 块级标签：独占一行ul li h1-h6 p div 行内块：在一行排列，设置宽高有效 img input td tr table 标准流：行内标签水平，块级标签垂直。 做网站的时候，首先需要考虑的是标准流。再次是浮动。 浮动以后，脱离标准流，变成行内块外边距塌陷
标准流中： 1、左右外边距可以叠加,上下外边距的值取决于最大的 2、父标签内部有一个子标签。如果给子标签增加margin-top父级会跟着下来。 解决方法： 1、不要使用margin-top 给父级增加padding-top 2、给父级增加overflow:hidden浮动以后的值上下左右都可以叠加
多个类名中间使用空格 <a href="" class="left my" >css书写方式
第一种：内联 第二种：外链 不需要加style标签对(做项目的时候) 第三种：行内样式(不推荐使用)<!-- logo一般要放在h1里面 -->
<h1>
div{ /* 文字颜色 */ color:red; /* 文字大小 */ font-size: 20px; /* 行高 */ line-height: 30px; /* 字体 */ font-family: "楷体"; /* 文字居中 */ text-align: center; /* 盒子模型 margin padding border width height */ /* 浮动 ，让标签水平排列 */ }固定定位的标签 position: fixed 不会随着窗口的滚动而滚动
参照物是当前的窗口 left top bottom right 左右只能存在一个，上下只能存在一个 固定定位，脱离标准流，变成行内块相对定位 position: relative相对自身位移，一般用来做微调
top left right bottom参照物是自身
占位:占的是原来的位置
绝对定位 position: absolute一般实现的效果是一个标签放置在另一个标签的上面
子级绝对定位，父级相对定位。可以把子级固定在父级的任何位置 left top right bottom
绝对定位：不占位
绝对定位以后，标签变成行内块
/* 文字垂直居中，设置行高等于当前标签的高度 */ line-height: 40px; /* 增加圆角，值越大圆角越明显 值是50%的时候就是圆形*/ border-radius: 50%; /* 旋转 deg度数单位 正值顺时针，负值逆时针 */ transform: rotate(30deg);display
inline把标签转化为行内标签 inline-block把标签转化为行内块 block 把标签转化为块级标签 none隐藏标签 转化完了以后，只是为了工作方便。原来标签的语义没有变化css层叠性和继承性
选择器权重 *<标签名1g<类名1kg
选择器权重可以叠加
层叠性：
css同样的样式，权重一样的话后写的生效 权重不一样，取决于权重高的继承性：
与文字有关的样式，都可以继承 如果一个标签没有某一个与文字有关的样式(一定要考虑到内置的一些样式)，会向上寻找，直到找到该样式，css3样式
/* linear-gradient(to 方向,色值,色值) */ /* background: linear-gradient(to top,red,#ffff00,blue); */ background: lime; /* 投影 第一个值水平方向 正值右边 负值左边 第二个值垂直方向 第三个值虚实程度 第四个值影子大小 第五个值影子颜色 可以书写成透明色 *html5常用标签 用法和div一模一样，只是语义更重了
<header>头部</header> <nav>导航</nav> <main>主要内容</main> <section>大区域内容</section> <aside>侧边栏</aside> <footer>底部</footer> <article>文章</article>转化模块
转换模块，对于行内标签没有效果 占得是原来的位置 /同样的样式后写的生效 旋转 transform: rotate(30deg); 缩放 0-1缩小 大于1的时候放大 transform: scale(0.3); 位移，第一个值代表水平方向，第二个值垂直方向 transform: translate(100px,100px); 可以书写多个值，使用空格隔开 transform: scale(0.3) rotate(12deg) translate(100px ,100px); 旋转以后，整个坐标系也跟着改变 transform: translate(100px,100px) rotate(90deg); transform: rotate(90deg) translate(100px,100px) ;过度模块
/* 过渡模块，中间变化过程可见 all代表所有的可以专门设置一个样式 */ /* 第一个值代表样式 第二个值动画持续时间 第三个值延迟时间(可选) */ /* transition: all 2s 2s; */ transition: background 1s 0s,transform 1s 1s,border-radius 1s 2s,width 1s 2s; } /* 选择器:hover鼠标移入以后才生效 */动画模块
/* 使用动画 动画名字 动画持续时间 次数(可以书写具体的次数) infinite无穷 linear平缓过渡*/
animation:circle 2s infinite linear; /* transform-origin: x y; 旋转中心点 第一个值代表水平 left center right，第二个值代表垂直top center bottom*/ } /* 定义动画 @keyframes 动画名字{ 书写各个状态的样式条 状态就是百分比来划分 } */ /* :nth-of-type(n)可以选择到具体的某一个 */ /* 定位以后的标签，如果叠加的话，后写的在上面 定义以后的标签，可以通过z-index调整图层顺序 默认值0值越大越靠上。可以是负值但是不建议 */ /* 加此样式，才可以进入三维坐标 */ transform-style: preserve-3d;
