<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>html基础复习</title></head><body> <!-- 前端: 用户可见的所有界面均是前端(PC端/移动端) --> <!-- html: 页面架构搭建 | css: 页面布局样式 | js: 页面交互渲染 --> <!-- 编辑器: webstrom | sublime | atom | pycharm -->
<!-- 标签: <字母开头 + 合法字符(数字|-)> => (标签具有作用域,有头有尾) <abc> | <num1> | <nav-title> --> <!-- 指令: <!doctype html> 注释 --> <!-- 转移字符: ≷ -->
<!-- 基本标签: div | span | hn | p | ul>li | hr | br | form>input | table>tr>th(td) | a | img | b | i | meta | link | script | style -->
<!-- 分类: 单双 | dispaly --> <!-- inline: span | b | i | a --> <!-- inline-block: img | input --> <!-- block: div | hn | p | ul | hr | br --></body></html>
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>css复习</title></head><body> <!-- 1.css三种引入: 行间式 | 内联式 | 外联式 --> <!-- 选择器 作用域 样式块 -->
<!-- 2.长度单位: px | em | rem | cm | mm | vw | vh | in -->
<!-- 3.颜色: rgb(0, 255, 189) | rgba(0,0,0, 0~1) | red | #000000~#FFFFFF -->
<!-- 4.文本样式 --> <style> span { font: 900 normal 30px/100px ‘首选字体‘, ‘备用字体1‘, ‘备用字体2‘; text-align: center; color: red; text-decoration: underline; letter-spacing: 3px; word-spacing: 10px; text-indent: 2em; } </style>
<!-- 5.选择器 --> <style type="text/css"> /*选择器： css连接html标签的桥梁，建立连接后就可以控制标签样式*/ /*标签 类 id*/ /*组合选择器*/ /*伪类选择器*/
/*优先级：*/ /*基础选择器： !important > id > 类[属性] > 标签 > 通配*/ /*组合选择器: 权重(同类型个数比较)*/ .b > .s {} .b .s {} .b + .s {} .b.s {} .b[class] {}
#ss { font-size: 50px; } span.s2 { font-size: 40px; } [class] { font-size: 35px; } .s1 { font-size: 30px; } span { font-size: 20px!important; }
/* 标签名 | . | # */ /*后代"空格"(子代) | 兄弟"~"(相邻) | 群组"," | 交集"紧挨着"*/ /* [属性名="属性值"] */
</style>
<span class="s1 s2" id="ss" style="font-size: 60px;">12345</span>
<style type="text/css"> /* 伪类选择器 */ /* :link :hover(鼠标悬浮) :active(鼠标点击中) :visited */ /* :nth-child() 先位置后类型 :nth-of-type() 先类型后位置 */ /* :not() */ /* :before(盒子渲染前) :after(盒子渲染后) :focus(表单标签获取焦点) */ p:nth-child(3) { font-size: 100px } p:nth-of-type(2n) { font-size: 50px } </style> <div class="box"> <span>span</span> <p>pp1</p> <p>pp2</p> </div>
<!-- 6.精灵图 --> <style type="text/css"> .pg { width: 200px; height: 200px; border: 1px solid black; position: absolute; top: 10px; left: calc(50vw - 100px); } .pg { background: url(‘img/bg.png‘) no-repeat; /*将背景图片的具体位置移至显示区域*/ background-position: -300px -350px; } </style> <div class="pg"></div></body></html>
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>盒模型复习</title> <style type="text/css"> abc { display: inline-block; }
.box { background: orange;
/*文本类型的样式具有继承关系*/ font-size: 30px; font-weight: 900; /*inline-block不会继承*/ text-decoration: underline; text-indent: 2em; line-height: 60px; } </style></head><body> <!-- 文本属性通过拥有继承关系: 子标签没有设置文本属性时,值会从父级中获取(父级如果没有设置,会找到html) -->
<div class="box"> <span>inline</span> <div>block</div> <abc>inline-block</abc> </div>
<!-- 1.盒子的四个组成部分 --> <!-- content | padding | border | margin --> <!-- display: inline | inline-block | block -->
<!-- content: 提高给内容(文本,图片,子标签整个盒子)的显示区域 -->
<!-- padding: 介于border与content之间的距离, 可以撑开border与content之间的距离, 没有自身颜色(透出背景颜色),只有区域 --> <!-- 注: padding-top可以将自身与自身第一个子级分离 --> <style type="text/css"> .p { width: 20px; height: 20px; background: red; } .b { width: 100px; padding-bottom: 100px; border-bottom: 1px solid black; } .c { background: pink; /*border: 1px solid black;*/ border-style: solid; padding-left: 32px; padding-bottom: 32px; margin-left: 32px; /*text-indent: 2em;*/ } </style> <div class="b"> <div class="p"></div> </div> <div class="c">123</div>
<!-- border: 边框, 有宽度颜色样式, 如果给颜色设置透明也可以透出背景颜色 -->
<!-- margin: 控制盒子位置 => 盒模型布局 -->
<!-- 2.边界圆角 --> <style type="text/css"> .bj { width: 100px; height: 100px; background: pink; } .bj { /*border-radius: 20px;*/ /*border-radius: 40%;*/ /*border-radius: 10px 30px 50px;*/ border-radius: 10px / 50px; } </style> <div class="bj"></div>
<!-- 3.display -->
<!-- 4.margin布局 --> <!-- i) margin-top | margin-left 完成自身布局, 右下两个方向影响兄弟 --> <style type="text/css"> .hh { width: 30px; height: 30px; background: black; /*display: inline-block;*/ float: left; /*自身动,控制自身布局*/ /*margin-top: 30px;*/ /*margin-left: 30px;*/
/*右兄弟动,辅助兄弟布局*/ margin-right: 100px; /*下兄弟动,辅助兄弟布局*/ /*margin-bottom: 30px;*/ } .xx { width: 30px; height: 30px; background: red; /*display: inline-block;*/ float: left; } </style> <div class="hh"></div> <div class="xx"></div>
<!-- ii) 上下间距会重叠取大值, 左右间距会叠加 --> <!-- 坑1: 父子联动 坑2: 上兄弟下margin和下兄弟上margin重叠取大值 --> <style type="text/css"> .x, .z { width: 50px; height: 50px; background: blue; } .x { /*margin-bottom: 40px;*/ } .z { margin-top: 10px; background: yellow; } .y { width: 10px; height: 10px; background: red; /*margin-top: 10px;*/ } /*坑1解决方案*/ .y { /*方案1*/ /*float: left; margin-top: 10px;*/
/*方案2*/ /*position: relative;*/ position: absolute; /*top: auto;*/ /*top: 20px;*/ margin-top: 20px; } .z { /*position: relative;*/ } </style> <div class="x"></div> <div class="z"> <div class="y"></div> </div></body></html>
原文地址：https://www.cnblogs.com/du-jun/p/10171004.html
时间： 2024-10-13 16:22:40