Loading... ## **css的学习** **css的作用：网页布局，设置样式** css学习两大块内容： **1.选择器 2.属性与属性值** # **一.css书写的位置** ## **1.内嵌式** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 内嵌式：一般为了书写一些案例 */ div { color:red; font-size: 20px; } </style> </head> <body> <div>这是一个div</div> </body> </html> ``` ## **2.行内式** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 行内式：快速解决样式的问题 --> <div style="color:skyblue;font-size: 30px;text-align: center;">这是一个div</div> </body> </html> ``` ## **3.外链式** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 外链样式：为了让结构与样式分离，项目中都是这样使用 --> <link rel="stylesheet" href="./08.css"> </head> <body> <div>这是一个div</div> </body> </html> ``` # **二.选择器** ## **1.基本选择器** - a.通配符（*） - b.标签选择器（e 如：p,h1,div,span...） - c.类选择器（以"."开头） - d.id选择器 (以"#"开头) ## **2.复合选择器** - a.后代选择器 (空格 如： ul li) - b.子代选择器 ( > 如： ol > li) - c.并集选择器 ( , 如: div,span) - d.交集选择器 (什么都没有 如: li.second) ## **3.伪类选择器** - :link 链接时样式 - :visited 访问后样式 - :hover 鼠标悬停时样式 - :active 鼠标按下未松开时样式 - :focus 获得焦点时样式 # **三.属性与属性值** ## **1.字体** font-style: normal | italic font-weight: 100--900 (normal:400 bold: 700) font-size: 字体大小 font-family: 字体 line-height: 行高 字体简写(注意顺序)： font: font-style font-weight font-size/line-hight font-family 终极简写：font: font-size font-family ## **2.文本** - a.文本颜色 color: 颜色设置的几种方式 1.英文 如： pink 2.rgb 如： rgb(255,0,0) 3.rgba 如： rgba(255,0,0,0.3) 4.十六进制 如： #ff0000 - b.文本对齐 text-align: left | right | center - c.文本修饰 text-decoration: none | underline | line-through - d.文本缩进 text-indent: 2em ## **3.背景** background-color: 背景颜色 background-image: 背景图片 background-repeat: 背景是否平铺 background-position: 背景位置 background-attachment: 背景固定 复写： background: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./09-后代选择器.html"> <title>Document</title> <style> div { width: 500px; height: 500px; background-color: skyblue; background-image: url("./3.png"); background-repeat: no-repeat; background-position: left bottom; /* 简写 */ /* background:red url("./3.png") no-repeat right center; */ } </style> </head> <body> <div>我好想看见大家</div> </body> </html> ``` ## **4.盒子模型** 任何一个html标签都可以想像成是一个盒子（长方形）。 学习盒子模型的四块内容：边框（border），内边距(padding)，内容(content)，外边距(margin) ### **1.边框 border** - border-style: 边框样式 如： solid(实线) dashed(虚线) dotted(点线) - border-width: 边框宽度 - border-color: 边框颜色 简写：border 如：border: 2px solid #ccc; **边框圆角** border-radius: 10px; ## **2.内边距(padding)** 边框与内容之间的距离 ### **3.内容(content)** width与height默认是内容的宽与高， 不是盒子的宽与高 ### **4.外边距（margin）** 作用：设置盒子与盒子之间的距离 语法：margin: 10px 上下左右 margin: 10px 20px 上下，左右 margin: 10px 20px 30px 上，左右，下 margin: 10px 20px 30px 40px 上，右，下，左 margin-left 外边距应用中的一些问题： 1.兄弟元素：上下外边距合并，以间距数值大的为准 2.父子元素：盒子塌陷 解决方案：1.父盒子加border 2.父盒子加padding 3.父盒子加overflow:hidden 3.盒子本身居中： margin: 上下边距 auto; 盒子模型中注意的问题： 清除一些标签的默认样式： ```html * { margin:0; padding:0 } ``` ## **5.边框阴影** box-shadow: x轴的偏移量 y轴的偏移量 阴影的模糊值 阴影的大小 阴影的颜色 内阴影|外阴影(默认值) ## **6.文字阴影** text-shadow: x轴的偏移量 y轴的偏移量 阴影的模糊值 阴影的颜色= ## **7.浮动** 作用：排版（将块级元素放置在一行） 为什么要浮动？用inline-block可不可以呢？在某一些情况下可以使用，但是中间可能有空白 我们就可以使用浮动float 语法： float: left | right 浮动的原理：让盒子本身漂起来了，不占用原来的空间 浮动特性：浮动的盒子相当于是一个行内块元素了 清除浮动：1.额外标签法 clear:both; 2.父元素添加overflow:hidden 3.单伪元素 4.双伪元素 ## **8.定位** 作用：元素（盒子）有叠加的现象 分类：静态定位（static），相对定位(relative)，绝对定位(absolute)，固定定位(fixed)， 语法：定位模式+偏移值 ### **1.相对定位relative** 特点： - 1.不脱离标准流 - 2.相对于自身原来的位置进行偏移 - 3.还占据原来的位置 ### **2.绝对定位absolute** 特点： - 1.脱离标准流 - 2.相对于父级元素进行偏移（父级一定要有定位），否则相对页面定位 - 3.不占据原来的位置 **布局时一个非常重要的口决：“子绝父相”** ### **3.固定定位fixed** 特点： - 1.脱离标准流 - 2.相对于浏览器的视口进行偏移 - 3.不占据原来的位置 ## **9.显示与隐藏** 元素隐藏：display:none 或 visibility:hidden display与visibility的区别：display隐藏后不占据位置，visibility隐藏后占据位置 文本溢出隐藏：overflow:hidden | scroll 总结：overflow:hidden是一段神奇的代码，可以应用的场景？ \1. 文本溢出隐藏 \2. 盒子塌陷 ```text 3. 清除浮动 ``` ## **10.css中的一些高级技巧** ### **1.精灵图(sprite)** 作用：将一些小的图片放置在一张大图上，为了减少服务器的压力 **坐标基本上都是负值** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> span { display: inline-block; } .x { width: 105px; height: 110px; background: url("images/abcd.jpg") no-repeat -252px -559px; } .s { width: 116px; height: 114px; background: url("images/abcd.jpg") no-repeat -252px -417px; } </style> </head> <body> <span class="x">x</span> <span class="s">s</span> </body> </html> ``` ### **2.字体图标** 字体图标看起来像是图片，本质是字体。可以设置颜色与大小 去哪里找字体图标？有很多的第三方库，bootstrap,iconmoon,iconfont... 第一步：下载 第二步：自定义字体图标 第三步：使用自定义字体图标 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 定义字体 注意路径问题*/ @font-face { font-family: 'abc'; src: url('./iconmoon/fonts/iconfont.eot'); src: url('./iconmoon/fonts/iconfont.eot?#iefix') format('embedded-opentype'), url('./iconmoon/fonts/iconfont.woff2') format('woff2'), url('./iconmoon/fonts/iconfont.woff') format('woff'), url('./iconmoon/fonts/iconfont.ttf') format('truetype'), url('./iconmoon/fonts/iconfont.svg#iconfont') format('svg'); } /* 使用自定义的字体 */ .iconfont { font-family: "abc" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 80px; color:green; } /* font-family: "Microsoft yahe" 是因为我们的操作系统自带了字体*/ </style> </head> <body> <span class="iconfont"></span> </body> </html> ``` ### **3.利用css实现三角形** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 0px; height: 0px; border-width:10px; border-style:solid; border-top-width:20px; border-bottom-width:20px; border-top-color:red; border-right-color:blue; border-bottom-color:green; border-left-color:purple; margin: 100px auto; } </style> </head> <body> <div></div> </body> </html> ``` ### **4.鼠标样式** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> <li style="cursor:pointer">这是第1个li</li> <li style="cursor:text">这是第2个li</li> <li style="cursor:not-allowed">这是第3个li</li> <li style="cursor:move">这是第4个li</li> </ul> </body> </html> ``` ### **5.清除input的淡蓝色框** outline:none ### **6.行内元素与行内块元素垂直方向的对齐方式** 行内元素与行内块元素默认是基于基线(baseline)对齐的 共有四种对齐方式: vertical-align: top | middle | baseline | bottom ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { /* vertical-align: bottom; */ vertical-align: baseline; vertical-align: middle; vertical-align: top; } </style> </head> <body> <img src="./images/taobao.jpg" alt="" style="">abp </body> </html> ``` **常见应用：img图片下有一个空白如何去掉** 代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { border:2px solid red; } div img{ /* display: block;*/ vertical-align: top; } </style> </head> <body> <div> <img src="./images/taobao.jpg" alt="" style=""> </div> </body> </html> ``` ### **7.单行文本省略号的写法：** 三步曲： ```css div { /* 三步曲 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` # **四.标签的显示模式** 标签分为三大类： **块级元素 行内元素 行内块元素** 1.块级元素的特点： - 独占一行 - 可以设置宽高及内外边距 - 宽度默认为父元素宽度100%,高度未设置时由内容决定,无内容时高度为0 - 可以嵌套块级及行内标签 注意:p及h1-6标签中不能放块级元素，div中可以嵌套任意块元素 **常见块元素： div h1-h6 p ul ol li form** 2.行内元素： a span 3.行内块元素： img input **元素显示模式的相互转换** display: block | inline | inline-block # **五.css的一些特性** 层叠性：同一标签中的属性后面的值可以覆盖前面的值 继承性: 常见的继承属性有color, text-xxx, font-xxx, line-xxx 优先级：权重 (*与继承) 0 < 标签选择器 1 < 类选择器 10 < id选择器 100 < 行内样式 1000 < !important 无穷大 最后修改：2022 年 08 月 14 日 © 允许规范转载 打赏 赞赏作者 赞 如果觉得我的文章对你有用，请随意赞赏