学习HTML5和CSS(六)之css背景与三大特性


**

CSS 背景(background)

**
CSS 可以添加背景颜色和背景图片,以及来进行图片设置。

background-color背景颜色
background-image背景图片地址
background-repeat是否平铺
background-position背景位置
background-attachment背景固定还是滚动
背景的合写(复合属性)
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

**

1.背景图片(image)

**
background-image 属性:
允许指定一个图片展示在背景中(只有CSS3才可以多背景)可以和 background-color 连用。 如果图片不重复地话,图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。

语法:

background-image : none | url (url) 

参数:

none :  无背景图(默认的)
url :  使用绝对或相对地址指定背景图像,不加引号

**

2.背景平铺(repeat)

**
语法:

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

参数:

repeat :  背景图像在纵向和横向上平铺(默认的)

no-repeat :  背景图像不平铺

repeat-x :  背景图像在横向上平铺

repeat-y :  背景图像在纵向平铺

**

3.背景位置(position)

**
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为:(0% 0%)。
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

语法:

background-position : length || length

background-position : position || position 

参数:

length :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position :  top | center | bottom | left | center | right

**

4. 背景附着

**
设置或检索背景图像是随对象内容滚动还是固定的。

语法:

background-attachment : scroll | fixed 

参数:

scroll :  背景图像是随对象内容滚动
fixed :  背景图像固定

**

5.背景简写

**
background属性的值的书写顺序官方并没有强制标准的。为了可读性,建议大家如下写:

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

**

6.背景透明(CSS3)

**
CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度 取值范围 0~1之间

**

7.背景缩放(CSS3)

**
通过background-size设置背景图片的尺寸,就像我们设置img的尺寸一样。
其参数设置如下:

a) 可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)

b) 设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');
			background-size: 300px 100px;
			/* background-size: contain; */
			/* background-size

**

8.多背景(CSS3)

**
以逗号分隔可以设置多背景,可用于自适应布局 做法就是 用逗号隔开就好了。

  • 一个元素可以设置多重背景图像。
  • 每组属性间使用逗号分隔。
  • 如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。
  • 为了避免背景色将图像盖住,背景色通常都定义在最后一组上,
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
	   	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
	       url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

**

9.凹凸文字

**
在这里插入图片描述
效果实现代码如下:

        <meta charset="utf-8">
        <style>
        body {
        	background-color: #ccc;
        }
		div {
			color: #ccc;
			font: 700 80px "微软雅黑";
		}
		div:first-child {
			/* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
			text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
		}
		div:last-child {
			/* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
			text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
		}

        </style>
    </head>
    <body>
    <div>我是凸起的文字</div>
    <div>我是凹下的文字</div>
    </body>

**

10.导航栏案例

**

文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

描述
none默认。定义标准的文本。
underline定义文本下的一条线。下划线 也是我们链接自带的
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。

**

CSS三大特性

**
层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。

**

1. CSS层叠性

**
所谓层叠性是指多种CSS样式的叠加

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉。

比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突

一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准。

(1)样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式;
(2)样式不冲突,不会层叠;

**

2.CSS继承性

**
所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。

**

3.CSS优先级

**

定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。

在考虑权重时,初学者还需要注意一些特殊的情况,具体如下:

继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。

权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。

CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。

总结优先级:

  1. 使用了 !important声明的规则。
  2. 内嵌在 HTML 元素的 style属性里面的声明。
  3. 使用了 ID 选择器的规则。
  4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
  5. 使用了元素选择器的规则。
  6. 只包含一个通用选择器的规则。
  7. 同一类选择器则遵循就近原则。
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vc++全版本组件大全 VC++运行时(Visual C++ Runtime)是VC++开发环境用于支持C和C++程序运行的基础库集合。这些库包含了执行C/C++程序所必需的基本函数和数据结构,例如内存管理、字符串操作、输入输出处理、异常处理等。VC++运行时库分为静态库和动态库两种形式,以适应不同类型的项目需求。 静态链接库 vs 动态链接库 静态链接库(Static Linking Libraries):在编译时,静态库的代码会被直接嵌入到最终生成的可执行文件。这意味着每个使用静态库的程序都会包含库代码的一个副本,导致最终程序的体积较大,但不需要外部库文件支持即可独立运行。在VC++,静态链接库的例子有LIBC.lib(用于单线程程序)和LIBCMT.lib(用于多线程程序)。 动态链接库(Dynamic Link Libraries):与静态链接相反,动态库的代码并不直接加入到应用程序,而是在程序运行时被加载。这使得多个程序可以共享同一份库代码,节省了系统资源。VC++的动态运行时库主要通过msvcrt.dll(或其变体,如MSVCRTD.dll用于调试版本)实现,与之配套的导入库(Import Library)如CRTDLL.lib用于链接阶段。 运行时库的版本 VC++运行时库随着Visual Studio版本的更新而发展,每个版本都可能引入新的特性和优化,同时保持向后兼容性。例如,有VC++ 2005、2008、2010直至2019等多个版本的运行时库,每个版本都对应着特定的开发环境和Windows操作系统。 重要性 VC++运行时对于确保程序正确运行至关重要。当程序在没有安装相应运行时库的计算机上执行时,可能会遇到因缺失DLL文件(如MSVCP*.dll, VCRUNTIME*.dll等)而导致的错误。因此,开发完成后,通常需要分发相应的VC++ Redistributable Packages给最终用户安装,以确保程序能够在目标系统上顺利运行。 安装与部署 安装VC++运行时库通常是通过Microsoft提供的Redistributable Packages完成的,这是一个简单的过程,用户只需运行安装程序即可自动安装所需组件。对于开发者而言,了解和管理不同版本的运行时库对于确保应用程序的广泛兼容性和可靠性是必要的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值