背景样式
background-color属性定义了CSS中任何元素的背景颜色，属性接受任何效果的color值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信搜索：伊洛的小屋</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box">
<h2>背景颜色</h2>
<p>变化背景的颜色 <span>颜色</span>。</p>
</div>
</body>
</html>
编辑CSS
.box {
background-color: cornflowerblue;
}
h2 {
background-color: darkviolet;
color: white;
}
span {
background-color: rgba(255,255,255,.5);
}
打开浏览器
背景图片
background-image 在元素的背景中显示图像
- no-repeat — 不重复
- repeat-x —水平重复
- repeat-y —垂直重复
- repeat — 在两个方向重复
调整背景图像大小
background-size设置长度或百分比值来调整图片的大小
cover 浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比
contain 浏览器将使图像的大小适合盒子内
背景附加
background-attachment： 内容滚动
- scroll: 使元素的背景在页面滚动时滚动。
- fixed: 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。
- local: 局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。
书写模式
指的是文本的排列方向是横向还是纵向的，需要使用writing-mode属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信搜索：伊洛的小屋</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>微信搜索 伊洛的小屋</h1>
</body>
</html>
编写CSS样式
h1 {
writing-mode: vertical-rl;
}
horizontal-tb: 块流向从上至下。对应的文本方向是横向的
vertical-rl: 块流向从右向左。对应的文本方向是纵向的
vertical-lr: 块流向从左向右。对应的文本方向是纵向的
溢出
溢出是在你往盒子里面塞太多东西的时候发生的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信搜索：伊洛的小屋</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="word">微信搜索：伊洛的小屋 </div>
</body>
</html>
CSS
.word {
border: 1px solid #333333;
width: 10px;
font-size: 250%;
}
CSS就不会隐藏的内容，隐藏引起的数据损失通常会造成困扰
控制溢出
需要使用overflow属性，overflow: hidden意思就是可以隐藏掉溢出
CSS的值
长度
cm 厘米
mm 毫米
Q 四分之一毫米
in 英寸
pc 十二点活字
pt 点
px 像素
相对长度单位
em font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width
ex 字符“x”的高度
ch 数字“0”的宽度
rem 根元素的字体大小
lh 元素的line-height
vw 视窗宽度的1%
vh 视窗高度的1%
vmin 视窗较小尺寸的1%
vmax 视图大尺寸的1%
网友评论