第四节：样式介绍、背景样式

文章目录

- 第四节：样式介绍、背景样式
- - 1、CSS 简介
  - 2、创建CSS
  - 3、常用的样式
  - 4、CSS：backgrounds 背景
  - - 4.1、背景颜色
    - 4.2、背景图像
    - 4.3、平铺背景图片
    - 4.4、设定背景图位置
    - 4.5、固定背景图像
    - 4.6、设置背景图像大小
    - 4.7、背景图像的定位区域
    - 4.8、背景图像的绘画区域
    - 4.9、背景样式复合写法
    - 4.10、多张背景图样式

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" target="_blank" rel="external nofollow" >
</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;
	一般分样式 超过三个就用复合样式写

第四节：样式介绍、背景样式

第四节：样式介绍、背景样式

文章目录

1、CSS 简介

2、创建CSS

3、常用的样式

4、CSS：backgrounds 背景

4.1、背景颜色

4.2、背景图像

4.3、平铺背景图片

4.4、设定背景图位置

4.5、固定背景图像

4.6、设置背景图像大小

4.7、背景图像的定位区域

4.8、背景图像的绘画区域

4.9、背景样式复合写法

4.10、多张背景图样式

继续阅读

门户通专访草根站长九天狼：做站贵在坚持

如何成为一名.net 工程师?

[转]如何成长为一名全栈工程师全栈工程师

tabpanel 使用问题

为什么把CSS放头部，script放下面

underscore模板功能的使用和学习

CSS之折叠菜单

web开发之前后端渲染

DOM下元素 offset client scroll 相关属性简介

IE8 CSS设置DIV居中，添加“margin:0 auto”

403 Forbidden，You don't have permission to access / on this server.Forbidden

JavaScript的那些坑之事件代理事件代理事件阶段

ACS基本配置-权限等级管理

vue （vue2.0）使用总结(从大体结构总结)

父子组件间传值的实现父子组件间传值的实现

vue搭建过程及出现问题