2022-07-10 吉林化工学院第一组韩嘉宁学习笔记（CSS篇）

2022/7/13 6:20:17

编程Tag： css 元素样式 div height 10 color 07 韩嘉宁

本文主要是介绍2022-07-10 吉林化工学院第一组韩嘉宁学习笔记（CSS篇），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

今天是在吉软学习（当然这里是真正的学习）的第二天，尽管昨日的知识刚刚接触时晦涩难懂但经过同学和大家的努力那些困难迎刃而解，但在日后还需多加练习主要是针对表单合并的一些应用。今日的有关CSS的知识相比较之下应用的还算熟练但有关盒子模型及定位的知识还需时间消化。

以下是有关CSS的主要知识点：

一、CSS样式（由声明块与选择器）：

声明由CSS属性与属性值组成如下图：

1.内嵌样式

<p style=background："red">

            内嵌样式

</p>

2.标签选择器

标签{

　　　　　　属性1：属性值1；

　　　　　　属性2：属性值2；

　　　　　　属性3：属性值3；

}

<style>
        div{    
                  background: red;      
        }
</style>

3.类选择器

.bg{
            background: yellowgreen;
        }

4.外部样式

链接样式是在HTML页面的<head></head>标记之间使用<link>标记引用一个外部的CSS样式表文件。

<link rel="stylesheet" href="css/my.css">

5.复合选择器（已掌握）

div，p：选中页面div 和 p

 div,p{
            color: blue;
        }

div p：选中div中的p，无论嵌套多少层都能找到

 div p{
            color:red;
        }

div > p:选中有父子关系的标签

div > p{
            color: bisque;
        }

div + p：选择紧跟在div（默认第一个）后面的p标签

注：（div 和 p 处于同一级）

div + p{
            color: blueviolet;
        }

6.伪类选择器（已掌握）

a ；link{

}

a ：hover{

}(鼠标悬停)

a:action{

　　}（元素被激活）

a:vistted.{

　　}(点过的链接)

nth-child(): 选中第几个筛选元素

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

二、CSS的三大特性：

1.CSS的层叠性（就近原则）

若样式冲突，遵循就近原则离结构较近则执行该样式

否则则不重叠。（这里离结构较近可理解为声明的先后）

2.继承性

子标签会继承父标签的某些样式

3.*权重：继承的样式权重为0（继承过来的样式是最不重要的，优先级最低）

行内样式权重最高

如果权重相同，继续就近原则

!important 可以改变权重，改成无限大（比行内样式还要大）

三、css常用的单位：

1.px像素（绝对单位一个像素代表一个点，如一个100px*100px的正方形，宽度100个点，高度100个点）

2.em（相对单位，它会参考它的父级元素。在字体上使用比较多，父级元素的字体是16px，要设置元素的字体大小为2em，当前元素的字体大小就是32px。

3.rem相对单位，由页面决定，当我们该百年来浏览器的页面设置，页面的字号也会随之发生变化。应用在老人版。

4.百分比，相对于父级元素的比例

字体大小：font-size:像素

字体样式：font-family：字体名字

行高：line-height：~~~px

粗细：font-weight：

字体下划线：text-decoration:underline/none

字体颜色：color：

*如果样式很多，每个样式后用；结尾

四、定位，浮动

position: absolute：绝对定位当前的文档流可以理解为飘起来了，参照物是他的父级元素
relative:相对定位：参照物是已经定位的父级元素，占原有位置，不会上天，父相子绝
visibility：hidden：隐藏
overflow：溢出样式
scroll：滚动条

<style>
        body{
            height: 2000px;
        }
    .div1 {
        height: 300px;
        width: 300px;
        background-color: yellow;
        /* 定位：
            absolute：绝对定位
                当前的文档流可以理解为上天了,
                参照物是已经定位的父级元素
            relative：相对定位
                参照物是已经定位的父级元素
                占有原有位置，不会上天
            父相子绝
            static：文档流（默认）
            fixed：浮动
         */
        position: relative;
        left: 200px;
        top: 200px;
    }
    .div2{
        height: 100px;
        width: 800px;
        background-color: red;
        /* 定位：浮动，钉住了 */
        position: fixed;
    }
    .father {
        height: 600px;
        width: 600px;
        background-color: skyblue;
        position: relative;
        /* 元素隐藏 */
        /* visibility: hidden; */

    }
    .divimg {
        height: 200px;
        width: 200px;
        border: 5px red solid;
        /* 溢出样式
            hidden：隐藏
            scroll：滚动条
            visible：显示（默认）
        */
        overflow: auto;
    }
    </style>
</head>
<body>
    <div class="div2">我是div2</div>
    <div class="father">
        <div class="div1">我是div1</div>
        <div>哈哈</div>
    </div>
    <div class="divimg">
        <img src="img/123.png" alt="">
    </div>
</body>

五、盒子模型（理解但未掌握）

主要属性:

margin: 盒子与盒子之间的距离，即外边距

padding：文本距盒子边框之间的距离

border：指盒子边框距离

.div1 {
        /* 
            盒子模型：
            width、height：表示内容区的宽和高
            margin：外边距。元素距离上一个元素的位置
            padding：内边距。本元素内部空出的距离
            border：边框线
        */
        height: 300px;
        width: 300px;
        background-color: yellow;
        padding: 50px;
        /* margin-top: 100px; */
        border: 10px black solid;
        /* 设置盒子模型的尺寸计算方式 */
        box-sizing: border-box;
    }

总结：

这篇关于2022-07-10 吉林化工学院第一组韩嘉宁学习笔记（CSS篇）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

2022-07-10 吉林化工学院 第一组 韩嘉宁 学习笔记（CSS篇）