11.2 CSS
CSS 的作用就是给 HTML 页面标签添加各种样式, 定义网页的显示效果. 简单一句话: CSS 将网页内容和显示样式进行分离, 提高了显示功能.
CSS 优点:
使数据和显示分开
降低网络流量
使整个网站视觉效果一致
使开发效率提高了 (耦合性降低, 一个人负责写 HTML, 一个人负责写 CSS)
11.2.1 导入方式
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <!-- 引入方式二: 内接引入 -->
- <style>
- div{ color: deepskyblue; }
- </style>
- <!-- 引入方式三: 外接样式_链接式: link 导入一个链接 *****-->
- <link rel="stylesheet" href="index.css">
- <!-- 引入方式四: 外接样式: style 导入一个 @import url("路径")-->
- <style>
- @import url("index.css");
- </style>
- </head>
- <body>
- <!-- 引入方式一: 行内引入 -->
- <div style="color: red;">
- 字体颜色设置
- </div>
- </body>
- </HTML>
- <!--css 基本设置 -->
- ?
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- div{ color: rebeccapurple; width: 200px; height: 400px; background-color:
- deepskyblue; }
- </style>
- </head>
- <body>
- <div>
- 最简单的基本样式
- </div>
- </body>
- </HTML>
11.2.2 选择器
基本选择器
1. 标签选择器
标签选择器可以选中所有的标签元素, 比如 div,ul,li ,p 等等, 不管标签藏的多深, 都能选中, 选中的是所有的, 而不是某一个
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- div{
- color: red;
- }
- span{
- color: blue;
- }
- a{
- color: green;
- }
- </style>
- </head>
- <body>
- <div>
标签选择器: div1 的颜色 /* red */
- <span>
- 标签选择器: div 中的 span 的颜色
- </span>
- /* blue */
- </div>
- <span>
- 标签选择器: 单独 span 的颜色
- </span>
- /* blue */
- <div>
标签选择器: div2 的颜色 /* red */
- <a href="http://www.baidu,com">
- 标签选择器: 链接的颜色
- </a>
- /* green */
- </div>
- </body>
- </HTML>
- ?
- ?
- /* 1. 子元素会继承父元素的的样式, 但是 a 标签除外
- 2. 要想对 a 标签进行设置, 必须直接找到 a 标签的位置, 对 a 单独设置
- 3. 样式之间的重叠部分是有优先级的, 继承下来的优先级为 0(最低)*/
2.id 选择器
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- #div1{
- color: purple;
- }
- </style>
- </head>
- <body>
- <div id="div1">
id 选择器: 有 id 的 div1 的颜色 /* purple */
- <span>
- id 选择器: div 中的 span 颜色
- </span>
- /* purple */
- </div>
- <div>
id 选择器: div2 的颜色
- </div>
- </body>
- </HTML>
3. 类选择器
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- .cl{
- color: orangered;
- }
- </style>
- </head>
- <body>
- <div>
类选择器: div1 的颜色
- <span class="cl">
- 类选择器: div1 中的 span 颜色
- </span>
- /* orangered */
- </div>
- <div>
类选择器: div2 的颜色
- <span class="cl">
- 类选择器: div2 中的 span 颜色
- </span>
- /* orangered */
- </div>
- </body>
- </HTML>
4. 通用选择器
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- *{
- color: yellow;
- }
- </style>
- </head>
- <body>
- <div>
通用选择器: div1 颜色 /* yellow */
- <span>
- 通用选择器: span 颜色
- </span>
- /* yellow */
- </div>
- <div>
通用选择器: div2 颜色 /* yellow */
- </div>
- </body>
- </HTML>
高级选择器
1. 后代 \ 子代选择器
后代选择器: 找的是子子孙孙, 全部都找出来.
子代选择器: 只找后面一代
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- /* 后代 */
- div span{
- color: tomato;
- }
- /* 子代 */
- div>span{
- color: tomato;
- }
- </style>
- </head>
- <body>
- <div>
我是 div 标签的 content
- <span > 后代 1: 西红柿色 </span> /* 后代变色 */ , /* 子代只有这个变色 */
- <p>
在 div-p 标签中
- <span > 后代 2: 西红柿色 </span> /* 后代变色 */
- </p>
- </div>
- <span > 我只是一个单纯的 span 标签 </span>
- </body>
- </HTML>
2. 毗邻 \ 弟弟选择器
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- /* 毗邻 */ span+a{ color: tomato; } /* 弟弟 */ span~a{ color: tomato; }
- </style>
- </head>
- <body>
- <div>
- <a>
- 我是 a0 标签
- </a>
- <span>
- span 标签
- </span>
- /* 如果这里还有一个非 a 标签, 毗邻. 下面不变色 */
- <a>
- 我是 a1 标签
- </a>
- /* 弟弟: 变色 */ , /* 毗邻: 变色 */
- <a>
- 我是 a2 标签
- </a>
- /* 弟弟: 变色 */
- </div>
- </body>
- </HTML>
3. 属性选择器
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- a[href]{ color: green; } a[href='http://www.taobao.com']{ color: lightpink;
- } input[type='text']{ background-color: lightblue; }
- </style>
- </head>
- <body>
- <div>
- <a href="http://www.taobao.com">
- 我是 a0 标签
- </a>
- /* 属性: href 变色 */ /* 属性: href 有网址的变色 */
- <span>
- span 标签
- </span>
- <a href="http://www.jd.com">
- 我是 a1 标签
- </a>
- /* 属性: href 变色 */
- <a href="http://www.mi.com">
- 我是 a2 标签
- </a>
- /* 属性: href 变色 */
- <a>
- 没有 href 属性
- </a>
- </div>
- <input type="text">
- /* 属性: type='texe'变色 */
- <input type="password">
- </body>
- </HTML>
4. 并集 \ 交集选择器
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- /* 并集选择器 */ ul,ol,span{ background-color: gainsboro; }
- </style>
- </head>
- <body>
- <ul>
- <li>
- u-first
- </li>
- /* 并集变色 */
- </ul>
- <ol>
- <li>
- o-first
- </li>
- /* 并集变色 */
- </ol>
- </body>
- </HTML>
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- /* 交集选择器 */ div.box1.box2{ background-color: red; width: 200px; height:
- 200px; }
- </style>
- </head>
- <body>
- <div class="box1 box2">
- box1box2
- </div>
- /* 交集: 变色 */
- <div class="box1">
- box1
- </div>
- <div>
- aaa
- </div>
- <span class="box1">
- span 标签
- </span>
- </body>
- </HTML>
5. 伪类选择器
a 专属 : link visited active
input 专属 : focus
通用 : hover
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- /* 链接点击之前的颜色 */ a:link{ color:tomato; } /* 链接点击之后的颜色 */ a:visited{ color:
- gray; } /* 点击时的颜色 */ a:active{ color: green; } /* 点击对话框的颜色 */ input:focus
- { background-color: aquamarine; } div{ width: 100px; height: 100px; background-color:
- lightgray; } /* 鼠标悬浮变色 */ div:hover{ background-color: pink; }
- </style>
- </head>
- <body>
- <a href="http://www.jd.com">
- 京东
- </a>
- <a href="http://www.xiaohuar.com">
- 校花
- </a>
- <input type="text">
- <div>
- </div>
- </body>
- </HTML>
6. 伪元素选择器
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- /* 第一个字变色 */ p:first-letter{ color: green; } /* 所选内容前面添加的内容: 变色 */ p:before{
- content: '**'; color: pink; } /* 所选内容后面添加的内容: 变色 */ p:after{ content: '.....';
- color: lightblue; }
- </style>
- </head>
- <body>
- <p>
- 春江水暖鸭先知
- </p>
- </body>
- </HTML>
7. 选择器的优先级
行内 > id 选择器 > 类选择器 > 标签选择器 > 继承
- 1000 100 10 1 0
- ?
所有的值可以累加但是不进位
相同优先级的放在后面的生效
!important 提高样式的优先级到最高
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- div{ width: 200px; height: 200px; background-color: lavender; } div#AA{
- background-color: red; } div.aa{ background-color: green; } div.aa.bb{
- background-color: yellow; } div#BB{ background-color: pink; }
- </style>
- </head>
- <body>
- <div>
- 普通的 div
- </div>
- /* lavender */
- <div id="AA">
- 有一个 id 的 div
- </div>
- /* red */
- <div class="aa">
- 有一个类的 div
- </div>
- /* green */
- <div class="aa bb">
- 有两个个类的 div
- </div>
- /* yellow */
- <div class="aa" id="BB">
- 有一个类并且有一个 id 的 div
- </div>
- /* pink */
- </body>
- </HTML>
11.2.3 颜色表示
rgb 表示法:
rgb:red green blue 光谱三原色
rgb(255,255,255) 白色
rgb(0,0,0) 黑色
?
16 进制的颜色表示法:
- #000000 - #ffffff
- #000 - #fff
- ?
单词表示法:
- red blue yellow
- ?
rgba 表示法:
a 表示透明度, 0-1,0 是完全透明, 1 是不透明
?
颜色对照表
https://htmlcolorcodes.com/zh/yanse-ming/
11.2.4 字体设置
属性 | 描述 | 属性值 | 说明 |
---|---|---|---|
font-size | 字体大小 | 50px | |
font-family | 字体系列 | "Microsoft Yahei","微软雅黑", "Arial", sans-serif | 浏览器使用它可识别的第一个值 |
font-weight | 字体粗细 | none bold border lighter 100~900 inherit | 默认值,标准粗细 < span class="md-br md-tag" ztid="244" ow="352" oh="47"> 粗体 < span class="md-br md-tag" ztid="246" ow="352" oh="47"> 更粗 < span class="md-br md-tag" ztid="248" ow="352" oh="47"> 更细 < span class="md-br md-tag" ztid="250" ow="352" oh="47"> 值,400=normal,700=bold 继承父元素字体的粗细值 |
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- p{ font-family: '楷体','宋体'; font-weight: bolder; font-size: 50px; }
- </style>
- </head>
- <body>
- <p>
- 字体设置
- </p>
- </body>
- </HTML>
11.2.5 文本设置
属性 | 描述 | 属性值 | 说明 |
---|---|---|---|
text-indent | 首行缩进 | 单位建议 em | |
text-align | 文本对齐方式 | none center left right justify | 默认 < span class="md-br md-tag" ztid="307" ow="184" oh="17" style="overflow: hidden; display: table; height: auto;"> 水平居中 < span class="md-br md-tag" ztid="309" ow="132" oh="17" style="overflow: hidden; display: table; height: auto;"> 左对齐 < span class="md-br md-tag" ztid="311" ow="92" oh="17"> 右对齐 < span class="md-br md-tag" ztid="313" ow="52" oh="17"> 两端对齐 |
text-decoration | 规定文本修饰的样式 | none underline overline line-through inherit | 默认 < span class="md-br md-tag" ztid="336" ow="316" oh="47"> 下划线 < span class="md-br md-tag" ztid="338" ow="316" oh="47"> 定义文本上的一条线 < span class="md-br md-tag" ztid="340" ow="316" oh="47"> 定义穿过文本下的一条线 < span class="md-br md-tag" ztid="342" ow="316" oh="47"> 继承父元素 text-decoration 属性的值 |
line-height * | 行高 | line-height: 200px; | 设置行高 = 容器高度, 文字自动垂直居中 |
text-shadow | 阴影 | 5px 5px 5px #FF0000 | 水平方向偏移量 / 垂直方向偏移量 / 模糊度 / 阴影颜色 |
text-overflow | 文字溢出 | clipellipsis | 修剪文本显示省略号代表被修剪文本 |
<!-- 文字溢出 -->
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- text-overflow
- </title>
- <style type="text/css">
- .div0 { width: 300px; border: 1px solid darkblue; } .div1 { width: 300px;
- border: 1px solid red; /* 强制在一行内显示 */ white-space: nowrap; /* 超出部分隐藏 */
- overflow: hidden; } .div2 { width: 300px; border: 1px solid black; /* 强制在一行内显示
- */ white-space: nowrap; /* 超出部分隐藏 */ overflow: hidden; /* 修剪超出的文本 */ text-overflow:
- clip; } .div3 { width: 300px; border: 1px solid chocolate; /* 强制在一行内显示
- */ white-space: nowrap; /* 超出部分隐藏 */ overflow: hidden; /* 显示省略符号来代表被修剪的文本
- */ text-overflow: ellipsis; }
- </style>
- </head>
- <body>
- <div class="div0">
- 各国领导人感谢中方作为东道主对各国参展给予的大力支持
- </div>
- <br>
- <div class="div1">
- 各国领导人感谢中方作为东道主对各国参展给予的大力支持
- </div>
- <br>
- <div class="div2">
- 各国领导人感谢中方作为东道主对各国参展给予的大力支持
- </div>
- <br>
- <div class="div3">
- 各国领导人感谢中方作为东道主对各国参展给予的大力支持
- </div>
- <br>
- </body>
- </HTML>
11.2.6 背景图片
background-repeat | 设置背景图像的平铺方式 |
---|---|
repeat | 默认。背景图像将在垂直方向和水平方向重复 |
repeat-x | 背景图像将在水平方向重复 |
repeat-y | 背景图像将在垂直方向重复 |
no-repeate | 背景图像将仅显示一次 |
background-position | 设置背景图像的起始位置 |
---|---|
100px 100px | 图片与左边 / 上边的边距 |
top / center / bottom | 垂直位置 : 上 / 中 / 下 |
left / center / right | 水平位置 : 左 / 中 / 右 |
background-size | 图片大小 |
background-attachment: fixed | 固定背景图片的位置, 页面滚动图片不会移动 |
background-image: url(xxx.jpg) | 背景图片 |
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- div{ width: 1000px; height: 1000px; background-color: deepskyblue; background-image:
- url(xjs.jpg); background-repeat: no-repeat; background-repeat: repeat-x;
- background-repeat: repeat-y; background-position: 100px 100px; background-position:
- center top; background-attachment: fixed; background: red url("xjs.jpg")
- no-repeat left center; /* 综合写法 */ }
- </style>
- </head>
- <body>
- <div>
- <p>
- 我是一个小僵尸
- </p>
- </div>
- </body>
- </HTML>
11.2.7 边框的设置
可分别设置四边的颜色, 粗细, 样式, 遵循上右下左的顺序
一个值: 上下左右
两个值: 遵循上下 / 左右
三个值: 上 / 右左 / 下
四个值: 遵循顺时针上右下左
border 的设置 | 解释 |
---|---|
border-color | 边框颜色 |
border-width | 边框粗细 |
border-style | 边框样式 |
border: color width style | 综合写法: 设置边框颜色, 粗细, 样式 |
border-radius | 设置圆角 |
11.2.8 块和行内的概念 / 转换
行内元素:
与其他行内元素并排;
对于行内标签来说不能设置宽和高, 默认的宽度, 就是文字的宽度
块级元素:
独占一行, 不能与其他任何元素并列;
能设置宽, 高. 如果不设置宽度, 那么宽度将默认变为父亲的 100%.
<!-- 有些时候需要行内标签也设置宽和高, 需要进行 行内 转 块, 行内 转 行内块 -->
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- div{ width: 100px; height: 100px; border-color: blue; border-width: 5px;
- border-style: solid double dotted dashed; border-top-color: orangered;
- border-top-style: solid; border-top-width: 3px; }
- </style>
- </head>
- <body>
- <div>
- </div>
- </body>
- </HTML>
display 的属性值 | 解释 |
---|---|
display: block; | 独占一行并且可以设置宽高 |
display: inline-block; | 既可以设置宽高又不会独占一行 行内 \ 块 转 行内快 |
display: inline; | 表示一个行内元素, 不能设置宽高 |
display: none; | 不仅不显示内容, 连位置也不占了 |
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- a{ /*display: block;*/ display: inline-block; /*width: 100px;*/ height:
- 20px; background-color: purple; text-align: center; line-height: 20px;
- text-decoration: none; } div{ display: inline-block; width: 50px; height:
- 50px; border-color: orangered; border-style: solid; } div.div{ display:
- none; width: 50px; height: 50px; border-color: blue; border-style: solid;
- }
- </style>
- </head>
- <body>
- <div class="div">
- </div>
- <div>
- </div>
- <a href="">
- a 标签 1
- </a>
- <a href="">
- a 标签 2
- </a>
- </body>
- </HTML>
11.2.9 盒模型
背景包含的部分: padding + content
盒模型大小计算: width/height + padding*2 + border*2
代码 | 解释 |
---|---|
margin | 外边距(盒子与盒子之间的距离) |
margin-left: auto | 表示靠左 |
margin-right: auto | 表示靠右 |
margin: 0 auto | 表示居中 (父 / 子盒子都要有宽度) |
padding | 内边距(内容框与边框的距离) |
- <!-- 注意 : 上下的盒子如果设置 bottom 和 top 会导致塌陷, 取两个设置的最大值作为外边距 -->
- <!-- 设置父盒子与子盒子的距离用 padding -->
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- div.box1{ width: 100px; height: 100px; background-color: red; border:
- solid purple 10px; padding: 20px; /*margin: 20px;*/ margin-bottom: 20px;
- } div.box2{ width: 100px; height: 100px; background-color: red; border:
- solid purple 10px; padding: 20px; }
- </style>
- </head>
- <body>
- <div class="box1">
- 盒模型大小计算: 宽 + padding*2+border*2
- </div>
- <div class="box2">
- 盒子 2
- </div>
- </body>
- </HTML>
<!-- 盒子模型例子 -- 三角形 -->
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- div{ width: 0; height: 0; border-color: red transparent transparent transparent;
- /* trandparent: 透明 */ border-width: 50px; border-style: solid; }
- </style>
- </head>
- <body>
- <div>
- </div>
- </body>
- </HTML>
11.2.10 浮动
float: | 表示浮动的意思 |
---|---|
float:none | 表示不浮动,默认 |
float:left | 表示左浮动 |
float:right | 表示右浮动 |
浮动的元素会脱离标准文档流, 原本块级元素就不再独占整行了, 并且在原页面中也不占位置了, 之后的元素会挤到页面上影响页面的排版
浮动的四大特性:
浮动的元素会脱离标准文档流
浮动的元素互相贴靠
浮动的元素有 "子围" 效果
收缩的效果:: 一个浮动元素. 如果没有设置 width, 那么就自动收缩为文字的宽度
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- div.main{
- height: 100px;
- background-color: darkgray;
- }
- div.box{
- width: 100px;
- height: 100px;
- border: solid red;
- background-color: yellow;
- float: right;
- }
- div.father{
- background-color: forestgreen;
- /*overflow: hidden;*/ /* 清除浮动二 BFC*/
- }
- /* .clear{ */ /* 清除浮动一 */
- /* clear: both; */
- /* } */
- /* 伪元素清除浮动 */
- .clearfix:after{
- content: '';
- clear: both;
- display: block;
- }
- </style>
- </head>
- <body>
- <div class="father clearfix">
- <div class="box"></div>
- <div class="box"></div>
- <!-- <div class="clear"></div>-->
- </div>
- <div class="main">
主页的内容
- </div>
- </body>
- </HTML>
11.2.11 定位
定位 | 功能 |
---|---|
position: relative | 相对定位 |
position: absolute | 绝对定位 |
position: fixed | 固定定位 |
相对定位: 相对自己原来的位置移动, 移动之后还占据原来的位置
绝对定位 : 绝对定位是相对于整个 HTML 页面, 不会占据原来的位置, 层级会提升. 如果设置了绝对定位的子元素的父元素没有设置 position, 那么子元素的所有设置都是基于整个页面. 如果设置了 position, 子元素的绝对定位会根据父元素的位置定位. 父相子绝: 子元素设置的绝对位置会对应着祖级元素的相对位置
固定定位 : 固定是相对于整个窗口的
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- div{ width: 100px; height: 100px; } .d{ width: 400px; height: 1000px;
- background-color: lavender; position: relative; left: 200px; } .d1{ background-color:
- red; } .d2{ background-color: yellow; position: absolute; left: 100px;
- } .d3{ background-color: green; } img{ position: fixed; right: 10px; bottom:
- 10px }
- </style>
- </head>
- <body>
- <div class="d">
- <div class="d1">
- </div>
- <div class="d2">
- </div>
- <div class="d3">
- </div>
- </div>
- <img src="xjs.jpg" alt="xiaojiangshi">
- </body>
- </HTML>
11.2.12 z-index
用法说明:
z-index 值表示谁压着谁, 数值大的压盖住数值小的,
只有定位了的元素, 才能有 z-index, 也就是说, 不管相对定位, 绝对定位, 固定定位, 都可以使用 z-index, 而浮动元素不能使用 z-index
z-index 值没有单位, 就是一个正整数, 默认的 z-index 值为 0 如果大家都没有 z-index 值, 或者 z-index 值一样, 那么谁写在 HTML 后面, 谁在上面压着别人, 定位了元素, 永远压住没有定位的元素.
从父现象: 父亲怂了, 儿子再牛逼也没用
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- .d1{ width: 100px; height: 100px; background-color: red; position: absolute;
- z-index: 10; } .d2{ width: 50px; height: 50px; background-color: blue;
- position: absolute; z-index: 5; }
- </style>
- </head>
- <body>
- <div class="d1">
- </div>
- <div class="d2">
- </div>
- </body>
- </HTML>
11.2.13 opacity
调整整个标签的透明度
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- div{
- opacity: 0.5;
- }
- </style>
- </head>
- <body>
- <div>
我只是一个小僵尸
- <img src="xjs.jpg" alt="小僵尸">
- </div>
- ?
- </body>
- </HTML>
11.2.14 overflow
overflow | 解释 |
---|---|
overflow: visible | 可见 (默认) |
overflow: hidden | 超出部分隐藏 |
overflow: scroll | 超出显示滚动条 |
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- div{ width: 100px; height: 100px; background-color: chartreuse; overflow:
- hidden; }
- </style>
- </head>
- <body>
- <div>
- <p>
- 23 期的学生都饿了想吃饭 非常想
- </p>
- <p>
- 23 期的学生都饿了想吃饭 非常想
- </p>
- <p>
- 23 期的学生都饿了想吃饭 非常想
- </p>
- <p>
- 23 期的学生都饿了想吃饭 非常想
- </p>
- </div>
- </body>
- </HTML>
<!-- 补充: -->
分方向的设置
位置 | 上 | 右 | 下 | 左 |
---|---|---|---|---|
边框 | border-top | border-right | border-bottom | border-left |
内边距 | padding-top | padding-right | padding-bottom | padding-left |
盒子 | margin-top | margin-right | margin-bottom | margin-left |
在 CSS 中去掉列表的样式
- ul,li{
- list-style: none;
- }
来源: http://www.bubuko.com/infodetail-3156999.html