第5章-css选择器初级和背景

一、ID选择器与Class选择器的区别

区别 1:ID选择器只能在文档中使用一次,.
class类选择器可以多次使用。
区别 2: id的权重大于class类的权重

二.background背景样式

1.background-color:规定要使用的背景颜色十六进制值  #CC0066      #000英文单词里颜色值  red  gray blue yellow Rgba 表达法   (css3) Hsla 表达法2.background-image:把图像设为背景图片url("地址")  引用背景图片的地址none  不使用背景图片3.background-repeat:规定如何重复背景图片repeat:默认。背景图像在水平和垂直方向均重复repeat-x:背景图片在水平方向重复repeat-y:背景图片在垂直方向重复no-repeat:背景图片只显示一次,不重复4.background-position:规定背景图片位置① 使用关键字:top、bottom、left、right 和 center两两组合而成     
ps:如果只出现一个关键字,则认为另一个关键字是 center②百分数值  (水平%   竖直%)background-position:20% 30%;

ps:如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为50%

③具体的值  (水平px   竖直px)
background-position:20px 30px;5.background-attachment:背景关联
scroll 滚动 
fixed 不动 
inherit 继承父级属性6.background-size:背景图片的大小background-size:600px 300px;
/*显示的是图片的真实大小*/
background-size:auto;
background-size:cover;(盖→图片有时会显示部分)
background-size:contain;(包含→图片会全部显示)√7.background:综合样式控制background: url("") red  no-repeat   2px  5px; 

(路径 背景颜色 重复 位置;)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/413670.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

POJ 4979 海贼王之伟大航路 【状压dp】【北大ACM/ICPC竞赛训练】

该死的题让我想起来艾斯之死... 首先想到dp(i)代表从1到【i表示的这些岛屿】所花的最小时间,然后每次枚举最后一个岛屿以此缩小范围,但发现枚举了最后一个岛屿后没有办法转移,因为不知道倒数第二个岛屿是什么,随着倒数第二个岛屿的…

[css] 举例说明BFC会与float元素相互覆盖吗?为什么?

[css] 举例说明BFC会与float元素相互覆盖吗?为什么? BFC的区域不会与float的元素区域重叠 计算BFC的高度时,浮动子元素也参与计算 BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然个…

Sublime Text 3 、WebStorm配置实时刷新

本文所用软件版本Sublime Text 3(Build 3143)、WebStorm 2017.2.4(Build #WS-172.4155.35)、Google Chrome v61.0.3163.100,其他版本软件配置过程可能不一样,请知悉! 一.Google Chrome安装LiveReload插件 1.下载插件 LiveReload 2.1.0 链…

#0 scrapy爬虫学习中遇到的坑记录

python 基础学习中对于scrapy的使用遇到了一些问题。 首先进行的是对Amazon.cn的检索结果页进行爬取,很顺利,无碍。 下一个目标是对baidu的搜索结果进行爬取 1,反爬虫 1.1 我先对ROBOTSTXT_OBEY进行设置,结果找到了scrapy的默认参…

[css] 使用css如何设置背景虚化?

[css] 使用css如何设置背景虚化? filter: blur(5px);个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

Sublime Text 3 、WebStorm配置护眼主题(浅绿色)

本文所用软件版本Sublime Text 3(Build 3143)、WebStorm 2017.2.4(Build #WS-172.4155.35),其他版本软件配置过程可能不一样,请知悉! 1.Sublime Text 3护眼主题 (1)下载配置文件 链接:http://pan.baidu.…

angular - 如何运行在起来 - 使用nginx

nginx下载地址,使用的是标准版的: 点击下载nginx nginx下载完后,解压 dist文件夹下面所有angular文件放入html文件夹中. 最后命令行cd到当前nginx.exe目录,启动命令:nginx 再配置一下conf文件夹下面的nginx.conf 再loc…

[css] 举例说明background-repeat的新属性值:round和space的作用是什么?

[css] 第 举例说明background-repeat的新属性值:round和space的作用是什么? space 背景图不会产生缩放,会被裁切 round 缩放背景图至容器大小(非等比例缩放)个人简介 我是歌谣,欢迎和大家一起交流前后端知…

Java学习资料汇总(JavaSE+JavaEE+数据库+框架+笔试题+面试题)

在写下这篇文章的时候,我还在找工作。理解每一个真正对编程感兴趣的小伙伴的转行不易,于是就把自己这几个月搜索到的学习资料一一分享给大家。 3.数据库 MySQL5.7 Reference Manual https://dev.mysql.com/doc/refman/5.7/en/ SQL中主键与外键的定义和…

2018 Multi-University Training Contest 1 Balanced Sequence(贪心)

题意: t组测试数据,每组数据有 n 个只由 ( 和 ) 构成的括号串。 要求把这 n 个串排序然后组成一个大的括号串,使得能够匹配的括号数最多。 如()()答案能够匹配的括号数是 4,(()) 也是 4。 例如: n 2 ) )(( 你可以将其…

[css] 举例说明with属性的fill-available有什么应用场景

[css] 举例说明with属性的fill-available有什么应用场景 一些 div 元素默认宽度 100% 父元素,这种充分利用可用空间的行为就称为 fill-available。个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎大家一…

第一部分 Java:面向对象理解

Java:面向对象理解、集合、IO、NIO、并发、反射源码分析 一.面向对象 1.创建对象的5种方式 (1)使用new关键字(2)使用Class类的newInstance方法(3)使用构造函数类的newInstance方法(4)使用clone方法 --》未实现Cloneable会报错(5)使用反序列化5动态代理2.this、sup…

[css] width属性的min-content和max-content有什么作用

[css] width属性的min-content和max-content有什么作用 max-content 在一个父元素上设置该元素后,元素的宽度会以子元素内最长的一个为准,子元素表现得会好像设置了white-space:nowrap一样一行展示min-content 在一个父元素上设置该元素后,子…

js拖拽

function drag(cla1,cla2,index){//鼠标可拖拽区域的dom,被拖拽的dom元素,索引var disX 0; //鼠标到dom元素左边距离var disY 0; //鼠标到dom元素上边距离var oDiv1 document.getElementsByClassName(cla1)[index];var oDiv2 document.getElementsByClassName(c…

[css] 你用过outline属性吗?它有什么运用场景

[css] 你用过outline属性吗?它有什么运用场景 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易&#x…

Centos7搭建Java环境,并设置项目自启动脚本、定时数据库备份/日志清理脚本

开发环境下载,提供nginx-1.12.2、jdk-8u162、Jenkins下载 建个文件夹,作为开发环境存放路径 cd /usr mkdir developmentEnvironment cd /一.java 1.解压包 tar -zxvf jdk-8u162-linux-x64.tar.gz -C /usr/developmentEnvironment2.配置环境变量 vi…

【nodejs】让nodejs像后端mvc框架(asp.net mvc)一样处理请求--参数自动映射篇(6/8)...

文章目录 前情概要 路由、action的扫描、发现、注册搞定之后,后来我发现在我们的action里面获取参数往往都是通过request对象来一个一个获取。同样的一行代码我们不厌其烦的重复写了无数次。遂想着那我们能不能像后端程序一样做得更自动化一些呢? 所以&a…

Java String常用的数据类型转换

工作写代码经常遇到string的数据类型转换,每次都去搜索如何转换很不方便。写篇博客做个总结,以后看这篇就好了。 1.string-bigDecimal 2.string-date Testpublic void StringToDate() throws ParseException {Date date new SimpleDateFormat("yy…

深度学习之Batch Normalization

1、Batch Normalization的引入 在机器学习领域有个很重要的假设:IID独立同分布假设,也就是假设训练数据和测试数据是满足相同分布的,这是通过训练数据获得的模型能够在测试集上获得好的效果的一个基本保障。在深度学习网络中,后一…

[css] 为什么说css的选择器一般不要超过三级?

[css] 为什么说css的选择器一般不要超过三级? CSS的解析过程,在解析选择器的时候,是从右向左,从上到下及逆行解析的。 超过三级会使的css解析树复杂度呈指数级增加,降低css加载性能个人简介 我是歌谣,欢迎…