HTML基础---02CSS
01.CSS引用方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css引用方式</title> <!--3.引入外部样式文件--> <!--Emmet语法写法：link:css--> <link rel="stylesheet" href="css/style.css" /> <!--2.内部样式表--> <style type="text/css"> @import "css/test.css"; p{ background-color: #eeeeee; font-size: 18px; font-style: italic; } </style> </head> <body> <!--1.行间样式（嵌入式样式）--> <div style="color:olive;width:100px;border:1px solid blue;">行间样式测试1</div> <div>行间样式测试2</div> <p>段落1</p> <p>段落2</p> <span>外部样式测试</span> <span>外部样式测试</span> <span>外部样式测试</span> <span>外部样式测试</span> <div class="box">导入外部样式</div> <div class="box">导入外部样式</div> <div class="box">导入外部样式</div> <em class="box">同学们好！</em> </body> </html>
02.CSS选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS选择器</title> <style> /* 1.* li:first-child选取li首个元素-------------li:nth-child(2)选择第二个 */
/* * { color:red; }*/ /* 2.标签选择器 */ span{ display: block; margin-right: 20px; border: 1px solid gray; } /* 3.类选择器 */ .wrapper { color: aqua; } /* 4.id选择器*/ #content { color: pink; } /* 5.派出选择器 */ .box2 li { color: chartreuse; } </style> </head> <body> <p>这是P标签</p> <strong>这是strong标签</strong> <span>这是span标签</span> <div>这是div标签</div> <div class="wrapper">这是div标签</div> <p class="wrapper">这是div标签</p> <p id="content">这是内容</p> <ul class="box1"> <li>li001</li> <li>li002</li> <li>li003</li> </ul> <ul class="box2"> <li>li001</li> <li>li002</li> <li>li003 <ul> <li>subli1</li> <li>subli2</li> </ul> </li> </ul> </body> </html>
03.选择器的分组和样式继承
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器的分组及样式继承</title> <style type="text/css"> /* 1. 选择器的分组*/ h1, .box, p { color: red; } p { width: 100px; background-color: #999999; color: blue; } /* 2.样式继承*/ .test { font-size: 28px; } /*.test span{ font-weight: bold; }*/ .test span{ font-weight: bold; font-size: 12px;/*改写父元素传过来的样式*/ } </style> </head> <body> <h1>h1</h1> <div class="box">box</div> <p>p</p> <div class="test">这是一段测试<span>内容</span>。</div> </body> </html>
04.样式权重
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样式权重</title> <style> p { color: blue!important; } #content div.main_content h2{ /*权重：100+1+10+1=112*/ color:red; } #content .main_content h2{/*权重：100+10+1=111*/ color:blue; } </style> </head> <body> <p style="color:red;">这是内容1</p> <p>这是内容2</p> <div id="content"> <div class="main_content"> 52 <h2>这是一个h2标题</h2> </div> </div> </body> </html>
05.CSS字体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS字体</title> <style> p{ font-size: 18px; font-family: 微软雅黑; /*font-style: italic;*/ line-height: 2em; /*text-align: right;*/ /*text-indent: 30px;*/ text-indent: 2em; } p span { font-weight: 200; /*color: red;*/ /*color: rgb(255,0,0);*/ /* color: #ff0000;*/ /*color: #f00;*/ color: #ff1299; /*color:#f129;不能这样简写*/ } em { text-decoration: line-through; } div{ /*text-transform: capitalize;*/ text-transform: uppercase; } .news { /*font:italic small-caps bolder 18px/1.5 宋体;*/ font: 18px 宋体; } </style> </head> <body> <p><span>央视网消息</span>：全国妇联、国家卫生健康委、中央军委政治工作部联合下发《关 于评选表彰新冠肺炎疫情防控一线女医务人员（集体）全国三八红旗手（集体）的 通知》。同时，<em>全国妇联</em>还下发《关于评选表彰新冠肺炎疫情防控工 作中作出突出贡献的先进女性（集体）全国三八红旗手（集体）的通知》。</p> <div>How are you?</div> <p class="news">How are you?全国妇联、国家卫生健康委、中央军委政治工作部联合下发《关 于评选表彰新冠肺炎疫情防控一线女医务人员（集体）全国三八红旗手（集体）的 通知》。同时，<em>全国妇联</em>还下发《关于评选表彰新冠肺炎疫情防控工 作中作出突出贡献的先进女性（集体）全国三八红旗手（集体）的通知》。</p> </body> </html>
06.CSS背景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS背景</title> <style> body { /*background-color: #eee; background-color: transparent;*/ /*background-image: url(./images/bg.jpg); background-repeat: no-repeat; !*background-position: 100px 50px;*! background-position: top;!*如果只带一个参数，默认y向为50%*! background-attachment: fixed;*/ height: 2000px; background: #888888 url(images/bg.jpg) repeat-x fixed 0 30%; } </style> </head> <body> </body> </html>
07.伪类选择器》a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。
/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}
08.CSS属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS属性选择器</title> <style> div.content[title]{ font-weight: bold; } input[name=usr]{ background-color: #eee; } /*div[class~=box1]{ background-color: #5aff29; }*/ /*div[class^=content2]{ background-color: #5aff29; color: #fff; }*/ div[class$=box2]{ background-color: #5aff29; color: #fff; } </style> </head> <body> <div class="content1 box1 box2" title="内容">content1</div> <div class="content2 box2">content2</div> <form action=""> <input type="text" name="account"> <input type="text" name="usr"> </form> </body> </html>
09.关系选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关系选择器</title> <style> /*后代选择器*/ h1 strong{ color:#fff; background-color: #000; } /*儿子选择器*/ /* h1>strong{ color:#fff; background-color: #000; }*/ /*兄弟选择器*/ ul li+li+li{ list-style-type: none; color: red; } </style> </head> <body> <h1><strong>关系1</strong><span><strong>关系2</strong></span></h1> <ul> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> <li>li5</li> </ul> </body> </html>
10.伪元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素</title> <style> p:first-letter{ font: 60px 黑体; color: #2c3cff; text-indent: 2em; } p:first-line{ text-decoration: underline; } p:before{ content: '★'; } p::after{ content: '……'; } </style> </head> <body> <p>伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本， 并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。</p> </body> </html>
总结：
1.CSS:层叠样式表，用来美化网页的。做到结构（HTML）和表现（CSS）分离。 2.基本语法： 选择器 { 属性: 属性值; } 3.CSS引用方式：行间样式、内部样式、外部样式、导入外部样式。 行间样式：直接在标签上书写样式。 内部样式：在文件的内部书写样式。 <style type="text/css"> 样式内容 </style> 外部样式：（1）先创建一个CSS文件；（2）再用link标签引入这个文件。 导入外部样式：（1）先创建一个CSS文件；（2）在style标签中用import导入这个样式文件。 以上四种CSS引用方式的区别： 行间样式只作用于当前标签；而内部样式作用于当前文件；外部样式可以被多个HTML文件引用。 在实际项目开发中，最好使用外部样式。 外部样式分为link引入和import引入两种方式。这两种方式区别： 1）link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。 2）link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。 3）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。 4）link支持使用Javascript控制DOM去改变样式；而@import不支持。 4.CSS选择器分类： 1）*：匹配html中所有元素（注意：*的性能差，因为它要匹配所有元素，所以在开发时，不建议使用） 2）标签选择器：用来匹配对应的标签 3）类选择器：用来选择class命名的标签 4）ID选择器：用来选择用id命名的标签 5）派出选择器：根据上下文来确定选择的标签 6）伪类选择器 7）伪元素选择器 5.选择器的分组 让多个选择器（元素）具有相同的样式，一般用于设置公共样式。 6.选择器的继承 子元素可以继承父元素的样式，反之不可以。 7.样式权重 !important(10000)>内联样式(1000)>id选择器(100)>类、伪类和伪元素选择器(10)>标签选择器(1) 8.CSS字体 1)font-size:字号(px/%) 2)font-family:字体 3)font-style:文字样式(normal/italic/oblique) 4)font-weight:文字加粗(normal/bold/bolder/lighter/100-900) 5)line-height:行高(px/数字/em等) 6)color:文字的颜色(颜色的单词/rgb()->r:0-255,g:0-255,b-0-255/16进制(以#开头，后跟6位(#rrggbb)或3位(#rgb)16进制数） 7)text-decoration:文字修饰(none/underline/overline/line-through) 8)text-align:文本对齐方式(left/right/center) 9)text-transform:字母大小写(capitalize/uppercase/lowercase/none) 10)text-indent:文本缩进(px/em/%/pt等) Tip: font复合属性： font:font-style font-variant font-weight font-size/line-height font-family; 注意： 1）属性值的位置顺序 2）除了font-size和font-family之外，其它任何一个属性值都可以省略 3）font-variant：normal/small-caps（让大写字母变得小一些） 9.CSS背景 1)background-color:背景色(transparent/color) 2)background-image:背景图(none/url) 3)background-repeat:背景图像铺排方式(repeat/no-repeat/repeat-x/repeat-y) 4)background-position:设置对象的背景图像位置({x-number | top | center | bottom } {y-number | left | center | right }) 5)background-attachment:背景图像滚动位置(scroll/fixed) 6)background:设置背景的复合写法 background: color image repeat attachment position 10.CSS伪类选择器 伪类：专门用来表示元素的一种特殊状态。 常用伪类选择器： 1)a标签的伪类： :link/:visited/:hover/:active 2):focus 获得焦点 3):first-child/:last-child/:nth-child(number) 11.属性选择器 [属性名]:包含有指定属性名的元素（常用） [属性名=值]:属性名的值为指定值的元素（常用） [属性名~=值]:属性名的值包含指定值的元素 [属性名^=值]:属性名的值以指定值的开头的元素 [属性名$=值]:属性名的值以指定值的结尾的元素 12.关系选择器 1)空格：后代选择器 2)>：只选择儿子元素 3)+：兄弟选择 13.CSS伪元素 1）CSS伪元素与伪类区别： css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。 它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。 伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本， 并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。 2）伪元素&伪类的特点： 伪元素和伪类都不会出现在源文档或者文档树中 伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面 伪元素名和伪类名都是大小写不敏感的 有些伪类是互斥的，而其它的可以同时用在一个元素上。（在规则冲突的情况下，常规层叠顺序决定结果） 3）:before/:after/:first-letter/:first-line : 前面可以是1个冒号也可以是双冒号 ::selection/::placeholder/::backdrop : 前面只能是双冒号
li:first-child
