标签：span 入门 color 标签 0px border 选择器 CSS
基本概念：
- 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>
标签：span,入门,color,标签,0px,border,选择器,CSS 来源： https://blog.csdn.net/y_dd6011/article/details/113404391
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。