CSS笔记04

最新推荐文章于 2024-09-19 21:29:38 发布

L-XV

最新推荐文章于 2024-09-19 21:29:38 发布

阅读量146

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_41258463/article/details/101033520

版权

HTML5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了CSS背景属性，包括背景图片、平铺、位置、附着和透明度，以及凹凸文字和文本装饰。同时，文章还探讨了CSS的三大特性：层叠性、继承性和优先级，解释了样式层叠、继承规则和优先级计算的细节。

摘要由CSDN通过智能技术生成

CSS背景(background)

background属性如下表所示：

bacakground-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动

背景图片

语法：

background-image : none | url (url)

none : 　无背景图（默认的）
url : 　使用绝对或相对地址指定背景图像

背景平铺

语法：

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

参数：

repeat : 　背景图像在纵向和横向上平铺（默认的）
no-repeat : 　背景图像不平铺
repeat-x : 　背景图像在横向上平铺
repeat-y : 　背景图像在纵向平铺
设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。
repeat-x : 　背景图像在横向上平铺
repeat-y : 　背景图像在纵向平铺

背景位置

语法：

background-position : length || length

background-position : position || position

背景附着

语法：

background-attachment：scroll | fixed

背景透明

半透明语法格式：

background：rgba（0，0，0，0.3)

凹凸文字

<head>
        <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>

在这里插入图片描述

文本装饰

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

CSS三大特性

CSS层叠性

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

央视冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。
样式不冲突，不会层叠

CSS继承性

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

CSS优先级

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

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

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。