第四节：样式介绍、背景样式
文章目录
1、CSS 简介
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。通过使用 CSS 我们可以大大提升网页开发的工作效率！在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局,CSS3 现在已被大部分现代浏览器支持。
什么是CSS:
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
CSS 语法：
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
h1{border:1px solid red;}选择器是指向需要改变样式的HTML元素，每条声明由属性和一个属性值组成，属性时你希望设置的样式属性，每个属性值有一个值，属性和是被冒号分开。CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:例如：
p{color:red;border:1px solid red;}CSS 注释：
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。CSS注释以 /* 开始, 以 */ 结束.
例如:
/*p标签样式*/ p{ text-align:center; /*设置字体颜色*/ color:black; font-family:arial; }
2、创建CSS
当浏览器读到一个样式表时，浏览器会根据它来格式化 HTML 文档。
插入样式
- 外部样式表
- 内部样式表
- 内联样式表（行内样式）
外部样式
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
chapter.html <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> style.css *{margin:0;padding:0;} html,body{width:100vw;height:100vh;} .wrap{background-color:pink;}内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
3、常用的样式
一般常用的样式主要有：背景样式
background文本样式text、字体样式fonts、链接样式link、列表样式ul ol、表格样式table、盒子模型box、边框样式border、轮廓outline、外边距margin、内边距padding、分组嵌套、尺寸dimension、显示display、定位position、内容溢出overflow、浮动float、对齐、伪类、伪元素、导航栏、下拉菜单、提示工具、图片轮廓、图片透明度、图像拼合技术、媒体类型、属性选择器、表单、计算器、网页布局、！important 。
4、CSS：backgrounds 背景
CSS 背景属性用于定义HTML元素背景效果。
| 属性 | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
| background-size | 指定背景图像大小 |
| background-origin | 指定背景图像的定位区域 |
| background-clip | 指定背景图像的绘制区域 |
4.1、背景颜色
background-color属性设置元素的背景颜色。/* class 选择器中wrap元素设置背景颜色 */ .wrap { width: 100vw; height: 100vh; background-color: red; /* CSS中，颜色值通常以以下方式定义: 十六进制 - 如："#ff0000"(三元素组合) FF 00 00 红 绿 蓝 RGB - 如："rgb(255,0,0)" 颜色名称 - 如："red" */ } 设置背景颜色属性值的四种设置方式： background-color: red; background-color: rgb(255,0,0); background-color: #ff0000; background-color: rgba(255,0,0,0.1);
4.2、背景图像
background-image属性设置元素背景图片/* class 选择器中wrap元素设置背景图片 */ .wrap { width: 100vw; height: 100vh; /* 设置背景图像 */ background-image: url('./img/16.jpg'); } /* background-image 属性值： url('图片的路劲【相对路劲或绝对路劲】') */
4.3、平铺背景图片
background-repeat属性设置元素背景图平铺方向/* class 选择器中wrap元素设置背景图片平铺方向 */ .wrap { width: 100vw; height: 100vh; /* 设置背景图像 */ background-image: url('./img/16.jpg'); /* 设置背景图像平铺 */ background-repeat: no-repeat; } /* background-repeat 属性值 repeat-x; 向 x 轴方向平铺 repeat-y; 向 y 轴方向平铺 no-repeat; 设定位置不平铺 */
4.4、设定背景图位置
background-position属性设置背景图像在元素中位置/* class 选择器中wrap元素设置背景图片在元素中的位置 */ .wrap { width: 100vw; height: 100vh; /* 设置背景图像 */ background-image: url('./img/16.jpg'); /* 设置背景图像平铺 */ background-repeat: no-repeat; /* 设置背景图像的位置 */ background-position: 50px 10px; } /* background-position 属性值 center、top、left、right、bottom 5个方向中两个组合 如：background-position: top center;/ background-position: bottom center;等 像素：当属性值有一个值时 表示距离左边有 ${x} 像素 如：background-position: 100px; 像素：当属性值有两个值时 表示据左边有 ${x} 像素 右边 ${x} 像素 如：background-position: 100px 50px; 距离左边 100px 距离顶部 50px */
4.5、固定背景图像
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。/* 固定背景图像 */ .wrap { width: 100vw; height: 100vh; /* 设置背景图像 */ background-image: url('./img/16.jpg'); /* 设置背景图像平铺 */ background-repeat: no-repeat; /* 设置背景图像的位置 */ background-position: 50px 10px; /* 设置背景图像定位 */ background-attachment: fixed; } /* background-attachment 属性值 scroll 背景图片随着页面的滚动而滚动，这是默认的。 fixed 背景图片不会随着页面的滚动而滚动。 local 背景图片会随着元素内容的滚动而滚动。 initial 设置该属性的默认值。 阅读关于 initial 内容 inherit 指定 background-attachment 的设置应该从父元素继承。 */
4.6、设置背景图像大小
background-size设置元素图像大小/* 设置背景图像大小 */ .wrap { width: 100vw; height: 100vh; /* 设置背景图像 */ background-image: url('./img/16.jpg'); /* 设置背景图像平铺 */ background-repeat: no-repeat; /* 设置背景图像大小 */ background-size: 100% 100%; /* 设置背景图像的位置 */ background-position: 50px 10px; /* 设置背景图像定位 */ background-attachment: fixed; } /* background-size: 属性值 length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动) percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)" cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 */
4.7、背景图像的定位区域
background-Origin属性指定background-position属性应该是相对位置。/* 指定背景图像定位区域 */ .wrap { width: 100vw; height: 100vh; /* 设置背景图像 */ background-image: url('./img/16.jpg'); /* 设置背景图像平铺 */ background-repeat: no-repeat; /* 设置背景图像的位置 */ background-position: 50px 10px; /* 设置背景图像定位 */ background-attachment: fixed; /* 设置背景图像大小 */ background-size: 100% 100%; /* 指定背景图像定位区域 */ background-origin: padding-box; } /* background-origin 属性值 padding-box 背景图像填充框的相对位置 border-box 背景图像边界框的相对位置 content-box 背景图像的相对位置的内容框 */
4.8、背景图像的绘画区域
background-clip属性指定背景绘制区域。/* 指定背景绘制区域 */ .wrap { width: 100vw; height: 100vh; /* 设置背景图像 */ background-image: url('./img/16.jpg'); /* 设置背景图像平铺 */ background-repeat: no-repeat; /* 设置背景图像的位置 */ background-position: 50px 10px; /* 设置背景图像定位 */ background-attachment: fixed; /* 设置背景图像大小 */ background-size: 100% 100%; /* 指定背景图像定位区域 */ background-origin: padding-box; /* 指定背景绘制区域 */ background-clip: border-box; } /* background-clip 属性值 border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。 padding-box 背景绘制在衬距方框内（剪切成衬距方框）。 content-box 背景绘制在内容方框内（剪切成内容方框）。 */
4.9、背景样式复合写法
background背景样式简写/* bankground 背景样式简写 */ .wrap { background: url('./img/16.jpg') no-repeat fixed center; } /* background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit; background 属性值 background-color 指定要使用的背景颜色 background-image 指定要使用的一个或多个背景图像 background-position 指定背景图像的位置 background-size 指定背景图片的大小 background-repeat 指定如何重复背景图像 background-origin 指定背景图像的定位区域 background-clip 指定背景图像的绘画区域 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 background-image 指定要使用的一个或多个背景图像 */
4.10、多张背景图样式
background属性设置多张图纸样式。/* bankground 背景样式简写 */ .wrap { background:url('./img/16.jpg') no-repeat 100px/100px 100px,url('./img/01.jpg') no-repeat; } /* background 属性值 复合属性值1，复合属性值2 */
总结：
颜色:
英文单词
rgb:red(红色) green(绿色) blue(蓝色)
取值范围:rgb(0,0,0)->rgb(255,255,255)
rgba:red(红色) green(绿色) blue(蓝色) opacity 透明度
a的取值范围0~1
0是完全透明 1就是不透明
十六进制:#000000~#ffffff
#aabbcc 简写 #abc
img 作为数据 后台时时更新的
背景图片 这一个是样式 保证不变的情况下 才是用
background-color 背景颜色
background-image:url('图片地址'); 背景图片
background-repeat 背景图片平铺
repeat 默认值 平铺
no-repeat 不平铺
background-repeat-x:no-repeat; 在x轴上不平铺,在y轴上平铺
background-repeat-y:no-repeat; 在y轴上不平铺,在x轴上平铺
background-repeat:repeat-x; 在x轴上平铺
background-repeat:repeat-y; 在y轴上平铺
background-size 背景图片的大小
一个值 默认是 背景图片的宽度 另一边会同等比例去变化
两个值 背景图片宽度 背景图片高度
cover 图片等比例缩放 直到刚好覆盖背景区域
contain 图片等比例缩放 只要有一边触碰到边框就停止
background-position 背景位置
一个值 是左右位置 在上下居中
center 背景图片居中
两个值 第一个值 左边距离
第二个值 上边距离
背景位置百分数 是背景大小的百分数位置和背景图片百分数位置重合
background-origin 背景图片基点
图片从什么位置开始排列
默认情况下:
1)背景平铺 基点在边框线外边缘开始
2)背景不平铺 基点在边框线内边缘开始
content-box (内容盒子)
1)背景不平铺 基点在内容边缘开始 就是盒子实际宽高部分
padding-box (内边距盒子)
2)背景不平铺 基点在内边距开始 默认情况下
border-box(边框盒子)
3)背景不平铺 基点在边框线外边缘开始
background-clip 背景图片裁剪
哪一个盒子区域显示部分背景图片
1) content-box 内容盒子区域
2) padding-box 内边距盒子区域
3) border-box 边框盒子区域
background-attachment
背景图片关联
fixed 固定背景图片
overflow 溢出
hidden 隐藏
scroll 滚动条
auto 自适应 内容超出出现滚动条 内容不超出就没有
背景样式复合写法
background:color url() repeat position/size attachment;
一般分样式 超过三个就用复合样式写
本文含有隐藏内容，请 开通VIP 后查看