第三章.CSS重难点详解(下)

第十讲.继承

样式的继承:为一个元素设置的样式,同时也会应用到它的后代元素上

继承只会发生在后代元素身上!

继承的设计是为了方便开发,利用继承我们可以将通用的样式设置到统一的祖先元素上,这样我们只需要设置一次即可让我们的所有元素都具有该样式

并不是所有的样式都会被继承,比如:背景相关的,布局相关的都不会被继承

第十一讲.选择器优先级

当通过不同的选择器选中相同的元素,并且对相同的样式设置了不同的值时,此时就发生了样式的冲突

当发生样式冲突时,具体应用哪个样式由选择器的优先级决定

选择器优先级:内联样式1000>id选择器100>类和伪类选择器10>元素选择器1>通配选择器0>继承的样式(无优先级)

谁的优先级高就听谁的

交集选择器:比较优先级时,要将所有选择器的优先级相加计算,最后总和最高的,用它的样式

分组选择器:每个分组单独计算的

选择器的累加不会超过其最大数量级,即:类选择器的优先级再相加,也不会超过id选择器(种姓制度)

相同优先级发生冲突:则一次覆盖一次,最后一个生效

特殊字符: !important,则此时该样式会获取最高优先级,最最最重要,甚至超过了内联样式

<div>
	background-color:red !important;
</div>

不到万不得已不能用!!!

第十二讲.像素和百分比

两个属性:

1. width宽度
2. height高度

<div class='box1'>
	<div class='box2'> </div>
</div>

长度单位为像素(px)或百分比

• 像素:同样的200像素,在不同的电脑下显示的效果不同,因为显示器分辨率越高,像素点就越小.

  浏览器会自动对像素进行缩放,使显示的内容又清晰,人眼又能看到.

  .box1{
  	width:100px;
  	height:100px;
  	background-color:red;
  }
  

• 百分比:设置的是当前属性值相对于它父元素属性值的百分比

  .box2{
  	width:50%;
  	height:50%;
  	background-color:blue;
  }
  

百分比的好处在于:当父元素变大变小时,子元素可以随着父元素的改变而改变

第十三讲.em和rem

还有两种单位:em和rem:

1. em

   1em=1font-size,一个font-size默认16像素.

.box2{
	width:10em;
	height:10em;
}

2. rem:

   相对于根元素(html标签)的字体大小

   1rem=1font-size

第十四讲.RGB值

在css中可以直接使用颜色名来设置各种颜色:red,green等

但是有些颜色不能用语言描述.用RGB值

RGB值:通过三种颜色的不同浓度来调配出不同的颜色.每一种颜色的范围在0-255之间

也可以用百分数写,100%=255

语法:rgb(红色,绿色,蓝色)

.box1{
	background-color:rgb(255,0,0);
}

也可以增加一位:rgba(红色,绿色,蓝色,不透明度),不透明度0-1;

.box1{
	background-color:rgb(255,0,0,0.5);
}

第十五讲.HSL值

另一种表示颜色的方式:HSL值

H:色相(0-360),是一个色环,因此0=360

S:饱和度(0-100%),颜色的浓度

L:亮度(0-100%),颜色的亮度,0是关灯,为黑色

.box1{
	background-color:hsl(0,8%,50%);
}

第十六讲.文档流

文档流:也叫常规流

网页是一个多层的结构,一层叠一层.通过CSS可以分别为每一层设置样式.作为用户只能看到最顶层

这些层中最底层的称为文档流,文档流是网页的基础.

我们所创建的元素都默认是在文档流中进行排列

元素主要有两个状态,一个是在文档流中,一个是脱离文档流

元素在文档流中有什么特点:

1. 块元素(div)

   块元素独占一行

   自上向下垂直排列

   默认宽度是父元素的全部(将父元素充满)

   默认高度是被内容撑开(子元素)

2. 行内元素(span)

   不会独占一行,只占自身的大小

   自左向右水平排列

   当一行容纳不下所有的行内元素,则元素会换到第二行,继续自左向右排列

   默认宽度和高度都是被内容撑开