overflow: hidden
- 定义:超出的部分,剪掉 - 示例: 新建150*150布局的容器div,放入一张超过150*150px的图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ # 指定宽高 height: 150px; width: 150px; } </style> </head> <body> <div> <img src="mid-autumnday.jpg" alt=""> </div> </body> </html> - 效果:图片会正常显示,整个div容器会被撑开(容器div的实际像素不变) - 需求:容器div占多少像素,图片就占多少像素,多余的就切掉!就用到了 overflow:hidden ...... <style> div{ height: 150px; width: 150px; overflow: hidden; # 容器有多大,图片就多大 } </style> <body> <div> <img src="mid-autumnday.jpg" alt=""> </div> </body> </html>
text-align: center / margin: auto
- text-align: center 让容器里面的元素水平居中 - margin: auto 让容器本身水平居中(容器里面的元素会一起被移动) - 实例,文字标题和段落的排列 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <h1 style="text-align: center"> # 使标题居中 <span style="background-color: black;color: white">千峰教育</span> </h1> <div style="width: 600px;margin: auto"> # 段落居中 <p> 千锋教育_国内IT职业教育良心品牌,专注Java培训,HTML5+WEB前端培训,Python+人工智能培训,Linux云计算培训,全链路UI培训,大数据培训,unity游戏开发,软件测试,PHP,互联网营 </p> <p> 千锋教育_国内IT职业教育良心品牌,专注Java培训,HTML5+WEB前端培训,Python+人工智能培训,Linux云计算培训,全链路UI培训,大数据培训,unity游戏开发,软件测试,PHP,互联网营 </p> <p> 千锋教育_国内IT职业教育良心品牌,专注Java培训,HTML5+WEB前端培训,Python+人工智能培训,Linux云计算培训,全链路UI培训,大数据培训,unity游戏开发,软件测试,PHP,互联网营 </p> </div> </body> </html>
布局与选择器
- 空div容器的特点: 宽度默认100%,高度为0 - 当往空div容器添加内容的时候,容器会被撑起来 - 浏览器默认字体大小是: 16px 默认行高是: 21px - 文字的垂直居中效果:行高和高度相同即可 - 行内样式:写在标签 内部样式:写在<style> - 选择器 - ID选择器 - 类别选择器 - 标签选择器 - 通用选择器 - 案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #banner img { width: 100%; } #navigator { height: 80px; line-height: 80px; text-align: center; } #footer { height: 40px; line-height: 40px; text-align: center; background-color: #ddd; font-size: 14px; color: gray; } #navigator a { text-decoration: none; margin: 0 15px; } </style> </head> <body style="margin: 0"> <div id="banner"> <img src="desktop.png" alt=""> </div> <div id="navigator"> <a href="">链接一</a> <a href="">链接二</a> <a href="">链接三</a> <a href="">链接四</a> <a href="">链接五</a> <a href="">链接六</a> </div> <div id="footer"> 版权所有,翻倍必究 </div> </body> </html>
中间导航链接示例
- 基础示例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #navigation { text-align: center; } #navigation a { text-decoration: none; color:black; } </style> </head> <body> <div id="navigation"> <a href="" class="item">链接一</a> # 利用<span>添加'|'简单粗暴 <span>|</span> <a href="" class="item">链接二</a> <span>|</span> <a href="" class="item">链接三</a> <span>|</span> <a href="" class="item">链接四</a> <span>|</span> <a href="" class="item">链接五</a> <span>|</span> <a href="" class="item">链接六</a> </div> <script> </script> </body> </html> - 改进示例一 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #navigation { text-align: center; } #navigation a { text-decoration: none; color: black; border-right: solid 1px black; # 利用右边框添加'|' padding: 0 15px; } </style> </head> <body> <div id="navigation"> <a href="" class="item">链接一</a> <a href="" class="item">链接二</a> <a href="" class="item">链接三</a> <a href="" class="item">链接四</a> <a href="" class="item">链接五</a> # 注意消除末尾的'|' <a href="" class="item" style="border: none">链接六</a> </div> <script> </script> </body> </html> 改进示例二:增加class类别属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #navigation { text-align: center; } #navigation a { text-decoration: none; color: black; border-right: solid 1px black; padding: 0 15px; } #navigation .last { # 改进之处 border: none; } </style> </head> <body> <div id="navigation"> <a href="" class="item">链接一</a> <a href="" class="item">链接二</a> <a href="" class="item">链接三</a> <a href="" class="item">链接四</a> <a href="" class="item">链接五</a> <a href="" class="item last" style="border: none">链接六</a> </div> <script> </script> </body> </html>
css 权重
- 权重顺序.权重计算 - 行内样式(1000) > ID选择器(100) >类选择器(10) >标签选择器(1) > 通用选择器(0) - 选择器选择的范围越小越精确,优先级就越高 - 示例一 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #p1 { color: blue; } *{ color: orange; } .pp { color: green; } p { color: red; } </style> </head> <body> <p class="pp" id="p1" style="color: slateblue"> # 权重最大 猜猜我是什么颜色 </p> </body> </html> - 示例二 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #news { list-style: none; width: 370px; } #news li{ height: 40px; line-height: 40px; border-bottom: dashed 1px purple; } #news li a { color: gray; text-decoration: none; } #news .last { # 这里若写成'last'是没有效果的 border: none; } </style> </head> <body> <ul id="news"> <li><a href="">新闻一号</a></li> <li><a href="">新闻二号</a></li> <li><a href="">新闻三号</a></li> <li><a href="">新闻四号</a></li> <li><a href="">新闻五号</a></li> <li class="last"><a href="">新闻六号</a></li> </ul> </body> </html>
css文本属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .p1 { color: red; /* 字体颜色 */ } .p2 { font-family: 华文行楷; /* 字体 */ } .p3 { font-size: 26px; /* 文字大小默认16px */ } .p4 { font-weight: bold; /* 字体加粗 */ } .p5 { font-style: italic; /* 斜体效果 */ } .p6 { text-indent: 60px; /* 首行缩进 这种效果也可以使用 margin-left 来做*/ } .p7 { text-align: center; /* 居中 */ } .p8 { line-height: 180px; /* 行高 */ } .p9 { height: 100px; background-color: gray; /* 水平方向上垂直居中 */ line-height: 100px; } .p10 { text-decoration: underline; /* 下划线 */ } </style> </head> <body> <ul> <li class="p1">文字效果一</li> <li class="p2">文字效果二</li> <li class="p3">文字效果三</li> <li class="p4">文字效果四</li> <li class="p5">文字效果五</li> <li class="p6">文字效果六</li> <li class="p7">文字效果七</li> <li class="p8">文字效果八</li> <li class="p9">文字效果九</li> <li class="p10">文字效果十</li> </ul> </body> </html>
背景图的使用
- 元素宽高的百分比,是相对于父元素而言,若父元素高度为0 即使子元素高度100%,大小也是0 html元素大小是相对与浏览器窗口而言 - 实例:检查<body>元素,是没有高度的 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { height: 100%; # 设置高度 } </style> </head> <body> </body> </html> - 此时,如何使<body>有高度呢,依据概念,父元素<html>设置高度即可 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> html,body { height: 100%; # html和body均设置高度 margin: 0; # 删除滚动条 } </style> </head> <body> </body> </html> - 背景图相关css属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> html,body { height: 100%; margin: 0; } body { # 背景图片默认'平铺'方式无限展开 background-image: url("mid-autumnday.jpg"); # 不重复平铺图片 background-repeat: no-repeat; # 图片的位置:左右 上下 # background-position: right bottom; 图片位于右下角 background-position: center center; } </style> </head> <body> </body> </html>
表格
- <table> 表示表格 - tr 表示'行' - td 表示'单元格'(支持嵌套标签,比如<p>) - 快速创建表格:包含两行两列,table>tr*2>td*2 - 单位:百分比,是相对父元素而言 - <body>的宽度是100%,但是高度是0,它的高度是依赖 内容 撑起来的 相当于,建高楼,地基(宽度)已打好,至于建多高,全靠你自己
表格的合并
- colspan: 要合并的'列数' - rowspan: 要合并的'行数' - 合并原则: 合并多少列/行,就要删掉被合并的列/行 - 实例:3行3列的改造 <table border="1" width="300"> <tr> <td>1</td> # 保持原样 <td colspan="2" rowspan="2">2</td> </tr> <tr> <td rowspan="2">4</td> </tr> <tr> <td colspan="2">8</td> </tr> </table>
版权声明：如无特殊说明，文章均为本站原创，转载请注明出处
本文链接：http://example.com/article/daily_css/
许可协议：署名-非商业性使用 4.0 国际许可协议
