基本概念：
- CSS主要用于修饰网页的，对HTML进行标签修饰和布局划分(网页划分一本不用table标签来做)
- 常见块标签
<div>, <p>, <h1>…<h6>, <ol>, <ul>, <li>, <form>等(独占一行) - 常见行标签
<span>, <a>, <i>, <em>, <strong>, <front>等
CSS引入方式：（三种方式都可以用，同时作用时，就近原则生效）
-
行内引入：
<span style="color:red;">文本</span>在标签内style属性内以键值对的方式修饰(一般不用) -
内嵌式：标签正常写，只是将style中的内容放到head标签内
<!DOCTYPE html 内嵌式引入CSS> <html> <head> <meta charset="utf-8"> <title></title> <style> span{ color: blue; } </style> </head> <body> <span>文本</span> </body> </html> -
链接式：同样标签正常写，将所有的样式都放到css文件中，然后再head中使用link标签引用
<!DOCTYPE html，链接式> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/my.css" /> </head> <body> <span>文本</span> </body> </html> <! css 文件: 直接将内嵌式中head的style内容放进来就可以> span{ color: blue; }
CSS选择器：可以理解为CSS的作用标签和作用范围
-
三种基本的选择器，标签名、id、class一般意义上可互换使用，但要保证作用范围不变
-
标签选择器会使这类标签起作用，范围太广，一般不单独使用
-
id选择器，针对个别标签
-
类选择器，针对一类有相同效果的
-
层级选择器，使用广泛，可以精确限定范围，一般联合前三种一起使用
-
分组选择器，选取多个不同层级的标签，精确控制
-
伪类选择器，一般使用在有多种状态的标签，如链接
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 1.标签选择器 */ i{color: blue;} /* 2.id选择器 */ #span_id{color: red;} /* 3.类选择器 */ .span_class{color: blue;} /* 4.层级选择器 */ p span{color: red;} /* 5.属性选择器 */ input[type=text]{color: blue;} /* 6.分组选择器 */ big,#fz_id,.fz_class{color: red;} /* 7.伪类选择器 https://www.w3school.com.cn/css/css_pseudo_classes.asp 四个属性同时使用时，hover必须在link和visited之后，active在hover之后*/ a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ </style> </head> <body> <i>1.标签选择器：标签名{样式:样式值;}</i> <br /> <span id="span_id">2.id选择器：#id属性值{样式:样式值;}</span> <br /> <span class="span_class">3.类选择器：.class属性值{样式:样式值;}</span> <p> <span>4.层级选择器：p span{}</span> <span>p标签内所有span标签都起作用</span> </p> <p> <input type="text" value="123789"/> 5.属性选择器：input[type=text]{样式:样式值;} </p> <p> <big>6.分组选择器，这里使用标签名</big> <span id="fz_id">这是设置id</span> <span class="fz_class">这里设置class</span> <br /> 使用：big,#fz_id,.fz_class{样式:样式值;} </p> <p> <a href="#" target="_blank">7.伪类选择器</a> </p> </body> </html>
CSS盒子模型、浮动、定位
-
盒子模型主要是对块标签的内外边距的调整，达到布局的目的(主要是div标签)
<!DOCTYPE html 盒子模型> <html> <head> <meta charset="utf-8"> <title></title> <style> span,div { width: 300px; height: 300px; border: 25px solid green; padding: 50px; margin: 25px 25px; /* background: blue; */ } span{ display: block; padding-left: 10px; } </style> </head> <body> top <div> 标签div位于top和bottom之间，绿色框是边线(border)，<br/> 边框距top的距离是外边距；边框和文字的距离是内边距，<br/> 文字所占据的空间是300*300px <br/> div所占据的空间为：(300+50+25+25)*(300+50+25+25)px <br/> padding 50px; 表示四周内边距都为50px <br/> padding 50px 25px; 表示上下50px，左右25px<br/> padding 50px 40px 30px 20px; 依次表示上右下左(顺时针)<br/> 水平居中可设置margin：0px auto; 上下为0px，左右平分 </div> bottom <span> 块标签和行标签可以相互转换，加上display属性，block为快，inline为行 </span> </body> </html> -
因为块标签都是独占一行，极大影响布局，所以引入浮动，使块标签处在同一行
-
浮动：相对父级标签有若干个块标签(这里称子块)，子块们会优先占满顶部空间，依次层叠
<!DOCTYPE html 浮动> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 选中body中的所有标签 */ *{ /* 去除所有标签边距 */ border: 0px; padding: 0px; margin: 0px; /* 显示所有边线(方便观察) */ /* border: 1px solid yellow; */ } div div { width: 100px; height: 100px; border: 5px solid green; padding: 5px; margin: 5px; /* 这里加上向左浮动 */ float: left; } #div_border{ width: 300px; height: 300px; border: 5px solid yellow; } </style> </head> <body> <div id="div_border"> <div>第一个块</div> <div>第二个块</div> <div>第三个块</div> </div> </body> </html> -
定位：是我们通常意义上的布局，通过坐标来确定位置
<!DOCTYPE html 定位> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ border: 0px; padding: 0px; margin: 0px; } div{ width: 200px; height: 200px; background-color: aqua; border: #0000FF 1px solid; } #div1{ /* 绝对定位：会根据设置的间距来确定位置，释放原本的空间 */ position: absolute; top: 20px; left: 30px; } #div2{ /* 相对定位：相对原本位置的位置，且不会释放以前位置 */ position: relative; left: 100px; } #div3{ /* 相对浏览器窗口定位：仅相对网页窗口，释放原本空间(一般用于广告) */ position: fixed; top: 100px; right: 0px; } </style> </head> <body> <div id="div1">第一个块</div> <div id="div2">第二个块</div> <div id="div3">第三个块</div> <div>第四个块</div> </body> </html>