行标签：不会占据一整行位置的标签，内容有多宽就占用多宽
块标签：默认会占据一整行的标签（标题标签就属于块标签）
一个纯净的块标签：div，后面会使用纯净的div标签加上CSS来自己设置这个元素的展示样式。
所谓纯净的标签，就是默认没有带有任何样式的标签，比如无宽高，没有背景颜色等一些样式。
h1就不属于一个纯净的块标签，因为他会对文本加粗，字体会变大
一个纯净的行标签：span，默认不带有任何样式。
CSS
Cascading Style Sheets
-
概念：层叠样式表，用来美化HTML标签的，提供了丰富的样式，来满足我么你丰富的样式需求。
当我们学了CSS，name标签的展示样式，基本上就由CSS来控制，也就是说HTML标签张什么样子，可以交给CSS来控制，这样做的好处，可以实现解耦，分工合作。
HTML标签只需要定义网页元素，美化的工作交给CSS来做。也就是说，有了CSS那么标签自带的属性，就不太用了，直接交给CSS。
标签自带的属性不能满足我们更加丰富的样式需求，所以我们就用CSS来做。
-
CSS与HTML结合的方式：
-
内联样式：就是将CSS代码，写在HTML标签的内部
每一个HTML标签都有一个style属性，CSS代码就写在style属性中。
内联样式的缺点：一次只能控制一个标签的展示样式，没有复用性。
写在标签内部，比较凌乱。
<div id="" style="font-size: 100px;color: chocolate;font-family: 楷体;"> 就是将CSS代码，写在HTML标签的内部 </div> <!--css属性名1：值1；css属性名2：值2；--> -
将CSS代码写在一个style标签的内部，结合选择器使用，一次可以控制一个或多个标签的展示样式，能提高代码的复用性。这个style标签一般我们定义在head标签内部。
选择器：一种选择标签的语法
选择器的优先级：当多个选择器选择了同一个标签，控制的样式没有冲突，那么所有的样式就叠加生效。
如果有冲突，那么要根据选择器的优先级来判定
内联样式>id选择器>class选择器>标签名选择器
1.id选择器：通过标签的id属性值来选择，一次只能选择一个标签进行样式的控制。 <style type="text/css"> #mu{ font-size: 100px;color: yellow;background-color: aqua; } </style> </head> <body> <h1 id="mu">Manchester United</h1> <h1 id="mu">Manchester United</h1> <h1 id="mu">Manchester United</h1> <h1 id="mu">Manchester United</h1> <h1 id="mu">Manchester United</h1> </body> 2.class选择器：把多个标签通过class属性归为一类，那么就可以选择多个标签进行样式的控制（class属性值可以写多个） <style type="text/css"> .mu{ font-size: 20px;color: #FFFF00; } </style> </head> <body> <div class="mu"> Manchester United </div> <h1 class="mu">Manchester United</h1> <h2 class="mu">Manchester United</h2> </body> 3.标签名选择器：根据标签名称，来选择多个标签 <style type="text/css"> h1{ color: darkmagenta;background-color: #00FFFF; } div{ font-weight: 400; } h2{ font-family: 宋体; } </style> </head> <body> <div class="mu"> Manchester United </div> <h1 class="mu">Manchester United</h1> <h2 class="mu">Manchester United</h2> </body> 4.包含选择器：通过元素的包含关系层层往里选 <style type="text/css"> div div span{ color: #00FFFF; } </style> </head> <body> <div id=""> <div id=""> <span id=""> Manchester United </span> </div> </div> <span id=""> Manchester United </span> </body> 5.通配符选择器：*全局通配，选中所有标签。局部通配：h1 *，选择某一种标签的所有元素 <style type="text/css"> *{ color: #8B008B; font-size: 80px; } </style> </head> <body> <div class="mu"> Manchester United </div> <h1 class="mu">Manchester United</h1> <h2 class="mu">Manchester United</h2> </body> 6.伪类选择器：是针对a标签来设计的，伪类选择器选择的是状态 a标签有四种状态： 1.链接状态 2.鼠标悬浮状态 3.鼠标按下状态 4.链接访问过后的状态 其中，鼠标悬浮和鼠标按下状态也可以给其他元素使用 <style type="text/css"> a:link{ text-decoration: none; font-family: 隶书; } a:hover{ color: #00008B } a:active{ font-size: 20px; } a:visited:{ font-weight: 300; } </style> </head> <body> <a href="http://www.baidu.com">进入百度</a> <a href="http://www.baidu.com">进入百度</a> <a href="http://www.baidu.com">进入百度</a> <a href="http://www.baidu.com">进入百度</a> <a href="http://www.baidu.com">进入百度</a> </body> 7.子选择器：选中子元素，对于孙子元素不能选中 <style type="text/css"> div>p{ font-size: 100px; color: chartreuse; } </style> </head> <body> <div id=""> <p>Manchester United</p> <p>Manchester United</p> <p>Manchester United</p> <p>Manchester United</p> <p>Manchester United</p> <p>Manchester United</p> <p>Manchester United</p> </div> </body> 通过外层来控制子层要用到子选择器 <style type="text/css"> #fu{ height: 100px;background-color: #7FFF00;width: 100px; } #zi{height: 20px;background-color: #8B008B;width: 20px; } #fu:hover>#zi{ background-color: darkslateblue; } </style> </head> <body> <div id="fu"> <div id="zi"> </div> </div> </body> 8.相邻选择器：移上该层，控制所有相邻层（相邻单个“+”，相邻所有“~”） <style type="text/css"> #d1{ width: 200px; height: 200px; background-color: #483D8B; } #d2{ width: 200px; height: 200px; background-color: #7FFF00; } #d1:hover+#d2{ background-color: #00FFFF; } </style> </head> <body> <div id="d1"> </div> <div id="d2"> </div> </body> 9.属性选择器：标签里的所有 被选中的属性都会选中 a[title=num1]选中属性title=num1的标签 a[title^=num]选中title的属性值以num开头的a标签 a[title$=num]选中title的属性值以num结尾的a标签 a[title|=num]选中title的属性值以num-连接的a标签 a[title~=num]选中title的多个属性值以空格隔开的有其中一个属性值都能选中，例如<a title="num num1 num2">三个属性值任选一个都能选中 <title></title> <style type="text/css"> h1[align]{ background-color: #00FFFF; } </style> </head> <body> <h1 align="left">Manchester United</h1> <h1 align="right">Manchester United</h1> <h1 align="center">Manchester United</h1> <h1 class="aClass">Manchester United</h1> </body> -
外部样式：开发首选，是将CSS代码写到一个单独的文件中，那么哪个HTML页面要用到这个样式，就来引用这个css文件，复用性更高，一次可以控制多个页面元素展示样式。
<title></title> <link rel="stylesheet" type="text/css" href="css/a.css"/> <link rel="stylesheet" type="text/css" href="css/public.css"/> </head> <body> <h1>Manchester United</h1> </body> h1{ color: cyan; } body{ background: #00FFFF; }
-
CSS常用属性
<style type="text/css"> div{ width: 300px; height: 400px; background-color: #7FFFD4; /* 设置背景图片 */ background-image: url(img/girl2.jpg); /* 设置背景图片的尺寸 */ background-size: 100% 100%; /* 边框的设置 */ border: 10px red solid; } body { background-color: white; background-image: url(img/girl4.jpg); /* 背景图片的尺寸，拉伸背景图片，填满整个背景 值1 横向拉伸 值二 纵向拉伸 */ /* background-size: 100% 800px; */ /* 设置背景图片是否重复，不要重复no-repeat */ background-repeat: no-repeat; } #div1 { /* 颜色的取值：颜色单词，可以是16进制的颜色值 rgb(0,0,0); 红 绿 蓝 0-255 rgba(0,0,0,0.3)红 绿 蓝 透明度 0-1 */ color: rgba(0, 0, 0, 0.3); /* 字体大小的单位 px pt mm cm */ font-size: 150pt; font-family: 隶书; /* 文字的加粗效果 100--900 */ font-weight: 200; } #div2 { width: 200px; height: 200px; /* 边框的粗细，边框的颜色 边框的线条样式 */ border: 10px black solid; background: red; } </style> -
页面元素的定位方式
页面的原点位置：在页面页面的左上角，页面的第一个元素，就会跑到原点位置。
页面的定位方式：相对定位和绝对定位。
相对定位：页面元素的默认定位方式，相对定位，元素之间相互参考位置，第一个元素参照原点位置，后 面的元素参照上一个元素位置。
绝对定位：所有元素都参照原点位置，元素之间相互不参考。行标签：对于左右间距的设置，是生效的，但是设置上下间距，不生效
块标签：对于设置四个方向的间距都是起作用的
绝对定位 <style type="text/css"> button{ /* position 设置元素的定位方式： absolute 绝对定位 relative 相对定位 */ position:absolute; } /* 当你把元素设置为绝对定位了以后，距离原点的4个方向可以使用 top,left bottom right 这4个 属性来设置 */ #btn1{ left: 50px; top:50px } #btn2{ left: 150px; top:150px } #btn3{ left: 250px; top:250px } </style> </head> <body> <button type="button" id="btn1">一个按钮1</button> <button type="button" id="btn2">一个按钮2</button> <button type="button" id="btn3">一个按钮3</button> </body>相对定位 <style type="text/css"> h1{ position: relative; border: 1px black solid; width: 400px; } h1:first-child{ margin-left: 50px; margin-top: 150px; margin-bottom: 50px; } #h{ margin-left: 150px; margin-top: 100px; margin-right: 0px; } /* 如果是相对定位:4个方向的间距用 margin-left: 150px; margin-top: 100px; margin-right: 0px; margin-bottom: 50px; */ </style> </head> <body> <h1>11111111111111111</h1> <h1 id="h">222222222</h1> <h1>3333333333333333333</h1> </body> -
块元素和行元素和行内块元素的转换
<style type="text/css"> span{ /*block把行标签转换成块标签 */ display: block; } h1{ /* inline 把块标签转换成行标签 */ display:inline; } button{ margin-top: 300px; } </style> </head> <body> <span>这是行元素</span><b>aaaaa</b> <h1>111111111111111</h1> <h1>22222222222</h1> <h1>3333333333333333</h1> <h1>5555555555555555</h1> <button type="button">按钮属于行内块元素</button> <button type="button">按钮属于行内块元素</button> </body> -
隐藏元素
<style type="text/css"> #d1{ height: 200px; width: 200px; background: red; /* none就可以隐藏这个元素，隐藏后，他原来所占的位置就不存在了*/ /* display: none; */ /* visibility: hidden;隐藏后，元素原来占的位置还在 visible 显示（默认值） hidden 隐藏 。 */ /* visibility:visible; */ } #d1:active{ display: none; } #d2{ height: 200px; width: 200px; background:yellow; } #d2:hover{ display: none; } #d3{ height: 200px; width: 200px; background:magenta; } </style> </head> <body> <div id="d1"> 11111 </div> <div id="d2"> 2222 </div> <div id="d3"> 333 </div> </body> -
层溢出
<style type="text/css"> div { height: 200px; width: 100px; border: 1px red solid; /* 当内容溢出了层的范围，该怎么处理 */ /*visible:溢出的部分展示 hidden:溢出的部分不要 auto:如果有溢出，就加上滚动条，没有就不加 scroll:不管有没有溢出，都加上滚动条。 */ overflow:auto; } </style> </head> <body> <div id=""> asdfasdfasdfasdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdf </div> </body> -
层的叠放顺序
<style type="text/css"> div { position: absolute; } #d1 { top: 20px; left: 50px; height: 200px; width: 200px; background: red; /* 当元素设置了绝对定位，重叠在一块，可以通过z-index来调整叠放顺序，值越大就在最上面 */ z-index: 0; } #d2 { top: 50px; left: 80px; height: 200px; width: 200px; background: yellow; z-index: 0; } #d3 { top: 120px; left: 150px; height: 200px; width: 200px; background: magenta; z-index: 0; } </style> </head> <body> <div id="d1" onclick="show(this)">11111 </div> <div id="d2" onclick="show(this)">2222 </div> <div id="d3" onclick="show(this)">333 </div> </body> <script type="text/javascript"> var index = 1; function show(obj) { obj.style.zIndex = index++; } </script> -
页面浮动
只要是块标签，都可以浮动
<style type="text/css"> #d1 { height: 200px; width: 200px; background: red; /* float可以让块标签一字排开 left:从左往右一字排开 right:从右往左一字排开 */ float: left; } #d2 { height: 200px; width: 200px; background: yellow; /* float可以让块标签一字排开 */ float: left; } #d3 { height: 200px; width: 200px; background: magenta; /* float可以让块标签一字排开 */ float: left; } #d4 { height: 200px; width: 200px; border:1px solid black; background: green; } </style> </head> <body> <body> <div id="d1">11111 </div> <div id="d2">2222 </div> <div id="d3">333 </div> <!-- 定义了一个空层，用来清除上面的浮动，不要影响下面的层。 clear: left; clear: right; clear: both; 清除左右浮动 --> <div id="" style="clear: both;"> </div> <div id="d4">444 </div> </body> </body>
-
453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
