html入门基础（五）

最新推荐文章于 2021-06-16 15:04:16 发布

Pkuyzh

最新推荐文章于 2021-06-16 15:04:16 发布

阅读量256

点赞数

本文链接：https://blog.csdn.net/weixin_45615602/article/details/100888066

版权

2019.09.16

CSS三大特性

层叠性

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

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

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		
		div {
			color: skyblue;
			font-size: 12px;
		}

		div {
			color: hotpink;
		}
        </style>
    </head>
    <body>
    <div> 王可可 是一条狗 </div>  
    </body>
</html>

继承性

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		div {
			color: pink;
			font-size: 20px;
		}
		
        </style>
    </head>
    <body>
    <div>
    	<p>王思聪</p>
    </div>
    </body>
</html>

优先级

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
       /*  0， 0 ， 0 ， 0  特殊性公式 */
        
        div {  /* 标签选择器  0,0,0,1*/
          color: pink;
        }
        
        :first-child {  /* 伪类选择器 0,0,1,0 */
          color: green;
        }

        .king {  /* 类选择器  0,0,1,0 */
          color: blue;
        }

        #wang {  /* id选择器   0,1,0,0 */
          color: red;
        }

        /* 最大的  不是选择器 */

        div {
          color: orange!important;  /* important就是重要的  级别最高 一旦出现优先执行*/
        }
        </style>
   
    </head>
    <body>
    <div class="king" id="wang" style="color: skyblue"> 王者农药 </div>
    </body>
</html>

注意：

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

特殊性（Specificity）

specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值	∞ 无穷大

权重是可以叠加的
例：
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

注意：
1.数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况。
2.继承的权重是 0

重点

使用了 !important声明的规则。
内嵌在 HTML 元素的 style属性里面的声明。
使用了 ID 选择器的规则。
使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
使用了元素选择器的规则。
只包含一个通用选择器的规则。
同一类选择器则遵循就近原则。

盒子模型

盒子边框

border : border-width || border-style || border-color

关于边框属性（border-style）
none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线

关于表格细线边框

table{ border-collapse:collapse; }

collapse 单词是合并的意思

圆角边框

border-radius: 左上角  右上角  右下角  左下角;

内边距

关于padding的属性
padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

外边距

关于margin的属性
margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距右外边距下外边距左外边

取值顺序跟内边距相同。

外边距实现盒子居中的方法

可以让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素。
盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。
例：

.header{ width:960px; margin:0 auto;}

文字盒子居中图片和背景区别

文字水平居中是 text-align: center
盒子水平居中左右margin 改为 auto

例：

text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改为 auto 就阔以了 */

插入图片我们用的最多比如产品展示类
背景图片我们一般用于小图标背景或者超大背景图片

例：

section img {  
		width: 200px;/* 插入图片更改大小 width 和 height */
		height: 210px;
		margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
		margin-left: 50px; /* 插入当图片也是一个盒子 */
	}

aside {
		width: 400px;
		height: 400px;
		border: 1px solid purple;
		background: #fff url(images/sun.jpg) no-repeat;
	
		background-size: 200px 210px; /*  背景图片更改大小只能用 background-size */
		background-position: 30px 50px; /* 背景图片更该位置 我用 background-position */
	}

清除元素的默认内外边距

* {   padding:0;         /* 清除内边距 */  
      margin:0;          /* 清除外边距 */
  }

Pkuyzh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html入门基础（五）

2019.09.16CSS三大特性层叠性是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。样式不冲突，不会层叠<!DOCTYPE html><h...
复制链接

扫一扫