2022-07-10 第一小组 张明旭 前端CSS学习记录

今天是正式学习的第二天，昨天那个作业项目真的难，自己做一会就得问这问那，还有大神带一带（?_?）...

今天学习的内容是前端中的CSS，男上加男。。。。。

知识点：

Css层叠式表（网页美化）

1.定义样式表

2.把样式表添加到HTML中

一.定义样式表

1.每一个标签都有行内样式style：

行内样式好不好？

如果样式不重复使用可以用

例<p style=”background:red;“>...</p>

<!-- 行内样式，内联样式 -->
    <p style="background: rgb(0, 255, 85);">I love Java</p>
    <span style="background: rgb(0, 255, 85);">I love css</span>
    <h1 style="background: rgb(0, 255, 85);">i love html</h1>

2.内页样式（嵌入样式）

（1）：标签选择器

/* 根据标签来命名 */
        /* 选择器selector */
        /* 标签选择器：可以让页面上所有的p标签都有对应的样式 */
        p {
            background: red;
        }
        span {
            background: yellow;
        }

（2）：类选择器：声明样式需要一个英文的点： . ，属性用class不要有点

/* 类选择器 */
        /* 标签选择器和类选择器哪个优先级高？ */
        .bg {
            background: blue;
        }

（3）：ID选择器：声明样式需要一个#，对应的元素的id要匹配

/* id选择器 */
        #spring {
            background: purple;
        }

3.外部样式（推荐使用）

<!-- 引入外部的css样式 -->
    <link rel="stylesheet" href="你的CSS链接">

优先级：最高优先级是直接在标签中设置样式

其次是id选择器

其次是类选择器

最后是标签选择器

4.css选择器：

1、标签选择器

2、类选择器：一个标签元素可以选择多个样式，样式名中间空格隔开

3、id选择器

4、div,p{}:并级选择器：使页面上所有的标签div和p样式相同

div,p {
            color: yellow;
        }

5、div p{}：后代选择器：选中只要在div里的p，无论嵌套多少层的选择器

/* div里面的p */
       div p {
            color: purple;
        } 

6、div>p{}：子代选择器：选中只要在div里的p的选择器

div > p {
            color: orange;
        }

7、div+p{}：选中紧跟着div的p 的选择器

/* 选中紧跟着div的p */
        div+p {
            color: blue;
        }

8、[type]{}: 选中所有带有type属性的标签

9、[type=text]{}：选中页面上所有带type=text属性的标签

10、[type~=t]{}： 选中页面上title属性包含单词的所有元素

11、伪类选择器：link: hover: active: visited:

/* 默认样式 */
        a:link {
            color: red;
        }
        /* 鼠标悬停样式 */
        a:hover {
            color: green;
        }
        /* 元素被激活 */
        a:active {
            color: blue;
        }
        /* 点过的链接 */
        a:visited {
            color: gray;
        }

12、nth-child（）{}：选中第几个或一系列有规律的标签的选择器

让第3个序列变红

让表格的2n行变红

li:nth-child(3) {
            color: red;
        }
tr:nth-child(2n) {
            background: red;
        }

13、：checked：选中所有被选中的元素

二、css层叠样式表

1、层叠性：（1）如果样式冲突 ，遵循就近原则（那个样式离结构近用哪个）

（2）如果样式不冲突，就不层叠

2、继承性：子标签会继承父标签的某些样式。文本颜色、字号、背景颜色

优先级：类>标签>id>

权重（重要性）：（1）继承的样式权重最低

（2）行内样式权重最高

（3）如果权重相同，就近原则

（4）用！important更改权重为无限大

三、css常用的单位

1、px像素：绝对单位，一个像素代表一个点。如100px*100px的正方形，宽高为100个点

2、em是相对单位。它会参考它的父级元素，字体，父级元素的字体是16px，

要设置元素的字体大小为2em，当前元素的字体大小就是32px

3、rem是相对单位，有页面决定，当浏览器字体改变了字号设置，页面的字号也随之变化。应用于老人版

4、百分比：相对于父级元素的比例。