搜索到
146
篇与
的结果
-
16、颜色单位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS颜色单位</title> <style> /* 一、颜色单位 1.预定义颜色名：HTML和CSS规定了147种颜色名。例如：red yellow green blue 2.RGB颜色值 rgb（Red,Green,Blue):括号中每个参数代表对应颜色的浓度 浓度值是0~255之间的整数，0表示无浓度，255最大浓度 也可以使用百分比表示浓度0%~100% 3.十六进制颜色值 #RRGGBB：RR-红色 GG-绿色 BB-蓝色。每种颜色使用十六进制整数表示浓度 十六进制（满十六进一）：0 1 2 3 4 5 6 7 8 9 a b c d e f 例如：#ff0000 若每种颜色的两位数值都一样可以简写：#f00 4.RGBA：相较于RGB多了个A表示透明度，取值范围在0.0-1.0之间 0.0表示透明1.0表示不透明0.5表示半透明 5.HSL/HSLA H色调（0=360）0红色->120绿色->240蓝色 S饱和度（0%-100%）0%灰色->100%全彩 L亮度（0%-100%）0%黑色->100%白色 A透明度（0.0-1.0）0.0透明->1.0不透明 */ .div1{ width: 200px; height: 200px; /* background-color: rgb(255,200,0);*/ /* background-color: rgb(100%,0%,0%);*/ /* background-color: #ff0000;*/ /*background-color: #f00;*/ /*background-color: rgba(255,0,0,0.3);*/ background-color: hsla(0,100%,50%,.3); } </style> </head> <body> <div class="div1"></div> </body> </html> -
15、CSS长度单位 <!DOCTYPE html> <html lang="en"style="font-size:30px;"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS长度单位</title> <style> /* 一、长度单位 1.像素px：一个就是屏幕中一个不可分割的点。我们应用的屏幕实际上是由一个个的像素点构成的。 不同显示器的像素点大小也不同。在屏幕尺寸相同的情况下，像素越小，显示效果越清晰。 大部分浏览器默认字体大小是16px。 2.百分比%：相对于父元素大小的百分比进行计算 优点：当父元素大小发生变化时，子元素的大小也会按比例进行调整 3.相对于字体大小单位em：相对于当前元素字体大小进行计算 1em=当前字体大小（1倍font-size） 2em=2倍的font-size 4.rem:相对于根元素字体大小进行计算 */ .father{ font-size:50px; width: 500px; background-color: #c7edcc; } .son{ font-size: 200%; background-color: #fde6e0; /*width: 200%;*/ width: 6rem; } </style> </head> <body> <div class="father"> 今天天气不错 <div class="son">挺风和日丽的</div> </div> </body> </html>
-
14、CSS三大特性-继承性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS三大特性-继承性</title> <style> /* 一、继承性：一个元素的某些样式可以被后代元素继承。 优点：合理使用继承性，可以简化代码 注意： 通常文本、字体相关样式是可以继承的。但是背景、布局相关的样式不会被继承。 a链接不能继承文本颜色与下划线 h 标题标签不能继承字体大小 */ .father{ color: red; background-color: #c7edcc; } body{ font-size: 20px; } </style> </head> <body> <div class="father"> 我是father <div class="son">我是son <span>我是孙子span</span> </div> <a href="#">超链接</a> <h1>我是标题</h1> </div> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS三大特性-继承性</title> <style> /* 一、继承性：一个元素的某些样式可以被后代元素继承。 优点：合理使用继承性，可以简化代码 注意： 通常文本、字体相关样式是可以继承的。但是背景、布局相关的样式不会被继承。 a链接不能继承文本颜色与下划线 h 标题标签不能继承字体大小 */ .father{ color: red; background-color: #c7edcc; } body{ font-size: 20px; } </style> </head> <body> <div class="father"> 我是father <div class="son">我是son <span>我是孙子span</span> </div> <a href="#">超链接</a> <h1>我是标题</h1> </div> </body> </html>
-
13、CSS三大特性-优先级 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS三大特性-优先级</title> <style> /* 一、优先级：不同选择器选择同一个元素，并且设置相同的样式时，css会根据优先级选择使用样式。 选择器的权重： ！important 无敌 行内样式 1000 id选择器 0100 类、属性、伪类选择器 0010 标签选择器 0001 通配符、继承 0000 注意： 权重由四位数组成，权重高就优先执行。 权重从左到右依次比较，如高位相同，则比较下一位 权重可以叠加,但是不会进位 选择器分组单独计算 */ /*#d1{ color: yellowgreen; } */ /* 0001 0010 0011 */ div[class*="div1"]{ color: orange!important; } /* 0010 0010 0020 */ .div1.div2{ color: red; } </style> </head> <body> <div id="d1" class="div1 div2">我是div</div> </body> </html>
-
12、CSS三大特性-层叠性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS三大特性-层叠性</title> <style> /* 一、层叠性：相同选择器（同等权重）对同一个元素设置样式时 不冲突的样式：样式都生效 冲突的样式：会根据“就近原则”，书写位置接近元素的样式会将位置远的样式覆盖 */ .div1{ color: red; } .div1{ font-size: 50px; color: yellowgreen; } </style> </head> <body> <div class="div1">我是div</div> </body> </html>
