享受每一天,Just Enjoy !

0%

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

本文首发公众号: 伊洛的小屋,欢迎关注并查看更多内容!!!

背景样式

background-color属性定义了CSS中任何元素的背景颜色,属性接受任何效果的color值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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

1
2
3
4
5
6
7
8
9
10
11
.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属性
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!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样式
    1
    2
    3
    h1 {
    writing-mode: vertical-rl;
    }
    horizontal-tb: 块流向从上至下。对应的文本方向是横向的
    vertical-rl: 块流向从右向左。对应的文本方向是纵向的
    vertical-lr: 块流向从左向右。对应的文本方向是纵向的
    溢出
    溢出是在你往盒子里面塞太多东西的时候发生的
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!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
    1
    2
    3
    4
    5
    .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%

关注公众号获取更多内容