web开发：css基础
本文目录：
一、w3c架构分析
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>架构分析</title> </head> <body> <!-- 页面整体架构 --> <div class="wraper"> <div class="header"></div> <div class="nav"></div> <div class="mian"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> <div class="footer"></div> </div> <!-- box架构 --> <!-- .box>(h2+p*2+h3) --> <div class="box"> <h2>领先的 Web 技术教程 - 全部免费</h2> <p>在 w3school，你可以找到你所需要的所有的网站建设教程。</p> <p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p> <h3>从左侧的菜单选择你需要的教程！</h3> </div> <!-- .img-box架构 --> <div class="img-box"> <img src="" alt=""> <div class="text"> <h2></h2> <p></p> <p></p> </div> </div> </body> </html>
二、css三种引入
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css三种引入</title> <!-- 内联式 --> <style type="text/css"> /* css注释 */ /*选择器 p | 作用域 {} | 样式块*/ p { width: 150px; height: 150px; background-color: red; } </style> <!-- 外联式 --> <!-- 要将css文件与该html文件建立联系 => link --> <!-- 相对路径(目标文件相对于本文件的位置 ./当前路径 ../上一层路径) | 绝对路径 --> <link rel="stylesheet" href="./02.css"> </head> <body> <!-- css: 层级样式表, 完成页面布局 --> <!-- 组成部分: 选择器 作用域 样式块 --> <!-- 1.行间式 --> <div style="color: red">一段话, 将要被css修饰处理</div> <!-- 1. 样式书写在标签的style全局属性中 2. 样式格式为 => key: value(单位) 3. 以;隔开多个样式 4. 最后的;可以省略 --> <!-- 宽高背景颜色 --> <div style="width: 200px; height: 200px; background-color: orange"></div> <!-- 2. 内联式 --> <!-- 1. 样式书写在head标签内的style标签中 2. 样式格式为 => 选择器 { 样式块 } 3. 样式块 => key: value(单位) 4. 以;隔开多个样式 5. 最后的;可以省略 --> <p></p> <p></p> <!-- 3.外连式 --> <!-- 1. 样式书写在外部css文件中,不需要写任何标签 2. 样式格式为 => 选择器 { 样式块 } 3. 样式块 => key: value(单位) 4. 以;隔开多个样式 5. 最后的;可以省略 --> <h3></h3> </body> </html>
三、三种引入的优先级
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三种引入的优先级</title> <!-- 三种可以同时存在,协同完成布局 --> <!-- 三种之间没有优先级之说,谁在逻辑下方(后解释的)谁就起作用(样式覆盖机制) --> <!-- 行间式一定是逻辑最下方的 --> <!-- 外联 --> <link rel="stylesheet" href="./03.css"> <!-- 内联 --> <style type="text/css"> div { width: 200px; color: pink; } </style> </head> <body> <!-- 优先级: 大家同时存在且操作同一对象同一属性,才会出现冲突,最终起作用的就是优先级高的 --> <!-- 行间 --> <div style="background-color: cyan; color: orange">你是个好人</div> </body> </html>
四、基础选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基础选择器</title> <style type="text/css"> /*div => 标签名 => 标签选择器: 开发过程中尽可能少的运用,运用范围为最内层的显示层*/ /*dd => class名 => 类选择器: 布局的主力军*/ /*d => id名 => id选择器: 一定为唯一的*/ /* * => 通配选择器 => html,body,body下所有用于显示内容的标签 */ /** { border: 1px solid black; }*/ /*三种选择器有优先级*/ /*标签选择器: 标签名{} */ div { width: 200px; height: 200px; background-color: red; } /*类选择器: .类名{} */ .dd { background-color: orange; } /*id选择器: #id名{}*/ #d { background-color: green; } /*优先级: id选择器 > 类选择器 > 标签选择器 > 通配选择器*/ /*作用范围越精确,优先级越高*/ </style> <style type="text/css"> .div { width: 100px; height: 100px; background-color: orange } /*多类名: 类名与类名之间不能用于任何符号隔断*/ .red.div { background-color: red; } </style> </head> <body> <!-- ***** --> <!-- 选择器: css选择html标签的一个工具 => 将css与html建立起联系,那么css就可以控制html样式 --> <!-- 选择器其实就是给html标签起名字 --> <div></div> <div class="dd"></div> <div class="dd" id="d"></div> <div class="div"></div> <div class="div red r"></div> <div class="div"></div> </body> </html>
五、长度单位与颜色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>长度与颜色</title> <style type="text/css"> .div { /*px mm cm in em vw vh*/ width: 200px; height: 200px; /*颜色单词 | rgb() 0~255 | rgba() | #六位十六进制数*/ /*background-color: orange;*/ /*background-color: rgb(255, 0, 255);*/ /*background-color: rgba(255, 0, 255, 0.5);*/ /*#abc == #AABBCC*/ background-color: #ff0; } </style> </head> <body> <div class="div"></div> </body> </html>
六、文件样式操作
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文本样式操作</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: orange; } /*字体样式*/ .box { width: 400px; /*字族*/ /*STSong作为首选字体, 微软雅黑作为备用字体*/ font-family: "STSong", "微软雅黑"; } .box.uu { /*字体大小*/ font-size: 40px; /*字重*/ font-weight: 900; /*风格*/ font-style: italic; /*行高: 某一段文本在自身行高中可以垂直居中显示 => 文本垂直居中*/ line-height: 200px; /*字体整体设置*/ /*字重 风格 大小/行高 字族 (风格可以省略)*/ font: 100 normal 60px/200px "STSong", "微软雅黑"; } i { /*normal清除系统字体风格*/ font-style: normal; } </style> <style type="text/css"> .wrap { width: 200px; height: 200px; background-color: yellow; } /*文本样式*/ .w1 { /*换行方式*/ word-break: break-all; } .w2 { width: 400px; /*水平居中: left | center | right*/ /*text-align: center;*/ /*字划线: overline | line-through | underline */ text-decoration: overline; /*字间距*/ letter-spacing: 2px; /*词间距*/ word-spacing: 5px; /*缩进*/ /*1em相当于一个字的宽度*/ text-indent: 2em; } a { /*取消划线*/ text-decoration: none; } </style> </head> <body> <div class="box uu">普通文本</div> <i>i的文本</i> <div class="wrap">一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三</div> <hr> <div class="wrap w1">123 12312 312312312312312312312312 3123123123123123123123123123123123123123123123123123123</div> <hr> <div class="wrap w2">hello world hello world</div> <a href="">链接标签</a> </body> </html>
七、display
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>display</title> <style> .box { width: 80px; height: 40px; background-color: orange } .box { /*block: 块级标签, 独占一行, 支持所有css样式*/ /*display: block;*/ /*inline: 内联(行级)标签, 同行显示, 不支持宽高*/ /*display: inline;*/ /*inline-block: 内联块标签, 同行显示, 支持所有css样式*/ display: inline-block; /*标签的嵌套规则*/ /*①*/ /*block可以嵌套所有显示类型标签, div | h1~h6 | p*/ /*注: hn与p属于文本类型标签,所有一般只嵌套inline标签*/ /*②*/ /*inline标签只能嵌套inline标签, span | i | b | sup | sub | ins */ /*③*/ /*inline-block可以嵌套其他类型标签, 但不建议嵌套任意类型标签 img | input*/ } .b1 { height: 100px; } .b2 { height: 80px; } .b3 { height: 120px; } .box { /*文本基线对齐*/ vertical-align: baseline; } </style> </head> <body> <!-- <div class="box b1"></div> <div class="box b2"></div> <div class="box b3"></div> --> <div class="box b1">123</div> <div class="box b2">456</div> <div class="box b3"> <span>789 789 789 789</span> <span>789 789 789 789</span> </div> </body> </html>
