首页 > 代码库 > Day4
Day4
一、行内元素与块级元素的区别 块级元素：1.独占一行 2.能设宽高 3.内容大小不影响框 4.可以嵌套行内、块级元素 5.四个方向margin都变化 行内元素：1.不能独占一行 2.不能设宽高 3.内容大小影响元素大小 4.margin 只针对左右起作用 <img>特殊的行内元素二、video标签 video（视频）只支持3种格式标准：.Ogg、.MPE4、.wedM 重要的属性：controls(控件) loop（循环） atuoplay（自动播放） audio（音频）只支持3种格式标准：.Ogg、.MP3、.wedM 重要的属性：controls(控件) loop（循环） atuoplay（自动播放） 三、CSS 4种引入方式 1.@import "css文件地址" 2.<link rel"stylesheet" helf="css文件地址"> 外部链接方式（外联） 3.<style type="text/css"></style> 内部样式（内联）[body] 4.<div style="border:1px solid red"></div> 内联样式（内嵌）[位于HTML中] 四、优先级 1.内联样式 2、外部样式或者内部样式表—就近优先 3.浏览器缺省设置 五、选择器的类型 1.class选择器 <html> <head> <title>class选择器</title> <style type="text/css"> <!-- .one{ color:red; /* 红色 */ font-size:18px; /* 文字大小 */ } .two{ color:green; /* 绿色 */ font-size:20px; /* 文字大小 */ } .three{ color:cyan; /* 青色 */ font-size:22px; /* 文字大小 */ } --> </style> </head> <body> <p class="one">class选择器1</p> <p class="two">class选择器2</p> <p class="three">class选择器3</p> <h3 class="two">h3同样适用</h3> </body> </html> 2.标记选择器 <html> <head> <title>class选择器与标记选择器对比</title> <style type="text/css"> <!-- p{ /* 标记选择器 */ color:blue; font-size:18px; } .special{ /* 类别选择器 */ color:red; /* 红色 */ font-size:23px; /* 文字大小 */ } --> </style> </head> <body> <p>class选择器与标记选择器1</p> <p>class选择器与标记选择器2</p> <p>class选择器与标记选择器3</p> <p class="special">class选择器与标记选择器4</p> <p>class选择器与标记选择器5</p> <p>class选择器与标记选择器6</p> </body> </html> 3.标记选择器.class <html> <head> <title>标记选择器.class</title> <style type="text/css"> <!-- h3{ /* 标记选择器 */ color:blue; font-size:18px; } h3.special{ /* 标记.类别选择器 */ color:red; /* 红色 */ font-size:23px; /* 文字大小 */ } .special{ /* 类别选择器 */ color:green; } --> </style> </head> <body> <h3>标记选择器.class1</h3> <h3>标记选择器.class2</h3> <h3 class="special">标记选择器.class3</h3> <h3>标记选择器.class4</h3> <h3>标记选择器.class5</h3> <p class="special">使用于别的标记</p> </body> </html> 4.同时使用两个class <html> <head> <title>同时使用两个class</title> <style type="text/css"> <!-- .one{ color:blue; /* 颜色 */ } .two{ font-size:22px; /* 字体大小 */ } --> </style> </head> <body> <h4>一种都不使用</h4> <h4 class="one">同时使用两种class，只使用第一种</h4> <h4 class="two">同时使用两种class，只使用第二种</h4> <h4 class="two one">同时使用两种class，同时使用</h4> <h4>一种都不使用</h4> </body> </html> 5.ID选择器 <html> <head> <title>ID选择器</title> <style type="text/css"> <!-- #one{ font-weight:bold; /* 粗体 */ } #two{ font-size:30px; /* 字体大小 */ color:#009900; /* 颜色 */ } --> </style> </head> <body> <p id="one">ID选择器1</p> <p id="two">ID选择器2</p> <p id="two">ID选择器3</p> <p id="one two">ID选择器3</p> </body> </html> 6.集体声明 <html> <head> <title>集体声明</title> <style type="text/css"> <!-- h1, h2, h3, h4, h5, p{ /* 集体声明 */ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下划线 */ } --> </style> </head> <body> <h1>集体声明h1</h1> <h2 class="special">集体声明h2</h2> <h3>集体声明h3</h3> <h4>集体声明h4</h4> <h5>集体声明h5</h5> <p>集体声明p1</p> <p class="special">集体声明p2</p> <p id="one">集体声明p3</p> </body> </html> 7.全局声明 <html> <head> <title>全局声明</title> <style type="text/css"> <!-- *{ /* 全局声明 */ color: purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下划线 */ } --> </style> </head> <body> <h1>全局声明h1</h1> <h2 class="special">全局声明h2</h2> <h3>全局声明h3</h3> <h4>全局声明h4</h4> <h5>全局声明h5</h5> <p>全局声明p1</p> <p class="special">全局声明p2</p> <p id="one">全局声明p3</p> </body> </html> 8.CSS选择器的嵌套声明<html> <head> <title>CSS选择器的嵌套声明</title> <style type="text/css"> <!-- p b{ /* 嵌套声明 */ color:maroon; /* 颜色 */ text-decoration:underline; /* 下划线 */ } --> </style> </head> <body> <p>嵌套使<b>用CSS</b>标记的方法</p> 嵌套之外的<b>标记</b>不生效 </body> </html> 9.父子关系1 <html> <head> <title>父子关系</title> <base target="_blank"> <style> <!-- h1{ color:red; /* 颜色 */ text-decoration:underline; /* 下划线 */ } h1 em{ /* 嵌套选择器 */ color:#004400; /* 颜色 */ font-size:40px; /* 字体大小 */ } --> </style> </head> <body> <h1>祖国的首都<em>北京</em></h1> <p>欢迎来到祖国的首都<em>北京</em>，这里是全国<strong>政治、<a href="economic.html"><em>经济</em></a>、文化</strong>的中心</p> <ul> <li>在这里，你可以： <ul> <li>感受大自然的美丽</li> <li>体验生活的节奏</li> <li>领略首都的激情与活力</li> </ul> </li> <li>你还可以： <ol> <li>去八达岭爬长城</li> <li>去香山看红叶</li> <li>去王府井逛夜市</li> </ol> </li> </ul> <p>如果您有任何问题，欢迎<a href="contactus">联系我们</a></p> </body> </html>10.父子关系2 <html> <head> <title>父子关系</title> <style> <!-- .li1{ color:red; } .li2{ color:blue; } .li1 ol li{ /* 利用CSS继承关系 */ font-weight:bold; /* 粗体 */ text-decoration:underline; /* 下划线 */ } --> </style> </head> <body> <ul> <li class="li1">关系1 <ul> <li>页面父子关系复杂时</li> <li>页面父子关系复杂时</li> <li>这里省略20个嵌套...</li> </ul> <ol> <li>页面父子关系复杂时</li> <li>页面父子关系复杂时</li> <li>这里省略20个嵌套...</li> </ol> </li> <li class="li2">关系2 <ul> <li>页面父子关系复杂时</li> <li>页面父子关系复杂时</li> <li>这里省略20个嵌套...</li> </ul> <ol> <li>页面父子关系复杂时</li> <li>页面父子关系复杂时</li> <li>这里省略20个嵌套...</li> </ol> </li> </ul> </body> </html>
Day4
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。