css笔记--2

Xayda~

已于 2023-07-09 23:39:13 修改

阅读量26

点赞数

文章标签： css 笔记前端

于 2023-07-09 23:38:27 首次发布

本文链接：https://blog.csdn.net/2303_78650625/article/details/131628072

版权

1.继承

1）样式的继承，为一个元素的设置样式的同时也会运用到其他的后代元素上。

2）继承元素发生在祖先元素和后代元素之间。

3）继承的设计是为了方便开发，利用继承可以将一些通用的样式设置到共同的祖先元素上，设置一次即可即可让所有的元素都具有该样式。

注意点：并不是所有的样式都具有继承性，比如：背景，布局相关这些不会被继承。

2.选择器的权重

1）样式的冲突，通过不同的选择器，选中相同的元素，为相同的样式选择不同的值时，因此发生了冲突。发生样式冲突时，应选择哪个样式选择器的权重（优先级）决定。

2）选择器的权重

内联样式 1000

id选择器 100

类和伪类选择器 10

元素选择器 1

通配选择器 0

继承的样式没有优先级

3）比较优先级时，需要对所有的优先级进行相加的计算，最后的优先级越高，则优先显示，分类选择器则进行单独计算。

<style>
        #box{
            background-color:rgb(16, 113, 198);
        }
        div#box{
           
            background-color: rgb(24, 218, 92);
        }
    </style>

4)选择器的累加不会超过最大的数量级，比如类选择器再高也不会超过id选择器，

5）如优先级计算相同，则优先使用靠下样式

6）可样式，在开发中要谨慎使用。

3.像素和百分比

3.1像素

1）屏幕（显示器）实际上是一个个小点点组成的。

2）不同屏幕的像素大小也不同

3）因此同样的400像素的不同设备显示的效果也不同。

3.2百分比

1）可以将属性值设置为相对父元素的百分比。

2）设置百分比可以使用元素跟随父元素的改变而改变。

4.em和rem

4.1 em

1)em是相对于元素的字体大小来计算的，

2）lem=1font-size （字体大小）

3）em会根据字体的大小而改变。

4.2 rem

rem是相对于根元素的字体大小来计算

5.RGB值

1）颜色单位，在css中可以直接使用颜色名来设置各种颜色，但不是很方便。

2）RGB值通过三种不同的颜色调出来不同颜色。

3）R-----red, G-----green, B-----blue,

4)每一种颜色的范围在0到255（0%——100%）之间。

5）语法：RGB(红，绿，蓝）

background-color：rgba(255,0,0);

6.RGBA

1）在RGBA的基础上增加了一个a表示不透明度。

2)需要的三个值，前三个值和RGB一样，第四个表示不透明度。

1——不透明； 0——透明； 5——半透明；

3)十六进制的RGB值：

语法：#红蓝绿

颜色浓度通过00-ff

如果颜色两两重复可以简写。

background-color：#ff0000;

7.HSL值

H——色相（0——360）

S——饱和度，颜色的浓度（0%——100%）

L——亮度，颜色的亮度（0%——100%）

background-color：hsl(0,100%,50%);

8.文档流

1）网页是多层次的结构，一层又一层，

2）通过css可以分别为每一层设置样式，

3)作为用户来看，只能看到最顶上一层。

4)这些层中，最底下的一层为文档流，文档流是网页的基础，

5）元素在文档流中：

块儿元素：

1>块儿元素在页面独占一行（上下垂直排列），

2>默认宽度是父类全部的元素，默认高度是所写的内容宽度。

行内元素：

1>行内元素不会独占页面的一行，只占自身的大小，行内元素在页面中从左向右水平排列，如果一行容不下且自动会换到第二行继续自左向右排列，

2>行内元素的默认高度和宽度是所写的内容宽度被撑开宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 150px;
            background-color:palevioletred;
        }
       .box2{
           width: 150px;
            background-color:orange;
        }
        span{
            background-color: red;
        }
    </style>
</head>
<body>
 <div class="box1"> xayda1</div> 
 <div class="box2"> xayda2</div> 
 <span>span1</span>
 <span>span2</span>
 <span>span3</span>
 <span>span4</span>
 <span>span5</span>
 <span>span6</span>
</body>
</html>

Xayda~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css笔记--2

1）样式的继承，为一个元素的设置样式的同时也会运用到其他的后代元素上。2）继承元素发生在祖先元素和后代元素之间。3）继承的设计是为了方便开发，利用继承可以将一些通用的样式设置到共同的祖先元素上，设置一次即可即可让所有的元素都具有该样式。注意点：并不是所有的样式都具有继承性，比如：背景，布局相关这些不会被继承。
复制链接

扫一扫