搜索到
23
篇与
的结果
-
字体常用属性 1. 字体大小<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体大小</title> <style> body { font-size: 20px; } .test1 { font-size: 40px; } /* .test2 { font-size: 30px; } .test3 { font-size: 20px; } .test4 { font-size: 10px; } */ </style> </head> <body> <div class="test1">孙笑川1</div> <div class="test2">孙笑川2</div> <div class="test3">孙笑川3</div> <div class="test4">孙笑川4</div> </body> </html>2. 字体族<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体族</title> <style> /* 字体族：衬线字体（笔锋强劲的那种）/非衬线字体 可以设置多个字体，浏览器解析时按从左到右的顺序查找，没找到就使用后面的，且通常在最后写上 serif 或 sans-serif作为这一组的标识，如果都没找到，浏览器会联合系统选择一种合适的字体 */ .test1 { font-size: 100px; font-family: "微软雅黑"; } .test2 { font-size: 100px; font-family: "楷体"; } .test3 { font-size: 100px; font-family: "宋体"; } .test4 { font-size: 100px; font-family: "华文彩云"; } .test5 { font-size: 100px; font-family: "STCaiyun", "STHupo", "Microsoft YaHei", sans-serif; } </style> </head> <body> <div class="test1">孙笑川1</div> <div class="test2">孙笑川2</div> <div class="test3">孙笑川3</div> <div class="test4">孙笑川4</div> <div class="test5">孙笑川4</div> </body> </html>3. 字体风格<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体风格</title> <style> .test1 { font-size: 100px; font-style: normal; } .test2 { font-size: 100px; font-style: italic; } .test3 { font-size: 100px; font-style: oblique; } em { font-size: 100px; } </style> </head> <body> <div class="test1">孙笑川1</div> <div class="test2">孙笑川2</div> <div class="test3">孙笑川3</div> <em>孙笑川4</em> </body> </html>4. 字体粗细<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体粗细</title> <style> div { font-size: 100px; } .test1 { font-weight: lighter; } .test2 { font-weight: normal; } .test3 { font-weight: bold; } .test4 { font-weight: bolder; } .test5 { font-weight: 300; } </style> </head> <body> <div class="test1">孙笑川1</div> <div class="test2">孙笑川2</div> <div class="test3">孙笑川3</div> <div class="test4">孙笑川4</div> <div class="test5">孙笑川5</div> </body> </html>5. 字体复合属性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体复合属性</title> <style> /* 编写规则： 1.字体大小、字体族必须写上 2.字体族必须是最后一位，字体大小必须是倒数第二位 3.各个属性间用空格隔开 */ .test1 { font: bold italic 100px "华文彩云1","华文琥珀"; } </style> </head> <body> <div class="test1">孙笑川1</div> </body> </html> -
像素、颜色 1. 像素<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>像素</title> <style> .test { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="test"></div> </body> </html>2. 颜色表示方式—颜色名<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>颜色_第1种表示_颜色名</title> <style> .test { color: red; } </style> </head> <body> <h2 class="test">孙笑川</h2> </body> </html>3. 颜色表示方式—rgb/rgba<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>颜色_第2种表示_rgb或rgba</title> <style> /* 若三种颜色的值相同，呈现的是灰色，值越大，灰色越浅 */ .test1 { color: rgb(255, 0, 0); } .test2 { color: rgb(0, 255, 0); } .test3 { color: rgb(0, 0, 255); } .test4 { color: rgb(138, 43, 226); } .test5 { color: rgba(138, 43, 226, 0.5); } </style> </head> <body> <h2 class="test1">孙笑川1</h2> <h2 class="test2">孙笑川2</h2> <h2 class="test3">孙笑川3</h2> <h2 class="test4">孙笑川4</h2> <h2 class="test5">孙笑川5</h2> </body> </html>4. 颜色表示方式—HEX/HEXA<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>颜色_第3种表示_HEX或HEXA</title> <style> /* 格式 #ff0000 每一位数字的取值范围是0 ~ f，即：(1,2,3,4,5,6,7,8,9,a,b,c,d,e,f) 所以每一种光的最小值是00，最大值是ff */ .test1 { color: #FF0000; } .test2 { color: #00FF00; } .test3 { color: #0000FF; } .test4 { color: #c7edcc; } .test5 { color: rgba(138, 43, 226, 0.5); } </style> </head> <body> <h2 class="test1">孙笑川1</h2> <h2 class="test2">孙笑川2</h2> <h2 class="test3">孙笑川3</h2> <h2 class="test4">孙笑川4</h2> <h2 class="test5">孙笑川5</h2> </body> </html>5. 颜色表示方式—HSL/HSLA<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>颜色_第4种表示_HSL或HSLA</title> <style> /* hsl(色相, 饱和度, 亮（明）度) 色相：取值范围 0 - 360度 饱和度：0% 全灰，100% 没有灰 亮度：0% 亮度没了 黑色，100% 太亮了 白色 */ .test1 { color: hsl(0deg, 100%, 50%); } .test2 { color: hsl(60deg, 100%, 50%); } .test3 { color: hsl(120deg, 100%, 50%); } .test4 { color: hsl(0deg, 50%, 50%); } .test5 { color: hsla(0deg, 50%, 50%, 60%); } </style> </head> <body> <h2 class="test1">孙笑川1</h2> <h2 class="test2">孙笑川2</h2> <h2 class="test3">孙笑川3</h2> <h2 class="test4">孙笑川4</h2> <h2 class="test5">孙笑川5</h2> </body> </html>
-
三大特性 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>CSS三大特性</title> </head> <body> <!-- 1.层叠性 概念：如果发生了样式冲突，就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖） 2.继承性 概念：元素会自动拥有其父元素，或其祖元素上所设置的某些样式 规则：优先继承离得近的 常见的可继承属性：text-xxx font-xxx line-xxx color 3.优先级 !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式 并集选择器计算权重时，每一个部分是分开算的 --> </body> </html>
-
选择器的优先级 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>选择器优先级</title> <style> /* 行内 > id选择器 > 类选择器 > 元素选择器 > 通配选择器 */ #sunxiaochuan { color: blue; } .slogan { color: yellow; } h2 { color: red; } * { color: green; } </style> </head> <body> <h2 id="sunxiaochuan" class="slogan" style="color: blueviolet;">孙笑川</h2> </body> </html><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>选择器优先级</title> <style> /* 权重计算：(a,b,c) */ /* a：ID选择器的个数 b：类、伪类、属性 选择器的个数 c：元素、伪元素 选择器的个数 注：行内样式权重大于所有选择器 !important 的权重大于行内样式，大于所有选择器，权重最高 */ #test { color: purple; } /* (1,0,0) */ #jialidun { color: orange; } /* (0,2,1) 从左到右依次比较大小，当前位胜出后，后面的不再对比 */ .container span.slogan { color: red; } /* (0,1,3) */ div>p>span:nth-child(1) { color: green; } .slogan { color: blue !important; } </style> </head> <body> <div class="container" id="test"> <p> <span id="jialidun" class="slogan">家里蹲大学</span> <span>欢迎新同学</span> </p> </div> </body> </html>
-
复合选择器 1. 交集选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>交集选择器</title> <style> .rich { color: gold; } .beauty { color: red; } /* 交集选择器 */ /* 选中类名为beauty的p元素，这种写法使用频率非常高 */ p.beauty { color: green; } .rich.beauty { color: palevioletred; } /* 后来者居上指的是样式的先后顺序，不是指行内元素所写的先后顺序 */ </style> </head> <body> <h2 class="rich">土豪李四</h2> <h2 class="beauty">明星张三</h2> <h2 class="rich beauty">钻石老五</h2> <hr/> <p class="beauty">小狗旺财</p> <p class="beauty">小猪佩奇</p> </body> </html>2. 并集选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>交集选择器</title> <style> .rich { color: gold; } .beauty { color: red; } /* 交集选择器 */ /* 选中类名为beauty的p元素，这种写法使用频率非常高 */ p.beauty { color: green; } .rich.beauty { color: palevioletred; } /* 后来者居上指的是样式的先后顺序，不是指行内元素所写的先后顺序 */ </style> </head> <body> <h2 class="rich">土豪李四</h2> <h2 class="beauty">明星张三</h2> <h2 class="rich beauty">钻石老五</h2> <hr/> <p class="beauty">小狗旺财</p> <p class="beauty">小猪佩奇</p> </body> </html>3. 后代选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>后代选择器</title> <style> ul li { color: red; } ol li { color: green; } ul li a { color: orange; } ol li a { color: gray; } .subject li.yuwen { color: blue; } .subject div.yuwen { color: chocolate; } </style> </head> <body> <ul> <li>抽烟</li> <li>喝酒</li> <li> <a href="#">烫头</a> </li> <!-- <div> <li>踢球</li> </div> --> </ul> <hr/> <ol> <li>张三</li> <li>李四</li> <li> <a href="#">王五</a> </li> </ol> <hr/> <ol class="subject"> <li class="yuwen">语文</li> <div class="yuwen">学科介绍：学好语文</div> <li>数学</li> <li>英语</li> </ol> </body> </html>4. 子代选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>子代选择器</title> <style> /* 只选择儿子 div中的子代a元素 */ div>a { color: red; } div>p>a { color: skyblue; } .foot>a { color: gray; } </style> </head> <body> <div> <a href="#">张三</a> <a href="#">李四</a> <a href="#">王五</a> <p> <a href="#">赵六</a> <div class="foot"> <a href="#">孙七</a> </div> </p> </div> </body> </html>5. 兄弟选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>兄弟选择器</title> <style> /* 相邻兄弟选择器 */ /* 找到跟div紧紧相邻的p元素，兄弟选择器只往下看，不往上看（睡在我下铺的兄弟） */ /* div+p { color: red; } */ /* 通用兄弟选择器 */ /* 选中div后所有的兄弟p元素（睡在我下铺的所有兄弟） */ div~p { color: red; } li+li { color: orange; } </style> </head> <body> <div>语文</div> <p>数学</p> <p>英语</p> <p>物理</p> <hr/> <ul> <li>主页</li> <li>秒杀</li> <li>订单</li> <li>我的</li> </ul> </body> </html>6. 属性选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> /* 1.选中具有title属性的元素 */ /* [title] { color: red; } */ /* 2.选中具有title属性，且属性值为yuwen的元素 */ /* [title="yuwen"] { color: red; } */ /* 3.选中具有title属性，且属性值以字母y开头的元素 */ /* [title^="y"] { color: red; } */ /* 4.选中具有title属性，且属性值以字母n结尾的元素 */ /* [title$="n"] { color: red; } */ /* 3.选中具有title属性，且属性值包含字母n的元素 */ [title*="n"] { color: red; } </style> </head> <body> <div title="yuwen">语文</div> <div title="shuxue">数学</div> <div>英语</div> <div>物理</div> </body> </html>7. 伪类选择器—概念<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_概念</title> <style> /* 伪类：很像类，但不是类（class），是元素特殊状态的一种描述 */ /* 没有访问过的 */ a:link { color: orange; } /* 访问过的 */ a:visited { color: gray; } </style> </head> <body> <a href="https://www.baidu.com">去百度</a> <a href="https://www.jd.com">去京东</a> </body> </html>8. 伪类选择器—动态伪类<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_动态伪类</title> <style> /* 顺序：lvha */ /* 没有访问过的 */ a:link { color: orange; } /* 访问过的 */ a:visited { color: gray; } /* 选中的是鼠标悬浮状态的a元素 */ a:hover { color: skyblue; } /* 选中的是激活状态的a元素 */ a:active { color: green; } span:hover { color: pink; } span:active { color: yellowgreen; } input:focus { color: orange; background-color: green; } </style> </head> <body> <a href="https://www.baidu.com">去百度</a> <a href="https://www.jd.com">去京东</a> <span>孙笑川</span> <br> <input type="text"> <br> <input type="text"> <br> <input type="text"> </body> </html>9. 伪类选择器—结构伪类1<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_结构伪类_1</title> <style> /* 选中的是div的第一个儿子p元素（按照所有子元素计算的，以下同理） 结构1*/ /* div>p:first-child { color: red; } */ /* 选中的是div的第一个儿子p元素 结构2*/ /* div>p:first-child { color: red; } */ /* 选中的是p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子 结构3*/ /* div p:first-child { color: red; } */ p:first-child { color: red; } </style> </head> <body> <!-- 结构1 --> <!-- <div> <p>张三：98分</p> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> </div> --> <!-- 结构2 --> <!-- <div> <span>张三：98分</p> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> </div> --> <!-- 结构3 --> <p>测试一</p> <div> <p>测试二</p> <marquee> <p>测试三</p> <p>张三：98分</p> </marquee> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> </div> </body> </html>10. 伪类选择器—结构伪类2<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_结构伪类_2</title> <style> /* 选中的是div的第一个儿子p元素（按照所有子元素计算的，以下同理） 结构1*/ /* div>p:first-child { color: red; } */ /* 选中的是div的最后一个儿子p元素（按照所有子元素计算的） 结构1 */ /* div>p:last-child { color: red; } */ /* 选中的是div的第n个儿子p元素（按照所有子元素计算的） 结构1 */ /* div>p:nth-child(3) { color: red; } */ /* 选中的是div的偶数个儿子p元素（按照所有子元素计算的） 结构2 */ /* 关于n的值： 1. 0或不写：什么都不选中（几乎不用） 2. n：选中所有的子元素（几乎不用） 3. 1 ~ 正无穷的整数：选中对应序号的子元素 4. 2n或even： 选中序号为偶数的子元素 5. 2n + 1：选中序号为奇数的子元素 6. -n + 3：选中前三个 */ /* div>p:nth-child(2n) { color: red; } */ /* 选中的是div的第一个儿子p元素（按照所有同类型兄弟计算） 结构3 */ /* div>p:first-of-type { color: red; } */ /* 选中的是div的最后一个儿子p元素（按照所有同类型兄弟计算） 结构3 */ /* div>p:last-of-type { color: red; } */ /* 选中的是div的第n个儿子p元素（按照所有同类型兄弟计算） 结构3 */ div>p:nth-of-type(3) { color: red; } </style> </head> <body> <!-- 结构1 --> <!-- <div> <p>张三：98分</p> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> <p>孙七：58分</p> <p>老八：48分</p> </div> --> <!-- 结构2 --> <!-- <div> <p>第1个</p> <p>第2个</p> <p>第3个</p> <p>第4个</p> <p>第5个</p> <p>第6个</p> <p>第7个</p> <p>第8个</p> <p>第9个</p> <p>第10个</p> </div> --> <!-- 结构3 --> <div> <span>测试1</span> <p>张三：98分</p> <p>李四：88分</p> <span>测试2</span> <p>王五：78分</p> <p>赵六：68分</p> <span>测试3</span> <p>孙七：58分</p> <span>测试4</span> <p>老八：48分</p> </div> </body> </html>10. 伪类选择器—结构伪类3<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_结构伪类_3</title> <style> /* 选中div中倒数第n个的儿子p元素（按照所有兄弟元素计算） 结构1 */ /* div>p:nth-last-child(3) { color: red; } */ /* 选中div中倒数第n个的儿子p元素（按照所有同类型的兄弟元素计算） 结构1 */ /* div>p:nth-last-of-type(2) { color: red; } */ /* 选中的是没有兄弟的span元素 结构2 */ /* span:only-child { color: red; } */ /* 选中的是没有同类型兄弟的span元素 结构2 */ /* span:only-of-type { color: red; } */ /* 选中的是html根元素 */ /* :root { background-color: gray; } */ /* 选中的是没有内容的div元素（空格也算元素，所以div空标签内不能有空格，不然选不中） */ div:empty { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <!-- 结构1 --> <!-- <div> <span>测试1</span> <p>张三：98分</p> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> <p>孙七：58分</p> <p>老八：48分</p> <span>测试2</span> </div> --> <!-- 结构2 --> <!-- <div> <span>测试1</span> </div> <div> <span>测试2</span> <p>张三：98分</p> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> <p>孙七：58分</p> <p>老八：48分</p> </div> --> <!-- 结构3 --> <div></div> </body> </html>12. 伪类选择器—否定伪类<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_否定伪类</title> <style> /* 选中的是div的儿子p元素，但是排除类名为fail的元素 */ /* div>p:not(.fail) { color: red; } */ /* 选中的是div的儿子p元素，但是排除title属性值以“不及格”开头的 */ /* div>p:not([title^="不及格"]) { color: red; } */ /* 选中的是div的儿子p元素，但是排除第一个儿子p元素 */ div>p:not(:first-child) { color: red; } </style> </head> <body> <!-- 结构1 --> <div> <p>张三：98分</p> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> <p class="fail" title="不及格">孙七：58分</p> <p class="fail" title="不及格">老八：48分</p> </div> </body> </html>13. 伪类选择器—UI伪类<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_UI伪类</title> <style> /* 选中的是勾选的复选框或单选按钮 */ input:checked { width: 100px; height: 100px; } /* 选中的是被禁用的input元素 */ input:disabled { background-color: gray; } /* 选中的是可用的input元素 */ input:enabled { background-color: green; } </style> </head> <body> <input type="checkbox"> <input type="radio" name="gender"> <input type="radio" name="gender"> <input type="text"> <input type="text" disabled> </body> </html>14. 伪类选择器—目标伪类<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_目标伪类</title> <style> div { height: 900px; background-color: lightcyan; } div:target { background-color: green; } </style> </head> <body> <a href="#one">去看第1个</a> <a href="#two">去看第2个</a> <a href="#three">去看第3个</a> <a href="#four">去看第4个</a> <a href="#five">去看第5个</a> <a href="#six">去看第6个</a> <div id="one">第1个</div> <br> <div id="two">第2个</div> <br> <div id="three">第3个</div> <br> <div id="four">第4个</div> <br> <div id="five">第5个</div> <br> <div id="six">第6个</div> </body> </html>15. 伪类选择器—语言伪类<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_语言伪类</title> <style> /* 根据指定的语言来选择元素 */ div:lang(en) { color: red; } :lang(zh-CN) { color: green; } </style> </head> <body> <div>语文</div> <div lang="en">数学</div> <p>英语</div> <span>科学</div> </body> </html>16. 伪元素选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪元素选择器</title> <style> /* 伪元素：很像元素，但不是元素（element），是元素中的一些特殊位置 */ /* 选中的是div中的第一个文字 */ div::first-letter { color: red; font-size: 16px; } /* 选中的是div中的第一行文字 */ div::first-line { background-color: yellow; } /* 选中的是div中被鼠标选择的文字 */ div::selection { background-color: green; color: red; } /* 选中的是input元素中的提示元素 */ input::placeholder { color: skyblue; } /* 选中的是p元素最开始的位置，随后创建一个子元素（必须配合conten使用） */ p::before { content: "￥"; } p::after { content: ".00"; } </style> </head> <body> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas praesentium dicta, dolorem suscipit dolores amet iusto tenetur in necessitatibus inventore porro veritatis molestias reiciendis iste veniam repellendus at quaerat soluta!</div> <input type="text" placeholder="请输入内容"> <p>199</p> <p>299</p> <p>399</p> </body> </html>
-
-
-
样式表的优先级 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>优先级</title> <link rel="stylesheet" href="../01_CSS的编写位置/position.css"> <style> h1{ color: red; font-size: 100px; } </style> </head> <body> <!-- 行内样式 > 内部样式 = 外部样式 内部样式、外部样式优先级相同，且后写的会覆盖前写的 同一个样式表中，优先级也和编写顺序有关 --> <!-- <h1 style="color: aquamarine;">你好，孙笑川</h1> --> <h1>你好，孙笑川</h1> </body> </html>
