CSS基础教程学习总结

2023-02-27 14:07:51 浏览数 (1)

前言

记录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.1 CSS的"hello world"

hello.css文件：

代码语言：javascript复制
.center1 {
    text-align: center;
}

h3 {
    text-align: center;
}

hello.html文件：

代码语言：javascript复制
<!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引用。

代码如下（示例）：

代码语言：javascript复制
<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文件。 示例：

代码语言：javascript复制
<link rel="stylesheet" type="text/css" href="mystyle.css">

2.3.2 内部引用

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

代码语言：javascript复制
<style>
	.test2{color: blue;}
    div.test3{color: black;}
    .test4 div{color: #00fa92;}
    p {color: #f115af;}
</style>

2.3.3 内联引用

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

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

2.3.4 优先级

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

三、CSS position定位

3.1 示例图

3.2 代码

css

代码语言：javascript复制
/* 关于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

代码语言：javascript复制
<!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 代码

代码语言：javascript复制
<!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>

总结

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

html css

0 人点赞