CSS背景属性

设置背景颜色 background-color

background-color 不能继承,其默认值是 transparent。

设置背景图像 background-image

background-image 属性的默认值是 none,表示背景上没有放置任何图像。

如果需要设置一个背景图像,必须为这个属性设置一个URL值,例如

body {background-image::url(https://files.cnblogs.com/files/chinono/bg.bmp);}

设置背景重复 background-repeat

属性值repeat导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样,默认值为repeat,共有以下几种值:

  • repeat 默认。背景图像将在垂直方向和水平方向重复
  • repeat-x 背景图像将在水平方向重复
  • repeat-y 背景图像将在垂直方向重复
  • no-repeat 背景图像将仅显示一次
  • inherit 从父元素继承background-repeat属性的设置

设置背景定位 background-position

利用background-position属性改变图像在背景中的位置。关键字既可以是具体长度值(xx px),也可以是方位名词(center right left top botttom),也可以是百分比(xx%)。background-position 的默认值是 0% 0%,在功能上相当于 top left。而 50% 50%等价于图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐,即center center。

 background-position:66% 33%;
background-position:50px 100px;
background-position:top right;

设置背景关联 background-attachment

如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。通过 background-attachment 属性防止这种滚动,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响。

backgournd-attachment:fixed;

设置背景图片大小 background-size

规定背景图像的尺寸。有以下值:

  • 长度值 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
  • 百分比 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
  • cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

    背景图像的某些部分也许无法显示在背景定位区域中。
  • contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。最终图像会被包含在父元素中。

CSS三大特性

继承性

子元素会继承父元素部分属性。可继承的属性比如有字体类属性(字体颜色、字体大小之类的)、文本类属性(行高之类的)、背景类属性(背景颜色之类的)(要注意子标签不会继承父标签的宽度、高度、边距属性。)

层叠性

层叠性是指当一个标签被设置了多个重复的样式的时候,一个属性会覆盖另外一个属性。层叠性主要遵循的原则是就近原则,在不考虑优先级的情况下,在多个样式中最终生效的样式是离标签最近的样式。

优先级

当多个选择器选择同一个元素并设置相同属性时,会根据优先级来决定该元素的属性:

权重比较

选择器 权重值
一个标签选择器 0,0,0,1
一个类、伪类选择器 0,0,1,0
一个ID选择器 0,1,0,0
一个行内样式 1,0,0,0
!important
  • 权重之间无法进位,权重从左到右降低
  • 继承的权值为0!
  • 对于复合选择器,权值进行累加
选择器 权重值
div ul li 0,0,0,3
.nav ul li 0,0,1,2
a:hover 0,0,1,1
.nav a 0,0,1,1
#nav p 0,1,0,1

CSS盒子模型/框模型

CSS框模型(Box Model)规定了元素框处理元素内容、内边距、边框 和 外边距的方式。

经常使用以下声明来覆盖浏览器默认样式:


* {
margin: 0;
padding: 0;
}

内边距padding

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负值。注意在使用padding时若所在元素具有宽度,则会撑大盒子!

边框border

border属性允许你规定元素边框的样式、宽度和颜色。

  • border 简写属性,用于把针对四个边的属性设置在一个声明。
  • border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。常用键对值如下:
    1. none 定义无边框。
    2. hidden 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
    3. solid 定义实线。
    4. inherit 规定应该从父元素继承边框样式。
  • border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
  • border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。

外边距margin

围绕在元素边框的空白区域是外边距,设置外边距会在元素外创建额外的“空白”。注意外边框合并的情况,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。





只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

CSS概述(二)的更多相关文章

  1. 一、CSS概述 二、CSS的选择器(认识) 三、CSS样式和属性(练习) 四、重构商城首页DIV+CSS(页面布局)(重点) 浮动/更改显示方式

    一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...

  2. css概述二

    四.尺寸和边框 1.尺寸属性 ①作用 设置元素的宽度和高度 ②属性 width:宽度 max-width:最大宽度 min-width:最小宽度 height:高度 max-height: min-h ...

  3. xhtml和css概述

    Xhtml和css概述 1.html的过渡到xhtml html与xhtml不是两种语言,它们是一种语言的不同阶段,有点类似于文言文和白话文之间的关系.因为网络技术的日新月异,html的不断改进,所以 ...

  4. 前端总结·基础篇·CSS(二)视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  5. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...

  6. {MySQL数据库初识}一 数据库概述 二 MySQL介绍 三 MySQL的下载安装、简单应用及目录介绍 四 root用户密码设置及忘记密码的解决方案 五 修改字符集编码 六 初识sql语句

    MySQL数据库初识 MySQL数据库 本节目录 一 数据库概述 二 MySQL介绍 三 MySQL的下载安装.简单应用及目录介绍 四 root用户密码设置及忘记密码的解决方案 五 修改字符集编码 六 ...

  7. Unit02: CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明

    Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...

  8. 基本CSS布局二

    基本CSS布局二------基本页面布局二 /*主面板样式*/ #container { width:100%; margin:0px auto;/*主面板DIV居中*/ } /*顶部面板样式*/ # ...

  9. Web前端:1、HTML&CSS概述及结构

    万维网联盟(World Wide Web Consortium)简称W3C,专门为了定义网页相关的标准而成立,如网页中的HTML.CSS.DOM.HTTP.XML等标准. 根据W3C标准,一个网页主要 ...

  10. Javaweb学习笔记——(二)——————CSS概述,进入JavaScript

    day02day01内容回顾 1.html操作思想 **使用标签把要操作的数据包起来,通过修改标签的属性值来是实现标签内数据样式的变化 ***<font size="5"&g ...

随机推荐

  1. Python Ethical Hacking - MAC Address & How to Change(1)

    MAC ADDRESS Media Access Control Permanent Physical Unique Assigned by manufacturer WHY CHANGE THE M ...

  2. 尝鲜刚发布的 SpringFox 3.0.0,以前造的轮子可以不用了...

    最近 SpringFox 3.0.0 发布了,距离上一次大版本2.9.2足足有2年多时间了.可能看到这个名字,很多读者会有点陌生.但是,只要给大家看一下这两个依赖,你就知道了! <depende ...

  3. 五分钟带你深入了解Redis

    相信phper都知道Redis是什么,既然如此,为表仪式感,首先我还是得说说什么是Redis. Redis是什么 redis是一个高性能的key-value数据库,它是完全开源免费的,而且redis是 ...

  4. springboot(4)Druid作为项目数据源(添加监控)

    参考博客:恒宇少年:https://www.jianshu.com/p/e84e2709f383 Druid简介 Druid是一个关系型数据库连接池,它是阿里巴巴的一个开源项目.Druid支持所有JD ...

  5. php三元运算符?:和??

    1.(expr1) ? (expr2) : (expr3) 在 expr1 求值为 TRUE 时的值为 expr2,在 expr1 求值为 FALSE 时的值为 expr3. $a = (expr1) ...

  6. 常用核心数据库查询sql

    一.查询账户信息 -- 查询数据量 /*{"xdb_comment":"1","table":"mb_tran_hist" ...

  7. [转载]android网络通信解析

    原文地址:android网络通信解析作者:clunyes 网络编程的目的就是直接戒间接地通过网络协议不其他计算机进行通讯. 网络编程中有两个主要的问题, 一个是如何准确的定位网络上一台戒多台指主机: ...

  8. SpringBoot集成Dubbo+Zookeeper

    目录 Spring版本 dubbo_zookeeper负责定义接口 dubbo_provider 服务提供者 dubbo_consumer服务使用者 Spring版本 不知道为啥,新创建的Spring ...

  9. 使用 MySQLi 和 PDO 向 MySQL 插入多条数据

    PHP MySQL 插入多条数据 使用 MySQLi 和 PDO 向 MySQL 插入多条数据 mysqli_multi_query() 函数可用来执行多条SQL语句. 以下实例向 "MyG ...

  10. PHP atan2() 函数

    实例 通过 atan2() 函数返回两个变量的反正切: <?phpecho(atan2(0.50,0.50) . "<br>");echo(atan2(-0.50 ...