CSS（0316）

最新推荐文章于 2024-06-13 18:31:56 发布

Lacrimosa&L

最新推荐文章于 2024-06-13 18:31:56 发布

阅读量208

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/AC_872767407/article/details/114901431

版权

前端专栏收录该内容

10 篇文章 2 订阅

订阅专栏

1.1 CSS

Css 又叫层叠样式表/级联样式表
他是用来描述html标签的, 描述html标签具有哪些特点
他是依赖于html而存在的.

1.2 在html中引入css（推荐使用如下的方式2，共3种方式）

在这里插入图片描述

1.3 选择器

标签选择器

通过标签名, 把css样式和对应html标签结合起来

在这里插入图片描述

类选择器

通过类名把html元素和css样式绑定到一起
Class=”类名”

在这里插入图片描述

id选择器

通过id属性, 把css样式和对应的html代码结合起来
Id在一个html页面上不可以重复(每一个标签如果设置id, 那么id必须唯一)

在这里插入图片描述

其它选择器

补充1：（复合选择器）

	<style>

        /* 复合选择器: div和p都应用某种样式*/
        div, p{
            width: 100px;
            height: 100px;
            background: #4eff6c;
        }
    </style>

补充2：（复合选择器）

	<style>

        /* 复合选择器: div 里面的 p 应用某种样式*/
        div  p{
            width: 100px;
            height: 100px;
            background: #4eff6c;
        }
    </style>

补充3：（hover选择器）（这个要记住）移动到这个div之后，应用这个样式（第3天的作业2中使用）

	<style>

        p{
            width: 100px;
            height: 100px;
            background: #4eff6c;
        }

        /*归为一个大类（自己添加）*/
        /* 伪元素/类*/
        .p1:hover{
            width: 200px;
            height: 100px;
            /*移动上去之后背景颜色改变*/
            background: #ff4c2f;
            /*移动上去之后字体颜色改变*/
            color: white;
        }
    </style>

/* 伪元素/类*/
div:hover{
    width: 200px;
    height: 100px;
    background: #ff4c2f;
    color: white;
}

补充4：（属性选择器）找一个拥有target属性的标签，应用样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        [target]{
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>

    <a href="https://www.baidu.com" target="_blank">百度</a>
    <a href="https://www.baidu.com" >百度</a>

</body>

总结：
使用最多的是类选择器

id选择器使用非常少：权重太高；id一般是给js的dom操作使用的

选择器的通配：（ * ）选择所有元素，body也会被通配

	<style>
        *{
            background: #ff4c2f;
        }
    </style>

选择器的优先级

在这里插入图片描述

1.4 盒子模型（CSS中比较重要的东西）

一个元素在页面上占据的位置不仅仅有宽高，实际上是由四部分组成的

p标签是自带边距的

在这里插入图片描述

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成

在这里插入图片描述

1.5 html标签的分类（见0315文章）

块级标签

行级标签

行内块

1.6 浮动

1.6.1 标准流（标准文档流/ 文档流/ 标准流）

一个html页面显示的结果, 是根据其Html代码的元素特性, 从上到下, 从左到右有序排列

1.6.2 浮动

浮动: (把元素 “”飘””/漂浮起来)
本来: 是用于文字环绕
现在: 主要用于布局: 设置了浮动的元素，使元素脱离标准流(块元素可以转化为行元素)

一旦浮动就会脱离标准文档流

核心：

1：浮动只影响后面的元素(后面的元素要符合标准文档流, 所以要把浮动元素空出来的位置,占据)
2：连续浮动一行显示
3：浮动以元素顶部为基准对齐
4：浮动可是实现模式转换

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 250px;
            height: 350px;
            background: #ff4c2f;
            margin-bottom: 1px;
        }
        .div1{
            background: #4eff6c;
            width: 100px;
            height: 100px;

            float: left;
        }
        .div2{
            float: right;
            background: #fffe46;
        }
    </style>
</head>


<body>

<!--1：浮动只影响后面的元素-->
<!--2：连续浮动一行显示 -->
<!--3：浮动以元素顶部为基准对齐 -->
<!--4：浮动可是实现模式转换-->

    <div class="div1">1
    </div>

    <div class="div2">2
    </div>

    <div class="div3">3
    </div>

    <div class="div4">4
    </div>

</body>
</html>

效果图（理解）：

清除浮动:
保证一个元素不被浮动影响( 前面的元素浮动了, 后面的元素要上移, 不想上移就可以通过清除浮动实现)

1.7 补充

1.7.1溢出隐藏

overflow 属性规定当内容溢出元素框时发生的事情

属性

Visible:默认值。内容不会被修剪，会呈现在元素框之外。
Hidden:内容会被修剪，并且其余内容是不可见的。
Scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
Auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div, body, p, li{
            margin: 0;
            padding: 0;
            /*2：overflow:hidden; 将超出部分的元素隐藏*/
            overflow:  hidden;
        }
        div{
            width: 100px;
            height: 100px;

            background: red;
        }
        .div2{
            width: 200px;
            height: 50px;

            background: #45ff1f;
        }
    </style>
</head>
<body>

    <div>
        <div class="div2">

        </div>
    </div>

    <div>
        11111
    </div>

</body>
</html>

1.7.2隐藏

1：display:none 元素隐藏不占位置
2：overflow:hidden; 将超出部分的元素隐藏
3：visibility:hidden; 元素隐藏占位置

1.7.3其它

主要长宽单位
	px 像素
	%  相对于父元素的大小
	line-height(设置行高)
	浏览器默认字体大小为:16px
	浏览器默认行高：18px

Lacrimosa&L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS（0316）

文章目录CSS在html中引入css选择器标签选择器类选择器id选择器其它选择器选择器的优先级盒子模型html标签的分类CSSCss 又叫层叠样式表/级联样式表他是用来描述html标签的, 描述html标签具有哪些特点他是依赖于html而存在的.在html中引入css选择器标签选择器通过标签名, 把css样式和对应html标签结合起来类选择器通过类名把html元素和css样式绑定到一起Class=”类名”id选择器通过id属性, 把css样式和对应的html代码结合起来
复制链接

扫一扫