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

2022-07-13 01:01:32 阅读：129 来源： 互联网

标签：10 07 样式元素 height color 韩嘉宁 div 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;
    }

总结：

标签：10,07,样式,元素,height,color,韩嘉宁,div,CSS
来源： https://www.cnblogs.com/WorkerHevien/p/16471325.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9