9.属性选择器:（正则表达式）
1. 正则表达式: 属性名=属性值(正则) = 是绝对等于; *= 是通配等于; ^= 以这个开头 ------------------------------------------------------------------ 标签[属性=""]{ } -------------------------------------------------------------- 2.eg: 选中属性是id的所有信息 <style> a[id]{ background: aqua; } 3.eg:选中类为百度的所有成员 a[class="百度"]{ background: #e1e819; } </style> 4.eg:选中以jpg结尾的所有成员 <style> a[href$=jpg]{ background: red; } </style> 5.eg:选中以https结尾的所有成员 <style> a[href^=https]{ background: red; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a[href^=https]{ background: red; } </style> </head> <body> <p class="demo1"> <a href="https://www.baidu.com" class="baidu" id="fiset">1</a> <a href="" class="baidu" target="_blank" title="test">2</a> <a href="../HTNL-CSS/123.jpg" class="link item">3</a> <a href="" class="link item">4</a> <a href="">5</a> <a href="">6</a> <a href="">7</a> <a href="">8</a> <a href="">9</a> </p> </body> </html>
10.字体
1.为什么要使用美化元素? (1).有效传递信息 (2).美化网页，页面漂亮 (3).凸显主题 (4).提高用户的体验
1.重点突出的字体，使用span套起来 <span> </span> 2.文字的字体大小 font-family: Bahnschrift; /*字体*/ font-size: 20px; /*字体大小*/ font-weight: bold; /*字体粗细*/ color: #1064c2; /*字体颜色*/
11.文本
text-align: center; //排版位置 text-indent: 2em; //首行缩进 text-decoration: underline; //下划线 text-decoration: none; height: 300px; //行高 line-height: 300px; //块高 text-showdon: //阴影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color: rgb(0,0,0); text-align: center; //排版位置 } .title{ color: red; text-indent: 2em; //首行缩进 } #liming{ text-decoration: underline; //下划线 background: aqua; height: 300px; //行高 line-height: 300px; //块高 } </style> </head> <body> <h1>故事介绍</h1><br/> <p class="title">傻瓜</p><br/> <p id="liming">《故事会》（Stories），曾用名《革命故事会》，</p> <p>是由上海世纪出版集团主管，上海故事会文化传媒有限公司主办的中文版半月刊物。 [1] </p> </body> </html>
12.列表
ul rl{} 整张表 list-style: none ; 没有序号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #qw{ background: red; font-size: 30px; text-align: center; } #we{ width: 300px; background: #7013d7; } ul{ background: #7013d7; list-style: none; } p:hover{ background: red; } </style> </head> <body> <div id="we"> <p id="qw">全部商品</p> <ul> <li> <p>122</p> <p>122</p> <p>122</p> <p>122</p> <p>122</p> <p>122</p> <p>122</p> <p>122</p> </li> </ul> </div> </body> </html>
13.背景
1.背景颜色 2.背景图片 div 是自定义的，需要定义长和宽 border: 1px solid red; 边框 长度/格式/颜色 background-repeat: repeat-x; //水平平铺 background-repeat: no-repeat; //不平铺 background-repeat: repeat-y; //垂直平铺 background-image: url("../HTNL-CSS/image/2.jpg"); //默认平铺 background red url("") no-repeate background-postion: x y; //坐标
14.渐变
background-image: linear-gradient(19deg,#21D4FD 0%,#00ff4e 100%); /*初始化，最终效果*/
15.盒子模型及边框使用
1.margin : 外边距 2.padding : 内边距 3.border : 边框 (1).粗细 (2).样式 (3).颜色 border: 3px soild black; //长度 soild(dashed) 颜色
外边距:
java 外边框
