CSS学习
文章平均质量分 55
记录css学习之路
工一木子
Talk is cheap,show me the code!
展开
-
CSS1:CSS的简单介绍
CSS1:CSS的简单介绍什么是CSS如何学习1.CSS是什么2.CSS怎么用(快速入门)3.CSS选择器(重点+难点)4.美化网页(文字,阴影,超链接,列表,渐变…)5.盒子模型6.浮动7.定位8.网页动画(特效效果)彩蛋1.一般大型网站官网F12调试者模式下,在console都可以看到彩蛋1)百度2)B站3)抖音,字节跳动(有点失望,竟然前端报错)4)京东...原创 2021-08-21 11:25:44 · 145 阅读 · 0 评论 -
CSS2:什么是CSS和发展史
2、什么是CSS和发展史1.1 什么是CSSCascading Style Sheet,层叠级联样式表CSS:表现(美化网页)字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动…初识css(以百度首页分析为例):1.2 发展史CSS 1.0CSS 2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,利于SEOCSS 2.1 浮动,定位CSS 3.0 圆角,阴影,动画… 浏览器兼容性彩蛋1.修改百度一下背景色(临时生效,刷新下就还原了)2.什么是原创 2021-08-21 11:40:27 · 158 阅读 · 0 评论 -
CSS3:CSS的快速入门及优势
3、CSS的快速入门及优势1.3 快速入门基本入门练习基本代码格式:CSS的优势1.内容和表现分离2.网页结构表现统一,可以实现复用3.样式十分的丰富4.建议使用独立于html的css文件5.利于SEO,容易被搜索引擎收录代码show1)html中使用cssindex.html<!DOCTYPE html><html lang="en"> <head> <meta cha原创 2021-08-21 16:19:45 · 836 阅读 · 0 评论 -
CSS4:四种css导入方式
4、四种css导入方式1.4、 CSS的3种导入方式行内样式内部样式外部样式(拓展:外部样式有两种写法)链接式(html标签)<link rel="stylesheet" href="css/style.css">导入式(css2.1特性,css 3.0基本淘汰了)<style> /*外部样式之导入式*/ @import url("css/style.css");</style>代码showin原创 2021-08-21 16:42:22 · 210 阅读 · 0 评论 -
CSS5:三种基本选择器-重要
5、三种基本选择器-重要2、选择器作用:选择页面上的某一个或者某一类元素2.1、 基本选择器1.标签选择器: 选择一类标签 标签{}2.类选择器 class:选择所有class属性一致的标签,跨标签 .类名{}3.Id选择器:全局唯一 #id名{}优先级:id选择器 > class选择器 > 标签选择器代码show1.标签选择器.html<!DOCTYPE html><html lang="en"> <head>原创 2021-08-21 17:22:41 · 339 阅读 · 0 评论 -
CSS7:结构伪类选择器
7、结构伪类选择器2.3、结构伪类选择器代码showindex.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 避免使用,class,id选择器--> <style>原创 2021-08-22 12:08:07 · 122 阅读 · 0 评论 -
CSS6:层次选择器
6、层次选择器2.2、层次选择器1、后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你body p { background-color: red;}2、子选择器:一代,儿子body>p { background-color: #740c80;}3、相邻兄弟选择器:同辈.active + p { background-color: aqua;}4、通用选择器.active~p { background-color: blue原创 2021-08-22 11:46:22 · 387 阅读 · 0 评论 -
CSS8:属性选择器-重要
8、属性选择器-重要2.4、属性选择器(常用)id+class结合~代码showindex.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .demo a {原创 2021-08-22 12:40:37 · 173 阅读 · 0 评论 -
CSS9:CSS的作用及字体样式
9、CSS的作用及字体样式3、美化网页元素3.1、为什么要美化网页1.有效的传递页面信息2.美化网页,页面漂亮,才能吸引用户3.凸显页面的主题4.提升用户的体验span标签:重点要突出的字,使用span套起来欢迎学习<span id="title">CSS</span>3.2、字体样式body { font-family: "楷体","Arial Black"; color: red;}h1 { font-size: 60px;原创 2021-08-22 17:16:42 · 328 阅读 · 0 评论 -
CSS10:文本样式
10、文本样式3.3、文本样式1、颜色 color rgb rgba2、文本对齐的方式 text-align=center3.首行缩进 text-indent:2em;4.行高 line-height: 单行文字上下居中 line-height=height5、装饰 text-decoration:6、文本图片水平对齐:vertical-align:middle;代码showindex.html<!DOCTYPE html><html lang="en">原创 2021-08-22 17:41:42 · 472 阅读 · 0 评论 -
CSS11:文本阴影和超链接伪类
11、文本阴影和超链接伪类3.4、阴影/*text-shadow:阴影颜色,水平偏移,垂直偏移,阴影半径*/#price { text-shadow: #740c80 10px 10px 2px;}3.5、超链接伪类正常情况下,a,a:hover/*鼠标悬浮的状态,只需要记住:hover*/a :hover { color: #ff2236; font-size: 50px;}/*鼠标按住未释放的状态*/a:active { color: gr原创 2021-08-22 18:09:05 · 128 阅读 · 0 评论 -
CSS12:列表样式练习
12、列表样式练习3.6 列表#nav { width:300px; background: #a0a0a0;}.title { font-size: 18px; font-weight: bold; text-indent: 1em; line-height:35px; background: red;}/*ul li*//*list-style: none 去掉圆点 circle 空心圆 decimal 数字原创 2021-08-26 01:04:23 · 177 阅读 · 0 评论 -
13、背景图像应用及渐变
3.7、背景背景颜色背景图片 div { width: 1000px; height: 700px; border: 1px solid red; background-image: url("images/QQ.jpg"); /*默认是全部平铺的 repeat*/ } .div1 {原创 2021-09-19 21:50:07 · 105 阅读 · 0 评论 -
14、盒子模型及边框使用
4、盒子模型4.1、什么是盒子模型margin:外边距padding:内边距border:边框4.2、边框1.边框的粗细2.边框的样式3.边框的颜色<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>原创 2021-09-20 00:00:38 · 83 阅读 · 0 评论 -
15、内外边距及div居中
4.3、 内外边距<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title><!-- 外边距的妙用:居中元素 margin: 0 auto;--> <style> #box {原创 2021-09-20 11:53:17 · 156 阅读 · 0 评论 -
16、圆角边框及阴影和经验分享
4.4、圆角边框4个角<style> div { width: 50px; height: 50px; margin: 30px; background: red; border-radius: 50px 0 0 0; } img {原创 2021-09-20 12:45:47 · 533 阅读 · 1 评论 -
17、display和浮动
5、浮动5.1 标准文档流块级元素:独占一行h1-h6 p div 列表...行内元素:不独占一行span a img strong...行内元素可以被包含在块级元素中,反之则不可以5.2、display<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>原创 2021-09-20 16:14:12 · 119 阅读 · 0 评论 -
19、相对定位的使用及练习
6、定位6.1、相对定位1.默认情况/inde.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { margin:10px;原创 2021-09-20 17:08:09 · 157 阅读 · 0 评论 -
18、overflow及父级边框塌陷问题
5.4、父级边框塌陷问题clear/**clear: left; 左侧不允许有浮动元素clear: right; 右侧不允许有浮动元素clear: both; 两侧不允许有浮动元素clear: none; */解决方案1.增加父级元素的高度#father { border: 1px #000 solid; height: 800px;}2.增加一个空的div标签,清除浮动 <div class="clear"></div>.clear原创 2021-09-20 16:43:52 · 179 阅读 · 0 评论 -
21、绝对定位和固定定位
6.2、绝对定位定位:基于xxx定位,上下左右1.没有父级元素定位的前提下,相对于浏览器定位2.假设父级元素存在定位,我们通常会相对于父级元素进行偏移3.在父级元素范围内移动相对于父级或者浏览器的位置,进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不会被保留<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <tit原创 2021-09-20 17:41:58 · 172 阅读 · 0 评论 -
20、方块定位练习讲解
练习题:核心代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width:300px; height:300px;原创 2021-09-20 17:20:14 · 182 阅读 · 0 评论 -
22、z-index及透明度
6.4、z-index图层:z-index:默认是0,最高无限 一般写0-999核心代码:index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"&原创 2021-09-20 18:06:48 · 130 阅读 · 0 评论 -
23、动画及视野拓展
7、动画彩蛋1.less与cssless2.菜鸟教程与W3School教程菜鸟教程w3school3.搜索1)css 动画奔跑的马,动画奔跑的马2)JavaScript动画4.canvas动画canvas5.卡巴斯基监控卡巴斯基监控6.360浏览器之兼容模式7.搜索1)html5 浪漫告白 模板之家告白...原创 2021-09-20 18:35:19 · 102 阅读 · 0 评论 -
24、CSS小结
8、总结原图链接原创 2021-09-21 01:48:43 · 68 阅读 · 0 评论