2022 7-9 第二组 曹雨CSS知识点

css

CSS叫做“层叠样式表”网页中：HTML相当于布料（结构）​CSS网页相当于上色（美化）

定义css的方式

行内样式，内联样式

如：

<p style="background: rgb(0, 255, 85);">I love Java</p>
<span style="background: rgb(0, 255, 85 );" valve = "123"></span>
<h1 style="background: rgb(0, 255, 85);">i love html</h1>

内页样式

如选择器格式

    <style>
    p {
        background: red;
    }
    .span {
        background: yellow;
    }
    <style>

外部样式（推荐）

需要新建一个.css文件，在其中可以直接写CSS

CSS选择器

标签选择器

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

类选择器

    /* 声明一个样式，并起个名字 */
    /* 类选择器 */
    /* 标签选择器比类选择器优先级高 */
    .bg {
        background: blue;
    }
<!-- 调用 -->
<div class="bg">i love mysql</div>

id选择器

 /* id选择器 */
    #spring {
        background: purple;
    }
<!-- 调用 -->
<div id="spring">i love spring</div>    

组合选择器（可以选多个）

div与p两个标签的样式一摸一样的，选中div和p

 /* 页面上所有的div和p的样式都一样 */
    div,p {
        color: yellow;
    }

后代选择器（不管嵌套多少层，都能选到）

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

直接子标签选择器（选儿子，不选孙子）

div > p {
        color: orange;
    }

选紧跟在div后的p

 div+p {
        color: blue;
    }

属性选择器
=文本框永远只有一行

文本区可以换行

 /* 属性选择器 */
    [class~=font]{
        height: 100px;
    }

伪类选择器：

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

css层叠性

优先级

类>标签>id

层叠性

如果样式冲突，遵循就是就近原则，哪个样式离结构近，就选哪个

如果样式不冲突，就不层叠

继承性

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

*权重：继承的样式权重为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：

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

背景

div可以理解为一张纸，不对其进行任何设置就是一张透明的纸

背景颜色：background-color

背景图片：background-image

简写：background：

颜色的表示方法：

1.英文 2.rgb(是一个函数) 3.rgba：多加了一个透明度（透明度0-1 全透明-不透明） 4.16进制

div {
        height: 200px;
        width: 200px;
        background-color: green;
        /* 边框线的样式 */
        /* border-style: dotted; */
        /* 边框线的宽度 */
        /* border-width: 5px; */
        /* 边框线的颜色 */
        /* border-color: yellow; */
        /* 简写 */
        border: red solid 1px;
        border-bottom: 1px yellow double;
        border-left: 1px blue dotted;
        /* css3新增的属性，半径 */
        border-radius: 15px;
    }
    table {
        /* border: 1px black solid; */
        /* 边框线的折叠 */
        border-collapse: collapse;
        /* 边框线间距 */
        border-spacing: 0;
        border-left: 1px solid black;
        border-top: 1px solid black;
    }
    table tr {
        border-bottom: 1px solid black;
    }
    table tr td {
        border-right: 1px solid black;
    }

定位，浮动

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>

盒子模型

<title>盒子模型</title>
<style>
    .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;
    }
    .div2{
        height: 300px;
        width: 300px;
        background-color: red;
    }
</style>
</head>
<body>
    <div class="div2">我是div2</div>
    <div class="div1">我是div1</div>
</body>

总结

今天是第二天，我们学习了CSS的技能，用于HTML网页的美化，基本知识点方面，比较多，比较杂乱。老师刚刚讲过，过了一会可能就会忘记，最后的盒子模型与浮动，定位感觉应用层面一窍不通。最后的作业也不是独立自主完成，是在同学的帮助才最后完成。依然没有感觉，依然没有思维，依然很焦虑。