CSS基础教程学习总结

最新推荐文章于 2024-08-14 15:00:00 发布

潜心专研的小张同学

最新推荐文章于 2024-08-14 15:00:00 发布

阅读量63

点赞数

分类专栏： HTML&CSS 文章标签： html css css3

本文链接：https://blog.csdn.net/this_zq/article/details/124628564

版权

HTML&CSS 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS的基础知识，包括CSS的作用、 HelloWorld 示例、选择器的使用（id选择器和class选择器）、四种引用方式（外部、内部、内联和优先级），以及position定位（static、fixed、relative和absolute）和float浮动的原理与应用。通过实例代码展示了各个概念的实际操作，是学习CSS入门的良好资料。

摘要由CSDN通过智能技术生成

前言

记录css学习内容，查漏补缺。

一、CSS是什么？

简而言之，就是样式、布局，使html的框架更好看，把html元素定位在自己想要放的位置。

1.1 CSS的"hello world"

hello.css文件：

.center1 {
    text-align: center;
}

h3 {
    text-align: center;
}

hello.html文件：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        body {
            background-color: #d0e4fe;
        }

        h1 {
            color: orange;
            text-align: center;
        }

        p {
            font-family: "Times New Roman";
            font-size: 20px;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="01hello.css">
</head>


<body>

    <h1>CSS 实例!</h1>
    <h2 class="center1">这是一个h2。</h2>
    <h2>这是一个h2。</h2>
    <h3>这是个h3</h3>
    <p>这是一个段落。</p>

</body>

</html>

将上面的代码拷贝至相应文件就可以直接运行，后面的知识点将采用简写。

二、CSS选择器及几种引用方式

2.1 id选择器

只能引用一次，给特定的id引用。

代码如下（示例）：

<style>
      #test1{color:red;}
</style>
<div id="test1">id选择器</div>

2.2 class选择器

可以多次引用，多种写法。

写法1：.test2{color:blue;}
引用：class=“test2”
写法2：div.test3{color:black}
引用：class=“test3”
只有div元素引用时起效果。
写法3：test4.div{color:#123456}
引用：class=“test4”
test4样式包含的所有div起效果。
span{color:#666666;}
所有span元素起效果。

2.3 几种引用方式

2.3.1 外部引用

写在< head >里面，用 link 标签来引用一个.css文件。
示例：

<link rel="stylesheet" type="text/css" href="mystyle.css">

2.3.2 内部引用

写在< head >里面，然后再用< style >标签来直接写样式，，引用一个文件是一样的效果，只是这个是直接放到html里面了。
示例：

<style>
	.test2{color: blue;}
    div.test3{color: black;}
    .test4 div{color: #00fa92;}
    p {color: #f115af;}
</style>

2.3.3 内联引用

直接写在body的标签里面。
示例：

<p style="margin-top: 5px;">所有p元素遵循这个样式，并且这个使用了内联样式</p>

2.3.4 优先级

内联引用>内部引用>外部引用

三、CSS position定位

3.1 示例图

在这里插入图片描述

3.2 代码

css

/* 关于static的几种定位：static、fixed、relative、absolute、sticky */

div.static {
    /* static定位 ：即 浏览器的默认的，写不写没啥区别，top、right、left、bottom不起作用*/
    position: static;
    border: 3px solid #73AD21;
    top: 50px;
    /*演示：这句话不起作用，可删去*/
    left: 10px;
    /*演示：这句话不起作用，可删去*/
}

div.fixed_1 {
    /*  fixed定位：元素的位置相对于浏览器（就是你能看到的这个浏览器窗口）来说，
        是固定的，无论你怎么滑动窗口，它都在那儿雷打不动。 
        可以与其他元素重叠。（常用于导航栏）
    */
    position: fixed;
    border: 3px solid #111111;
    width: 200px;
    height: 60px;
    top: 300px;
    left: 50px;
}

div.fixed_2 {
    position: fixed;
    border: 3px solid #44f895;
    width: 200px;
    height: 60px;
    top: 300px;
    left: 260px;
}

div.fixed_3 {
    position: fixed;
    border: 3px solid #7a5e5e;
    background-color: #ebaaaa;
    width: 200px;
    height: 60px;
    top: 310px;
    left: 360px;
}

div.relative {
    /*  relative相对定位：相对于这个元素的原来位置进行移动，原来的位置依然是存在的。
        通常里面会包上absolute绝对定位来用
     */
    position: relative;
    border: 3px solid #9cf0c2;
    width: 200px;
    height: 60px;
    /* top: 200px; */
}

div.absolute {
    /*  absolute绝对定位：根据外面一层包着的元素来定位，左啊还是右啊，
        如果外面没有那就是html元素，最大的那个咯。 
    */
    position: absolute;
    background-color: #9cf0c2;
    border: #29c9c9;
    width: 150px;
    height: 30px;
    top: 20px;
}

div.sticky {
    /*和flex定位有些相似，但是又有些不同
      sticky是粘的意思，一开始可以自由滑动，当到一定位置时就会在那里不动。
      先自由滑动，到一定位置就固定在那里不动。
    */
    /* 对于Safari浏览器 */
    position: -webkit-sticky;
    position: sticky;
    /* 到顶部20px位置不动 */
    top: 20px;
    /* margin-top: 500px; */
    background-color: #29c9c9;
    border: 2px solid #73AD21;

}

/* 对于以上元素有所重叠的，
   可以设置z-index属性设置优先级
   z-index:-1;//或者1...啥啥的。
*/

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>position定位使用</title>
    <link rel="stylesheet" type="text/css" href="03position定位.css">
</head>

<body>
    <div style="height: 2000px;">
        <!-- static定位 -->
        <div class="static">这个是static定位</div>
        <!-- fixed 定位 -->
        <div class="fixed_1">fixed方块1</div>
        <div class="fixed_2">fixed方块2</div>
        <div class="fixed_3">fixed方块3</div>
        <!-- relative定位 -->
        <div class="relative">
            relative定位
            <!-- absolute定位 -->
            <div class="absolute">absolute定位</div>
        </div>
        <!-- sticky定位 -->
        <div class="sticky">这个是sticky定位</div>

    </div>


</body>

</html>

四、CSS float浮动

4.1 示例图

在这里插入图片描述

4.2 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css浮动</title>
        <style>
            div.main{
                width: 1000px;
                height: 500px;
                background-color: aquamarine;
            }
            /*浮动的元素 脱离文档流 空间释放
              （原来是占用着这个位置的，然后浮动
              就漂浮起来了，这个位置就不占用了
              ）
            */
            div.child{
                width: 100px;
                height: 100px;
                background-color: blue;
                float: left;
                margin: 5px;
            }
            /*因为前面是浮动的，如果没有
              clear：both这个属性，就会变成这样，
              （可以去掉试试）
              因为他是浮起来的嘛，这个位置就是空的，
              而clear：both会清除浮动，默认为正常的
              文档流。
            */
            div.clear{
                height: 20px;
                border: 2px solid black;
                clear: both;
            }
        </style>
    </head>

    <body>
        <!-- 浮动 -->
        <div class="main">
            <div class="child"></div>
            <div class="child"></div>
            <div class="clear"></div>
        </div>
    </body>
</html>

总结

业精于勤，在于多用多看，反复用反复看，总结。

潜心专研的小张同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础教程学习总结

前言记录css学习内容，查漏补缺。文章目录前言一、CSS是什么？1.1 CSS的"hello world"二、CSS选择器及几种引用方式2.1 id选择器2.2 class选择器2.3 几种引用方式2.3.1 外部引用2.3.2 内部引用2.3.3 内联引用2.3.4 优先级三、CSS position定位3.1 示例图3.2 代码四、CSS float浮动4.1 示例图4.2 代码总结一、CSS是什么？简而言之，就是样式、布局，使html的框架更好看，把html元素定位在自己想要放的位置。1
复制链接

扫一扫

专栏目录