CSS基础

哈密瓜Q

已于 2023-04-18 13:00:53 修改

阅读量1.5k

点赞数

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

于 2021-02-08 15:22:33 首次发布

本文链接：https://blog.csdn.net/m0_53062159/article/details/113740472

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

CSS基础

1. CSS的基础概念
2. CSS的选择器
3. CSS的定位

1. CSS的基础概念

CSS 指层叠样式表 (Cascading Style Sheets)，是一种用来渲染HTML文件样式的计算机语言。

层叠：CSS样式有优先级规则，当作用于相同元素的Css规则产生冲突时以优先级高的为准。
样式表：即修饰渲染静态页面的样式库，用于描述HTML外观。

CSS在HTML文件中的三种导入方式：

1. 在标签元素内部的style属性直接定义CSS样式
2. 在 <head></head> 标签中新建<style></style> 标签定义CSS样式
3. 通过 <link rel="stylesheet" href="./css/demo.css"> 标签外部导入CSS样式

2. CSS的选择器

2.1 元素选择器

标签选择器

选中标签名为div的所有div元素标签

<style>
    div{
        color: blue;
    }
</style>
<div>
    这是一个div元素
</div>

id选择器

选中id为tag的元素标签，同一个html文件中id名是唯一的

<style>
    #tag {
        color: blue;
    }
</style>
<div id='tag'>
      这是id为tag的标签
</div>

类名选择器

选中类名为tag的所有元素标签
元素标签内可以同时设置多个不同名称的类名
类名支持多个元素标签同时使用

<style>
    .tag1 {
        color: green;
    }

    .tag2 {
        font-size: 20px;
    }

    .tag3 {
        font-weight: bold;
    }
</style>
<div class='tag1 tag2 tag3'>
      这是包含多个类名的div
</div>
<span class='tag1'>这是只有一个类名的span</span>

2.2 元素选择器优先级顺序

标签选择器 < 类名选择器 < id选择器 < 行内样式 < !important

若两个相同选择器同时定义同种标签则优先级自上而下递增

<style>
    #tag {
        color: tomato;
    }

    .tag {
        color: green;
    }

    div {
        /* !important 打破优先级规则，将当前的属性的css优先级顺序变为最高*/
        color: red !important;
    }

    div {
        color: blue;
    }
</style>
<div class='tag' id='tag' style='color:black'>
    这是一个div标签
</div>

2.3 派生选择器

后代选择器

选中div里面所有span标签

<style>
    /* 选中div里的所有span标签*/
    div span {
        color: red;
    }
</style>
<div>
    <span>111</span>
    <div>
        <span>222</span>
    </div>
</div>

父子选择器

选中div里的子代span标签

<style>
        div > span {
            color: blue;
        }
    
        .tag > span {
            color: red;
        }
</style>
<div>
        <span>这是div里的span标签</span>
            <div class="tag">
            	<span>这是tag里的span标签</span>
            </div>
</div>

2.4 子元素伪类选择器

nth-of-type(n)
匹配

的父元素的第一个

元素

ele:nth-of-type(n)：选择器选取ele的父元素的第 n 个ele元素
ele:nth-child(n)与之等效

<style>
    /* 选中body中第n个p标签元素，不包括h1 ，只选p标签 */
    p:nth-of-type(n) {
        color: red
    }
</style>
<body>
    <h1>标题</h1>
    <p>第一个段落</p>
    <p>第二个段落</p>
</body>

ele:first-of-type(first-child)：选取ele的父元素的第一个ele元素
ele:last-of-type(last-child)：选取ele的父元素的最后一个ele元素

3. CSS的定位

3.1 CSS的盒模型布局

CSS盒模型的组成
由内到外，由四部分组成：content -> padding（内边距）-> border（边框）-> margin（外边距）
在这里插入图片描述
border（边框）

边框样式常用写法：border：1px solid black;
分别对应边框的宽度、边框的样式、边框的颜色，三个参数的位置可以随意更改

边框样式

常用样式：dotted（点状线）、dashed（虚线）、solid（实线）、double（双实线）
不常用样式：groove（沟槽）、ridge（脊边框）、inset（陷入效果）、outset（凸出效果）

3.2 定宽居中

定宽居中只针对于块元素，提前预设好宽度之后，再设置margin: 0 auto属性，进行块元素的水平居中（即设置左右外边距自适应auto，可达到水平居中的效果）

导航栏的宽度一般为1200px/960px，高度一般为60px

制作网页前可使用通用选择器选中所有元素标签，将所有元素的标签默认的外边距以及内边距清空（以防止不同浏览器之间可能存在标签元素默认的边距不一致导致的网页的变化），通用选择器的优先级最低。

*{
	margin: 0; 
	padding: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {

            width: 1200px;
            height: 60px;
            margin: 0 auto;
            background-color: red;
            /* 文本对齐方式 */
            text-align: center;
            /* 设置行高，单行文本若要垂直方向上居中，只需设置行高的值等于元素容器的高度 */
            line-height: 60px;
        }
    </style>
</head>
<body>
    <div class="nav">
        导航栏
    </div>
</body>
</html>

在这里插入图片描述

3.3 相对定位

relative：相对于元素本身最初的位置进行定位，会继续占有原来所在文档的位置，relative一般作为子元素的参照物来使用。

top：相对于参照物顶部的偏移量
left：相对于参照物左边的偏移量
bottom：相对于参照物底部的偏移量
right：相对于参照物右边的偏移量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            left: 200px;
            top: 200px;
        }
        section{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
    <section></section>
</body>
</html>

在这里插入图片描述

相对定位时元素相对于最初始的位置进行偏移，但最初始的位置仍占据物理空间只是更改视觉上当前元素的布局的位置（如上图蓝色框并未向上填充原来红色框的初始位置）。

3.4 绝对定位

absolute：设置绝对定位属性之后，元素会脱离文档流，不占据文档中任何位置，同时会参照父容器或再往上容器有设置（relative / absolute / fixed）属性的元素作为参照物进行定位。

top：相对于参照物顶部的偏移量
left：相对于参照物左边的偏移量
bottom：相对于参照物底部的偏移量
right：相对于参照物右边的偏移量

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
                width: 300px;
                height: 300px;
                margin: 0 auto 0;
                border: 1px solid red;
                position: relative;
            }
    
            .box>div {
                width: 50px;
                height: 50px;
                position: absolute;
            }
    
            .box>div:nth-of-type(1) {
                background-color: pink;
                left: 0;
                top: 0;
            }
    
            .box>div:nth-of-type(2) {
                background-color: tomato;
                left: 0;
                bottom: 0;
            }
    
            .box>div:nth-of-type(3) {
                background-color: blue;
                right: 0;
                top: 0;
            }
    
            .box>div:nth-of-type(4) {
                background-color: skyblue;
                right: 0;
                bottom: 0;
            }
    
            .box>div:nth-of-type(5) {
                background-color: purple;
                /* 定位到正中心 */
                /* 通过设置父元素宽/高的50% - 当前元素宽/高的50%（数值） */
                /* calc() 计算方法 支持加减乘除运算 */
                /* 运算符号之间要用空格隔开 */
                left: calc(50% - 25px);
                top: calc(50% - 25px);
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            文字会被盖住吗？
        </div>
    </body>
    </html>

在这里插入图片描述

绝对定位的元素会默认查找父级元素/祖先级元素中设置了定位属性的元素作为参照，如果一直没有找到设置了定位属性的父级元素的话，默认会以body为参照。

相对定位与绝对定位的区别：

相对定位：参照元素最初始位置进行定位(一般不做定位属性的处理)，一般只作为子元素中设置了定位属性的参照物，移动前/后的元素都会占据物理空间。
绝对定位：参照父元素中设置了relative/absolute/fixed属性的元素进行位置定位，可以定位到参照物元素的任何位置，不会占据任何物理空间（开启绝对定位的元素会脱离文档流）。

3.5 固定位置

fixed：设置固定位置属性后，元素会脱离文档流，不占据文档任何空间，会以屏幕的视窗作为参照物。

top：相对于屏幕视口顶部的偏移量
left：相对于屏幕视口左边的偏移量
bottom：相对于屏幕视口底部的偏移量
right：相对于屏幕视口右边的偏移量

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        nav {
            width: 100%;
            height: 60px;
            text-align: center;
            /* 设置单行文本垂直居中 */
            line-height: 60px;
            background-color: skyblue;
            /* 元素开启固定位置时，如果没有设置宽度/高度，则默认是内容本身的宽度/高度 */
            position: fixed;
            top: 0;
            left: 0;
        }

        main {
            height: 1000px;
            background-color: tomato;
            /* 给当前被导航栏覆盖住的元素标签，添加一个跟导航栏一样高度的上外边距 */
            margin-top: 60px;
        }

        aside {
            width: 60px;
            height: 200px;
            background-color: greenyellow;
            position: fixed;
            right: 0;
            top: calc(50% - 100px);
        }
    </style>
</head>

<body>
    <nav>导航栏</nav>
    <main>
        网页的正文<br>
        网页的正文<br>
        网页的正文<br>
        网页的正文<br>
    </main>
    <aside>侧栏</aside>
</body>

</html>

在这里插入图片描述

哈密瓜Q

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

CSS基础1. CSS的基础概念2. CSS的选择器2.1 元素选择器2.2 元素选择器优先级顺序1. CSS的基础概念CSS 指层叠样式表 (Cascading Style Sheets)，是一种用来渲染HTML文件样式的计算机语言。层叠：CSS样式有优先级规则，当作用于相同元素的Css规则产生冲突时以优先级高的为准。样式表：即修饰渲染静态页面的样式库，用于描述HTML外观。CSS在HTML文件中的三种导入方式：1. 在标签元素内部的style属性直接定义CSS样式2. 在 &lt
复制链接

扫一扫

专栏目录