CSS知识概述

参考资料哔哩哔哩3小时前端入门教程HTMLCSSJS。CSS简介CSS全称为Cascading Style Sheets中文名“层叠样式表”。是用于定义网页样式和布局样式的表语言。CSS由选择器、属性和属性值组成。CSS三种导入方式内联样式Inline Styles写在标签后style属性中。内部样式表Internal Stylesheet在html的head标签内部定义style。外部样式表External Stylesheet外部.css文件。内联样式内部样式表外部样式表会覆盖掉优先级低的样式。CSS选择器选择器允许你针对特定元素或一组元素定义样式。元素选择器直接引用元素本身。类选择器用‘.’表示。ID选择器用‘#’表示。通用选择器用‘*’表示。子元素选择器用.父元素/类/ID .子元素/类/ID表示。后代选择器/包含选择器用.父元素 子元素表示。并集选择器/相邻元素选择器用“abc”表示。伪类选择器用“什么:hover”等表示还有很多别的伪类。上代码。!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 titleCSS选择器/title style /* 通用选择器 */ * { font-family: KaiTi; } /* 元素选择器 */ h2 { color: aqua; } /* 类名选择器 */ .nailong { background-color: yellow; color: blueviolet; } /* ID选择器 */ #nailong { font-size: 30px; color: bisque; } p { font-size: 20px; } /* 子元素选择器 */ /*.father .p{ color: yellowgreen; }如果保留这段不留下面的.son那么颜色都是橘色因为ID类元素*/ .father .son{ color: yellowgreen; } /* 后代选择器 */ .father p{ color: orange; } /* 相邻元素选择器 */ h3 h2 p { background-color: red; } /* 伪类选择器 */ .baojinbi:hover { color: yellowgreen; background-color: blueviolet; } /style /head body h1选择器示例/h1 h2这是一个元素选择器/h2 h3 classnailong这是一个类选择器/h3 h4 idnailong这是一个ID选择器/h4 p通用选择器让所有字体都变成了楷体/p div classfather p classson这是一个子元素选择器/p div p classgrandson这是一个后代选择器/p /div /div p这是一个普通p标签/p h3这是一个相邻兄弟选择器事例/h3 h2把这个隔开就不会被附魔/h2 p现在这个p标签被“附魔”了/p h3 classbaojinbi鼠标放到上面有惊喜/h3 /body /htmlCSS常用属性常用属性在这个网页上都能找到CSS 参考手册 | 菜鸟教程而且一百多个网页不可能学得完见几个学几个差不多得了。然后演示了一下font有很多属性font-size、font-family等可以统一写在一起称之为复合属性。font: bolder 50px KaiTi接着看到三类元素块元素block占据整行的宽度。div标签是一个经典的例子。行内元素inline不占据整行只占据本身内容所需要的宽度。也就是说width、height等都对它失效。span标签是一个经典的例子。行内块元素inline-block水平方向上排列但是可以设置块级元素的属性。也就是说width、height等都对它有效。img标签是一个经典的例子。这三种元素使可以相互转换的用到display属性即可。盒子模型下图来自视频。margin border padding width height content六个......单词属性名说明内容(content)盒子包含的实际内容包括文本、图片等。内边距(padding)围绕在内容的内部是内容与边框之间的空间。边框(border)围绕在内边距的外部是盒子的边界。外边距(Margin)围绕在边框的外部是盒子与其他元素之间的空间。练习代码!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 titleCSS选择器/title style .demo { background-color: aqua; display: inline-block; border: 10px solid yellowgreen; font-size: 32px; font-family: KaiTi; padding: 50px; margin: 100px; } .border-demo { background-color: yellow; width: 500px; height: 300px; border-style: solid dashed dotted double; border-width: 3px 6px 9px 12px; border-color: red; /*border-left: 10px solid red;*/ } /style /head body div classdemo我爱玩原神/div div classborder-demo《原神》是由米哈游自主研发的一款全新开放世界冒险游戏。游戏发生在一个被称作“提瓦特”的幻想世界在这里被神选中的人将被授予“神之眼”导引元素之力。你将扮演一位名为“旅行者”的神秘角色在自由的旅行中邂逅性格各异、能力独特的同伴们和他们一起击败强敌找回失散的亲人——同时逐步发掘“原神”的真相。​/div /div /body /html网页布局方式标准流普通流、文档流网页按照元素的书写顺序依次排列浮动定位Flexbox和Grid(自适应布局)浮动创建浮动框将某个元素移动到一边直到移动到左边缘或者右边缘。选择器{float: left/right/none;}浮动三大特性脱离标准流、一行显示顶部对齐、具备行内块元素属性。现在举例父元素包裹着子元素而子元素是一个左浮动一个右浮动。如果父元素不设置高度那么会导致边框无法包裹两个盒子。这个叫“父元素坍塌”。解决父元素坍塌的方法1.overflow:hidden2.伪元素清除法!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 titleCSS选择器/title style .father{ background-color: aquamarine; /*height: 150px;*/ border: 3px solid brown; /*overflow:hidden;*/ } .father::after{ content: ;/*创建一个空的伪元素*/ display: table;/*使之成为一个块级元素*/ clear: both;/*清除左右浮动*/ } .left-son{ width: 100px; height: 100px; background-color: yellow; float:left; } .right-son{ width:100px; height:100px; background-color:yellowgreen; float:right; } /style /head body div classfather div classleft-son左护法/div div classright-son右护法/div /div p这是一段文本/p /body /html定位相对定位相对于元素在文档流的位置进行定位。绝对定位相对于其最近的已定位祖先元素进行定位不占据文档流。固定定位相对于浏览器窗口进行定位。不占据文档流固定在屏幕上的位置不随移动而移动。!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 titleCSS选择器/title style .box1 { width: 500px; height: 500px; background-color: aqua; } .box2 { width: 600px; height: 600px; background-color: yellow; } .normal { width: 100px; height: 100px; background-color: blueviolet; } .box-relative { width:100px; height:100px; background-color: pink; position:relative; left:150px; top:30px; } .box-absolute { width:100px; height:100px; background-color: pink; position:absolute; left:150px; /*top:450px;*/ } .box-fixed { width:200px; height:200px; background-color: chocolate; position: fixed; right:0; top:300px; font-size: 32px; font-family: KaiTi; display: flex; align-items: center; justify-content: center; } /style /head body h1相对定位/h1 div classbox1 div classnormal/div div classbox-relative/div div classnormal/div /div h1绝对定位/h1 div classbox2 div classnormal/div div classbox-absolute/div div classnormal/div /div h1还有高手——固定定位/h1 div classbox-fixed广告位招租/div /body /html