【狂神学习笔记】CSS

最新推荐文章于 2024-03-28 07:34:30 发布

Honor_z

最新推荐文章于 2024-03-28 07:34:30 发布

阅读量517

点赞数 2

分类专栏：学习笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_45500506/article/details/119333074

版权

学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

什么是CSS

CSS（Cascading Style Sheet）层叠样式表。CSS用来美化网页，字体，颜色，边距，高宽度，背景图片，网页定位，浮动。

css导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的学习</title>
<!--内部样式，在head标签里直接添加css-->
    <style>
        h1{
            color: blue;
            text-align: right;
        }
    </style>
<!--外部样式，link导入外部css文件-->
    <link rel="stylesheet" href="../CSS/style1.css">
</head>
<body>

<!--行内样式，在标签属性中，加style属性，编写样式即可-->
<h1 style="color: orange;text-align: center">一个标题</h1>
<h1>第二个标题</h1>
<h2>第三个标题</h2>
</body>
</html>

所需要的css文件

h2{
    color: #66ccff;
    text-align: center;
}

优先级：就近原则。行内样式>其他两个就近原则，谁距离标签越近就用谁。就近原则，不如说是覆盖。因为是从上往下执行的，所以最后一次的选择器覆盖前面的。
尽量使用链接外部样式，这样可以使得网页结构和样式代码分离，以后方便修改或者重复使用。

选择器（重点）

作用：选择页面上的某一个或者某一类元素。

掌握熟记基本选择器。其他高深的选择器需灵活运用才能发挥最好的体现，也为了不多创建id值都进行id选择器。

基本选择器

标签选择器（重点，必会）

标签选择器格式：标签名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择页面上所有的这个标签的元素*/
        h1 {
            color: red;
            background: blue;
            border-radius: 24px;
        }

        p {
            color: orange;
        }
    </style>

</head>
<body>

<h1>标题一</h1>
<h1>标题二</h1>
<p>qwer</p>

</body>
</html>

类选择器

类选择器格式：.class的名称{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器格式：.class的名称{}*/
        .abc {
            color: orange;
        }
    </style>
</head>
<body>

<h1 class="abc">Java</h1>
<h1 class="abc">C</h1>
<h1>C++</h1>

</body>
</html>

好处：可以跨标签归为一类设置样式

id选择器

id选择器格式：#id{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*id选择器格式：#id名称*/
    #title1{
        color: coral;
    }

    #title2{
        color: blueviolet;
    }
</style>
<body>

<h1 id="title1">标题一</h1>
<h1 id="title2">标题二</h1>
<h1 id="title3">标题三</h1>
<h1>标题四</h1>

</body>
</html>

id全局唯一，精准定位某一标签进行样式的增加。

优先级：id选择器>类选择器>标签选择器

层次选择器

后代选择器

语法：标签1名（空格）标签2名。标签1里的所有标签2。

body p{
    
}

body标签后的所有p标签。

子选择器

语法：标签1名>标签2名。

body>p {
    
}

body标签后第一代p标签才有，深入代不谈。

相邻弟弟选择器

语法：.类名称 + 标签名

.active + p{
    
}

以.类名称的标签为基点，它的下一个相邻仅仅一个的标签。

通用弟弟选择器

.active~p{
    
}

当前选中元素的向下所有弟弟元素。

结构伪类选择器

不常用，到时候在查，选择器中出现child，和dom树相关。认个眼熟。

属性选择器（常用）

标签命[属性(可以正则)]。例如a[id]，a标签中有id属性的

=绝对等于例如：a[id = first]，a标签中id为first的元素。
*=包含这个元素例如：a[class *= “links”]，a标签中class属性有links的元素。
^=以这个开头例如：a[href ^= http]，a标签中href属性以http开头的元素。
$=以这个结尾

盒子模型

元素最终大小。margin+boder+padding+内容宽度

在这里插入图片描述

margin:外边距

padding：内边距

boder：边框

边看边试。F12打开边调边看。

居中

margin作用。居中：magin: 0 auto。
要求：块元素(div包裹)，块元素有固定宽度。

块内字上下居中
line-height:100px
height:100px
保持一致。

display

display的值：

block 块元素 独占一行，只有设置为块元素，高宽才有效，否则行内元素是由内容撑开的。

inline 行内元素  一行可以写很多

inline-block 保持块元素的特性可以放在一行

none 消失，空间都没有了，但在源码里面存在

浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        div {
            margin: 10px;
            padding: 5px;
        }

        #father {
            border: 1px #000 solid;
        }

        .layout01 {
            border: 1px #000000 solid;
            display: inline-block;
        }
        .layout02 {
            border: 1px orange dashed;
            display: inline-block;
            background-color: black;
        }
        .layout03 {
            border: 1px blue dashed;
            display: inline-block;
        }
        .layout04 {
            border: 1px green dashed;
            font-size: 12px;
            line-height: 23px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="father">
        <div class="layout01"><img src="../Resource/image/1.jpg"></div>
        <div class="layout02"><img src="../Resource/image/logo.png"></div>
        <div class="layout03"><img src="../Resource/image/2.jpg"></div>
        <div class="layout04">
            浮动的盒子可以向左也可以向右，直到它的外边缘碰到父边距
        </div>
    </div>
</body>
</html>

在这里插入图片描述

我们可以从结果看到，这三个图片都是再div块里面的。因为设置三个图片的display为inline-block，所以他们排成一排。还可以看出父级div是由最大的图片（元素块）撑起来的。

此时，我们让图片一进行浮动。

        .layout01 {
            border: 1px #000000 solid;
            display: inline-block;
            float: left;
        }

在这里插入图片描述
我们可以看到图片一浮起来了，div块的边框也变了。此时，可以这样想，浮动层和底层有两层。浮动层的元素是整个漂浮在上面。，浮动层的元素也会在底层占位置，所以还是按照行内块排列。

所以，display是一种实现元素排列的方式（走的是标准文档流，从上至下，从左至右），但我们很多时候都是使用浮动。

清除浮动

继续上面例子，让图片文字都浮动起来。

        .layout01 {
            border: 1px #000000 solid;
            display: inline-block;
            float: left; //让其左浮动
        }
        .layout02 {
            border: 1px orange dashed;
            display: inline-block;
            background-color: black;
            float: left;
        }
        .layout03 {
            border: 1px blue dashed;
            display: inline-block;
            float: left;
        }
        .layout04 {
            border: 1px green dashed;
            font-size: 12px;
            line-height: 23px;
            display: inline-block;
            float: left;
        }

在这里插入图片描述

父级div里没有元素了，所以它被压得很小，但其实是有元素的，只不过它们浮在div上面。

我们来清除浮动。方法：claer ：both（该元素两边都不允许浮动）

        .layout04 {
            border: 1px green dashed;
            font-size: 12px;
            line-height: 23px;
            display: inline-block;
            float: left;
            clear: both;
        }

在这里插入图片描述
可以看到文字，因为不能两侧有浮动，所以它在div现面重新按照标准文档流排列。

父级框塌陷

可以看到上面的例子，我们的div父级框因为其内的所有元素浮动就剩一点了，如何解决这种问题呢？

增加父级元素高度（不建议使用）

简单，但是有了固定的高度会成为限制，假设新增元素超过块并且浮动，还会造成塌陷。

#father {
            border: 1px #000000 solid;
            height: 600px;
        }

增加空的div标签，清除浮动。

新增div放在会塌陷的父级边框内部的最下面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        div {
            margin: 10px;
            padding: 5px;
        }

        #father {
            border: 1px #000 solid;
        }

        .layout01 {
            border: 1px #000000 solid;
            display: inline-block;
            float: left; //让其左浮动
        }
        .layout02 {
            border: 1px orange dashed;
            display: inline-block;
            background-color: black;
            float: left;
        }
        .layout03 {
            border: 1px blue dashed;
            display: inline-block;
            float: left;
        }
        .layout04 {
            border: 1px green dashed;
            font-size: 12px;
            line-height: 23px;
            display: inline-block;
            float: left;
            clear: both;
        }
        .clear {
            margin: 0px;
            padding: 0px;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="father">
        <div class="layout01"><img src="../Resource/image/1.jpg"></div>
        <div class="layout02"><img src="../Resource/image/logo.png"></div>
        <div class="layout03"><img src="../Resource/image/2.jpg"></div>
        <div class="layout04">
            浮动的盒子可以向左也可以向右，直到它的外边缘碰到父边距
        </div>
        <!--增加空的div在父级边框最下面消除浮动-->
        <div class="clear"></div>
    </div>
</body>
</html>

在这里插入图片描述

注意如果浏览器忽略了空的div标签，可以在div里加&nbsp。

overflow 文字/控件属性超过容器属性。就会用overflow设置。

 #father {
            border: 1px #000000 solid;
            overflow: hidden;
        }

父类添加一个伪类：after

        #father {
            border: 1px #000 solid;
        }
		/*记住不要带空格！！！！*/
        /*记住不要带空格！！！！*/
        /*记住不要带空格！！！！*/
        /*#父名:after！！!*/
        #father:after {
            /*空文本，没有高宽，还未被撑开*/
            content: '';
            /*变成块元素*/
            display: block;
            /*清除浮动*/
            clear: both;
          }

这个操作和第二种方式增加个空的div清除浮动操作是等同的。这种方案避免了在原本html基础上增加空的div。不改变原有代码基础上，增加一些东西（开闭原则）。

display和浮动

两者都可以进行相关元素的排版。

display：走标准文档流，方向不可控制。但是没有父级框塌陷的问题。

浮动：浮动起来脱离了标准文档流，可以左右任意浮动，但出现父级塌陷问题。

定位

top，right，left，bottom，是旧图相对于新图在哪个位置。因此，属性值为负的才代表往那个方向移动。

bottom：10px;

原图片在现在图片下面10px。新图向上移动了10px。

相对定位

相对定位： position: relative;

相对于原来的位置，进行指定的偏移，相对定位的话，他仍然在标准文档流中，原来的位置也会保留。

        #first{
            border: 1px dashed #274;
            background-color: #274;
            position: relative;
            bottom: -10px; /*向下移动10px*/
        }

绝对定位

position：absolute;

定位：基于xxx定位。

1.没有父级元素定位的前提下，相对于浏览器定位。（例如右边导航栏随着鼠标滚轮走的走那种）

直接写该属性的position为absolute，且父级元素未写position。就会相对于浏览器，不论浏览器怎么缩放，它总以浏览器边框为标准进行偏移。

2.假设父级存在定位，通常相对于父级元素进行偏移

父级元素写了position属性为relative。就相对于父级框为标准进行偏移。

3.在父级元素范围内移动

相对于父级或者浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档中，原来的位置不会保留。

固定定位

position：fixed

直接在某个位置固定不动了。（例如返回顶部，在右下角，随着鼠标都不动）

Honor_z

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【狂神学习笔记】CSS

文章目录什么是CSScss导入方式选择器（重点）基本选择器标签选择器（重点，必会）类选择器id选择器层次选择器后代选择器子选择器相邻弟弟选择器通用弟弟选择器结构伪类选择器属性选择器（常用）盒子模型居中display浮动清除浮动父级框塌陷display和浮动定位相对定位绝对定位固定定位css导入方式选择器（重点）基本选择器标签选择器（重点，必会）类选择器id选择器层次选择器后代选择器子选择器相邻弟弟选择器通用弟弟选择器结构伪类选择器属性选择器（常用）盒子模型居中display浮动清除浮动父级框塌陷displa
复制链接

扫一扫