前端复习笔记3-css(1)

最新推荐文章于 2024-11-03 20:03:09 发布

Symonsss

最新推荐文章于 2024-11-03 20:03:09 发布

阅读量195

点赞数

分类专栏：前端学习笔记文章标签： html css

本文链接：https://blog.csdn.net/qq_37766026/article/details/106773047

版权

前端学习笔记专栏收录该内容

9 篇文章 1 订阅

订阅专栏

CSS

1、什么是css

css全称：cascading style sheet 就是层叠样式表的意思。

2、css的作用

CSS就是为了装饰我们的网页，让我们的网页看起来漂亮。
从语义的角度去描述网页的结构 html
从审美的角度去描述网页的样式 CSS
从交互的角度去描述网页的动效 JS

3、CSS如何去用

CSS由两部分组成：

选择器 + 属性

属性：

文本类

font-family：字体选择
font-size：  字体大小设置
color：      字体颜色
font-weight：字体粗细
font-style： 字体倾斜
text-align： 文字在盒子内水平方向
text-decoration：文字下划线设置
line-height：行高

背景类

background-color： 设置背景颜色
background-image： 设置背景图片

位置类

盒子模型
浮动
定位

4、选择器

①标签选择器

标签名{ 属性：属性值；}
标签选择器特点：选择页面上所有的这类型的标签。
这类选择器处理的是共性的问题，面对个性的问题的时候就显得没什么用了。

②id选择器

#id名{ 属性：属性值；}
id选择器的特点：因为id名是网页上独一无二的，所以，id选择器只能选择到一个标签。
它就是只能处理个性的问题。但是id选择器在CSS中用的很少，为了和JS区分。因为JS当中以后用的id很多。所以在CSS当中为了避免重复，很少用。

③类选择器class选择器

.类名{ 属性：属性值；}
一个标签可以拥有多个类，不同的标签也可以拥有相同的类，这就造成了类选择器非常实用。
它不但可以处理个性问题，还可以处理共性问题。
类选择器用到最后，我们要学会抽象公共类。
公共类是整个页面上公有的属性。比如页面上有很多个标签都是红色的，那么我们就要把这个红色给抽象出来。用一个类表示。在设计网页的时候，当写到有这个红色属性的标签时，同时就把这个类名给添加上。这就是公共类的用法。这样的做法，会让你省很多力。

④ 通配符选择器

*{ 属性：属性值；}
这个东西不常用，但是在我们教学期间会用很多。
通常情况下会用于CSS初始化。在实际项目中，要看公司允许不允许你这样用。

⑤并集选择器

选择器1，选择器2...{ 属性：属性值；}
选择器1选择到的标签和选择器2选择到的标签他们都会被添加上这个属性样式。也就是说选择器1选择到的标签和选择器2选择到的标签样式相同，我们就可以用并集选择器来去做。
实际开发当中真正的CSS初始化，用的就是并集选择器。
通配符选择器和并集选择器通常都会用来对CSS初始化，但是*的效率比并集选择器的效率低。因此实际开发当中用并集选择器来对CSS初始化。

⑥交集选择器

div.c1{
    color: red;
}

选择器1选择器2{ 属性：属性值；}
这个选择器说的是选择器1选择到的标签和选择器2选择到的标签之间的公共部分，会被添加属性。

⑦后代选择器

选择器1 选择器2{ 属性：属性值；}
选择器1下的选择器2所选择到的标签被添加属性样式。这个选择器叫做后代选择器。
后代选择器，选择的是选择器1的后代里面符合选择器2的标签。后代不但包含儿子辈也包含孙子辈，还包含所有的小辈。

⑧子代选择器

选择器1>选择器2{ 属性：属性值；}
选择器1的儿子里面符合选择器2的标签被添加属性样式。这个叫做子代选择器。
子代选择器和后代选择器很像，但是后代选择器选择的是选择器1所有的后代。而子代选择器选择的是选择器1的儿子一代，再往后选择不上。

5、CSS的性质

①css有继承性

css属性当中以 color font line text开头的属性具有继承性。
一个家族的祖先如果设置了这四个属性其中任意一个，那么它的这个属性会有继承性，也就是说它的所有的后代都会继承这个设置的属性。但是不允许中间有哪一代造反，如果中间有哪一代造反设置了相同的属性，但是属性值不一样，那么这一代和这一代之后的后代会继承造反的这一代。

②CSS有层叠性

CSS层叠性表现在两方面：

当多个选择器同时选择到相同的一个标签，并且给这个标签添加不同的属性，那么这些属性最终会叠加到这个标签上。
当多个选择器同时选择到相同的一个标签，并且给这个标签添加的属性如果相同，但是属性值不一样，接下来遵循以下规则：
- A 首先要计算这多个选择器的权值大小，如果这些选择器的权值各不相同，那么谁大最终听谁的。id选择器100 类选择器10 标签选择器1。
- B 如果计算的权值大小全部相同，那么要看顺序，谁离这个标签近就听谁的，也可以这么说，谁写在后面听谁的。
- C 如果我们在判断优先级时发现标签有行内样式，那么行内样式的权值是1000，优先级别最高。什么时候都会听行内的。
- D 我们在判断优先级时如果出现继承情况，继承的权值是0；

6、大小的表示单位

px是像素
% 百分比表示方式是一个相对单位，相对其父级元素
em 也是一个相对单位，相对的是父级元素的字体大小。

em在没有任何设置的情况下，1em=16px 当我们设置一个家族的字体，让祖先元素为1em，那么这个祖先元素字体大小就是默认的16px。接着，我们让这个祖先的儿子设置字体为2em，那么这个儿子的字体大小就是32px。现在这个儿子又有一个儿子去设置了字体为1em，现在这个em就不再是16px，而是相对父亲字体的大小，1em就变成了32px。因此呢，em单位如果用在家族的嵌套很多时候，会比较乱。
rem 是根据em改良而来的，它也是一个相对单位，相对的是跟元素的字体大小。

em家族嵌套多了会很乱，因为em的值是父级元素的字体大小，父级元素字体大小不确定，所以em的值就不确定。用多了em会乱，但是rem相对的就是html根元素的字体。无论嵌套多少，都是相对它的字体，因此rem的值是确定的，不会乱。

7、颜色值得表示方式

英文单词法：在实际项目中不常用，因为单词有局限。
RGB十进制表示法：rgb（red值，green值，blue值）

rgb十进制表示方式，每个值范围0~255；
RGB十六进制表示方法：#ffffff

前两个f表示r的值中间两个f表示g的值后面两个f表示b的值如果留个f相同可以简写成三个。这种表示方式是实际开发项目中应用最多的。
rgba带有透明度的颜色值表示法：color: rgba(128,128,128,0.1);

这个表示方法和rgb10进制表示法很像，就是多了一个数字，最后的a的数值可以从0~1,1代表不透明 0代表全透明。中间值代表半透明。一般都填写的是小数，半透明。