CSS基础6--背景样式及书写模式

2020-09-19 本文已影响0人伊洛的小屋

背景样式

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%