CSS入门（狂神学习笔记）
2024-04-25 05:23:14
CSS
1.CSS是什么
Cascading Style Sheet 层叠级联样式表
1.1发展史
- CSS1.0
- CSS2.0
- DIV(块) + CSS，HTML与CSS结构相分离的思想
- CSS2.1
- 浮动，定位
- CSS3.0
- 圆角边框，阴影，动画
1.2快速入门
html和css不分离
<style>h1{color:red;}
</style>
<h1>标题</h1><!-- 也可以采用行内样式 -->
<h1 style="color:red">标题</h1>
html和css分离
<link rel="stylesheet" href="css/style.css">
/* style.css中 */
h1{color: red;
}
优先级
- 就近原则
2.CSS选择器（重点难点）
- 作用：选择页面上的某一个或某一类元素
2.1 基本选择器
标签选择器
<style>h1{color:red;} </style> <h1>标题</h1>类选择器
<style>.myClass{color:red;} </style> <h1 class="myClass">标题</h1>Id选择器
<style>#myId{color:red;} </style> <h1 id="myId">标题</h1> Id选择器 > 类选择器 > 标签选择器
2.2层次选择器
<body><p>p0</p><p class="active">p1</p><p>p2</p><p>p3</p><ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li></ul>
</body>
后代选择器：某个元素的后代 ，爷爷爸爸儿子
选择了所有的p标签
<style>body p{background:red;} </style>子选择器：一代，儿子
选择了p0、p1、p2和p3
<style>body > p{background:red;} </style>相邻兄弟选择器：只能选择在它下面的一个同辈
<style>.active + p{background:red;} </style>通用选择器：选择它下面的所有同辈
<style>.active ~ p{background:red;} </style>
2.3结构伪类选择器
<head><style>/*ul的第一个子元素*/ul li:first-child{background:red;}/*ul的最后一个子元素*/ul li:last-child{background:red;}/*悬浮*/a:hover{color:orange;}/*点击*/a:active{color:orange;}</style>
</head>
<body><a>链接</a><p>p1</p><p>p2</p><p>p3</p><ul><li>li1</li><li>li2</li><li>li3</li></ul>
</body>
2.4属性选择器
<head><style>.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: #2700ff;text-align: center;color: gainsboro;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/* 存在id属性的元素 */a[id]{background: yellow;}/* 属性名=属性值（正则） */a[id=first]{background: yellow;}/* class中包含links的，包含*= */a[class*="links"]{background: yellow;}/* 选中href中以http开头的 开头^= */a[href^=http]{background: yellow;}/* 选中href中以pdf结尾的 结尾$= */a[href$=pdf]{background: yellow;}</style>
</head>
<body>
<p class="demo"><a href="" class="links item first" id="first">1</a><a href="images/123.html" class="links item active" target="_blank" title="test">2</a><a href="images/123.png" class="links item">3</a><a href="images/123.jpg" class="links item">4</a><a href="http://www.baidu.com" class="links item">5</a><a href="/a.pdf" class="links item">6</a>
</p>
</body>
</html>
3.美化网页
3.1字体样式
<head><!--font-family: 字体font-size: 字体大小font-weight: 字体粗细color: 字体颜色--><style>body{/*一种英文，一种中文*/font-family: "Arial Black",楷体;color:#a13d30;}h1{/*px是像素，em是一个字体的大小*/font-size:50px;}.p1{font-weight:bold;}</style>
</head>
<body><h1>故事介绍</h1><p class="p1">107年前（743年），世界上突然出现了人类的天敌“巨人”。面临着生存危机而残存下来的人类逃到了一个地方，盖起了三重巨大的城墙。人们在这隔绝的环境里享受了一百多年的和平，直到艾伦·耶格尔十岁那年，60米高的“超大型巨人”突然出现，以压倒性的力量破坏城门，其后瞬间消失，凶残的巨人们成群的冲进墙内捕食人类。</p><p>艾伦亲眼看着人们以及自己的母亲被巨人吞食，怀着对巨人无法形容的憎恨和痛恨，誓言杀死所有巨人。城墙崩坏的两年后，艾伦加入104期训练兵团学习和巨人战斗的技术。在训练兵团的三年，艾伦在同期训练兵里有着其他人无法比拟的强悍精神力。即使亲眼见过地狱也依然勇敢地向巨人挑战的艾伦，如愿以偿加入了向往已久的调查兵团。</p><p>在他正做着到墙壁的外面去这个梦的时候，毁坏墙壁的超大巨人出现了。</p>
</body>
3.2文本样式
颜色
文本对齐方式
<head><style>h1{text-align:center;}</style> </head>首行缩进
<head><style>p{text-indent:2em;}</style> </head>行高
<head><style>/* 行高和块的高度一致，就可以上下居中 */p{height:300px;line-height:300px;}</style> </head>装饰
<head><style>/* 下划线 */.l1{text-decoration: underline;}/* 中划线 */.l2{text-decoration: line-through;}/* 上划线 */.l2{text-decoration: overline;}</style> </head>图片和文字水平对齐
<head><style>img,span{vertical-align: middle;}</style> </head> <body><img src="data:images/a.jpg"><span>这是一张图片~~~</span> </body>
3.3阴影
/* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径 */
#price{text-shadow: #3cc7f5 10px -10px 2px;
}
3.4列表
<body><div id="nav"><h2 class="title">全部商品分类</h2><ul><li><a href="#">图书</a> <a href="#">音像</a> </li><li><a href="#">家用电器</a> <a href="#">手机</a> </li><li><a href="#">家具</a> <a href="#">家装</a> </li><li><a href="#">食品</a> <a href="#">保健</a> </li><li><a href="#">彩票</a> <a href="#">旅行</a> </li></ul></div>
</body>
#nav{width:300px;background:#a0a0a0
}
.title{font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 30px;background: red;
}
ul li{height: 30px;/*none: 把表单项前的圆点去掉circle: 空心圆decimal: 数字*/list-style: none;text-indent: 1em;
}
a{/*超链接的下划线*/text-decoration: none;font-size:14px;color:#000;
}
a:hover{color:orange;text-decoration: underline;
}
3.5背景图像应用及渐变
<head><style>div{width:1000px;height:700px;border:1px solid red;/*默认全部平铺*/background-image: url("images/cat.jpg");}.div1{/*水平平铺*/background-repeat: repeat-x;}.div2{/*垂直平铺*/background-repeat: repeat-y;}.div3{/*不平铺*/background-repeat: no-repeat;}</style>
</head>
<body><div class="div1"></div><div class="div2"></div><div class="div3"></div>
</body>
4.盒子模型
4.1什么是盒子
4.2边框
粗细
样式
颜色
<div id="box"><h2>登录</h2><form action="#"><div><span>用户名：</span><input type="text"></div><div><span>密码：</span><input type="password"></div><div><span>邮箱：</span><input type="text"></div></form> </div><style>/*body有一个8px的外边距*/body{margin:0px;}#box{width:300px;/*粗细、样式、颜色*/border: 1px solid red;}form{background:#3cbda6}/*定位到用户名*/div:nth-of-type(1)>input{border: 3px solid black} </style>
4.3外边距
外边距分为上、下、左、右，分别为margin-top，margin-bottom，margin-left，margin-right
如果简单设置，顺序为，上、右、下、左，即顺时针
margin : 0 0 0 0;
4.4内边距
内边距分为上、下、左、右，分别为padding-top，padding-bottom，padding-left，padding-right
如果简单设置，顺序为，上、右、下、左，即顺时针
padding : 0,0,0,0;盒子的计算方式：margin + border + padding + 内容宽度
4.5圆角边框
<style>div{width:100px;height:100px;border:10px solid red;/* 左上和右下是第一个，左下和右上是第二个 *//* 如果是四个也是顺时针 */border-radius:50px 20px;}
</style>
4.6阴影
<style>div{width:100px;height:100px;border:10px solid red;/* 向x轴偏移，向y轴偏移，模糊半径，颜色 */box-shadow: 10px 10px 1px red;}
</style>
5.浮动
5.1标准文档流
标准文档流：文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
行内元素和块状元素详解
https://www.jianshu.com/p/4921ba9e101d
5.2display转换行与块
行内元素和块状元素互转
<style>div{width:100px;height:100px;border:1px solid red;/*转行内元素*/display: inline;}span{width:100px;height:100px;border:1px solid red;/*转块状元素*/display: block;}/*此外，inline-block表示是块元素，但可以在一行显示*//* display:none 不显示 */ </style>
5.3float浮动
<style>div{width:100px;height:100px;border:1px solid red;/*浮动，向左侧移动*/float:left}
</style>
因为浮动之后，会脱离标准文档流，当页面改变大小，排版会乱掉，因此解决父级边框塌陷的问题
<!--补充知识-->
<style>/*clear:right; 右侧不允许有浮动元素，如果有它就排到下面clear:left; 左侧不允许有浮动元素，如果有它就排到下面clear:both; 两侧不允许有浮动元素，如果有它就排到下面*/div{width:100px;height:100px;border:1px solid red;display: inline-block;float:left;clear:both;}
</style>
如何解决父级边框塌陷的问题
增加父级元素的高度（太low）
在最下面加一个空的div，并进行设置
.lastdiv{claer:both;margin:0;padding:0; }overflow解决溢出问题
<head><style>#content{width:200px;height:100px;/*加上了滚动条解决溢出问题*//* overflow:hidden就是隐藏掉 */overflow:scroll;}</style> </head><body><div id="content"><p>艾伦亲眼看着人们以及自己的母亲被巨人吞食，怀着对巨人无法形容的憎恨和痛恨，誓言杀死所有巨人。城墙崩坏的两年后，艾伦加入104期训练兵团学习和巨人战斗的技术。在训练兵团的三年，艾伦在同期训练兵里有着其他人无法比拟的强悍精神力。即使亲眼见过地狱也依然勇敢地向巨人挑战的艾伦，如愿以偿加入了向往已久的调查兵团。</p> </div> </body> 因此，在父级边框中设置overflow属性可解决坍塌问题
#father{border:1px #000 solid;/*因为它没有设置宽高，因此是被内容所撑起来的*/overflow: hidden; }父类添加一个伪类：after
最流行的/*本质与第二种方法无异，但不会再html中添加过多的代码*/ #father{border:1px #000 solid; } #father:after{content: '';display: block;clear: both; }
6.定位
6.1相对定位
相对于自己原来的位置偏移，它仍在标准文档流中，原来的位置会被保留
<head><style>body{padding:20px;}div{margin:10px;padding:5px;font-size:12px;line-height:25px;}#father{border:1px solid #666;padding:0;/*相对定位：上下左右*/position: relative;/*上移20*/top:-20px;/*向右移动20*/left:20px;}#first{border:1px dashed #666;}#second{border:1px dashed #666;}#third{border:1px dashed #666;}</style>
</head>
<body><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</body>
6.2绝对定位
1.没有父级元素或父级元素没有定位的的情况下，相对于浏览器的边框进行定位
2.有父级元素，且父级元素有定位的的情况下，相对于父级元素进行偏移
3.原来的位置会被删除
<head><style>body{padding:20px;}div{margin:10px;padding:5px;font-size:12px;line-height:25px;}#father{border:1px solid #666;padding:0;/*绝对定位：上下左右*/position: absolute;/*距离左边框100px*/left:100px;}#first{border:1px dashed #666;}#second{border:1px dashed #666;}#third{border:1px dashed #666;}</style>
</head>
<body><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</body>
6.3固定定位
永远在浏览器窗口的固定位置
<head><style>body{height:1000px;padding:20px;}#first{width:100px;height:100px;/*固定定位*/position:fixed;right:0;bottom:0;}</style>
</head>
<body><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</body>
6.4z-index
图层
<div id="content"><ul><li><img src="data:images/cat.jpg"/></li><li class=tipText>学习</li><li class=tipBg></li><li>时间</li><li>地点</li></ul>
</div>
#content{width:380px;padding:0px;margin:0px;overflow:hidden;font-size:12px;line-height:25px;border:1px #000 solid;
}
ul,li{padding:0px;margin:0px;list-style:none;
}
/*父级元素相对定位*/
#content ul{position:relative;
}
.tipText,.tipBg{position:absolute;width:380px;height:25px;top:216px;
}
.tipText{color:white;/*层级，数值越高，层级越高*/z-index:999;
}
.tipBg{background:#000;/*可以通过设置opacity来调整透明度*/opacity:0.5;
}
CSS入门（狂神学习笔记）相关推荐
- JavaWeb（引用--＞狂神学习笔记）2021-08
狂神学习笔记 1.基本概念(①) 1.1 前言 web开发: web,网页的意思,www.baidu.com· 静态web html,css 提供给所有人看的数据始终不会发生变化! 动态web 淘宝, ...
- React学习:入门实例-学习笔记
文章目录 React学习:入门实例-学习笔记 React的核心 需要引入三个库 什么是JSX react渲染三步骤 React学习:入门实例-学习笔记 React的核心 1.组件化:把整一个网页的拆分 ...
- PHPWeb开发入门体验学习笔记
PHPWeb开发入门体验学习笔记 4 一.PHP web应用开发须知 1.入门要点 程序员三个阶段:码农(速成技能)->工程师(长期知识)->专家(研究论文) 编程三要素:声明变量(系统. ...
- 《基于张量网络的机器学习入门》学习笔记7
<基于张量网络的机器学习入门>学习笔记7 量子算法 什么是量子算法 三个经典量子算法 Grover算法 背景 基本原理 例题 量子算法 什么是量子算法 例如我们求解一个问题,一个111千克 ...
- 《基于张量网络的机器学习入门》学习笔记6
<基于张量网络的机器学习入门>学习笔记6 密度算符(密度矩阵) 具体到坐标表象 在纯态上 在混合态上 纯态下的密度算符 混合态下的密度算符 密度算符的性质 量子力学性质的密度算符描述 第一 ...
- 《基于张量网络的机器学习入门》学习笔记5
<基于张量网络的机器学习入门>学习笔记5 量子概率体系 事件 互斥事件 概率与测量 不相容属性对 相容属性对 量子概率与经典概率的区别 量子测量 量子概率体系 我们将经典的实数概率扩展到复 ...
- 《基于张量网络的机器学习入门》学习笔记4
<基于张量网络的机器学习入门>学习笔记4 量子概率 将概率复数化 分布与向量的表示 事件与Hilbert空间 不兼容属性及其复数概率表示 为什么一定要复数概率 量子概率 将概率复数化 在经 ...
- 《基于张量网络的学习入门》学习笔记3
<基于张量网络的机器学习入门>学习笔记3 量子寄存器.量子状态叠加与并行处理的关系 不确定性原理 量子寄存器.量子状态叠加与并行处理的关系 叠加态的数学定义: ∣x⟩=α1∣x1⟩+α2∣ ...
- 《基于张量网络的机器学习入门》学习笔记2
<基于张量网络的学习入门>学习笔记2 量子逻辑门 单量子逻辑门 恒等操作 泡利-X门(Pauli-X gate) 泡利-Y门(Pauli-Y gate) 泡利-Z门(Pauli-Z gat ...
- 《基于张量网络的机器学习入门》学习笔记1
<基于张量网络的学习入门>学习笔记1 量子力学的三大奥义 什么是量子 量子力学的三大奥义--叠加.测量和纠缠 第一大奥义:量子的叠加态 第二大奥义:量子的测量 第三大奥义:量子的纠缠态 量 ...
最新文章
- Windows下编译tensorflow-gpu教程
- 计算机技术应用在教学中的优势,[浅谈多媒体在教学中的应用及优势] 多媒体教学的优势...
- flask小demo-数据查询
- java activiti jbpm_activiti和jbpm工作流引擎哪个比较好？
- 脚本文档_创建完美的架构文档脚本
- SimpleDateFormat 线程不安全原因及解决办法
- javaweb实训第四天下午——JDBC深入理解
- Second Highest Salary --leetCode
- 对SSH三大框架的理解
- linux 如何查看进程端口号,在linux中查看进程占用的端口号
- ztree添加自定义图标
- ie visio 打开_Visio viewer 不能从IE打开vsd文件
- Windows 7 驱动开发
- 【Matlab取整函数】
- 基于ThinkPHP5+MySQL的超市进销存管理系统
- 跟我学折纸计算机教案,折纸活动教案
- 一个新APP在ASO方面的优化思路
- 2021年7月最新iOS面试题总结（答案篇）
- java破解WIFI
- Vue 项目处理每次发版后要清理浏览器缓存