CSS总结

最新推荐文章于 2022-07-10 00:46:53 发布

小废废的学习笔记

最新推荐文章于 2022-07-10 00:46:53 发布

阅读量589

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_51528800/article/details/124391341

版权

CSS知识点总结

什么是CSS
CSS语法归纳

什么是CSS

CSS能对html构建的网页进行美化，HTML主要做结构，显示元素内容，CSS来布局网页，它最大的价值是：负责样式，即HTML的结构与CSS的样式相分离。

CSS语法归纳

1、语法规范

2、选择器

选择器（选择符）就是根据不同需求把不同标签选出来，这就是选择器的作用。
在这里插入图片描述
以上CSS做了两件事：①找到所有h1的标签
②设置这些标签的样式，将颜色设置为红色。

元素选择器（标签选择器）

标签选择器是指用HTML标签名称作为选择器，按照标签名分类，为页面中的某一类标签指定CSS样式。

标签名{
属性1：属性值1；
属性2：属性值2；
}
例如：
p{
color:red;
text-align: center;
}

缺点：不能设计差异化样式，只能选择全部这一类标签。

id选择器

id选择器可以为标有特定id的HTML指定特定样式。HTML元素以ID属性来设置ID选择器，CSS中id选择器以“#”来定义。

#id名{
属性：属性值;
}
例如：将id为nav元素中的内容设置为红色
#nav{
color:red;
}

class选择器

标签选择器不能差异化设置，要想差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器。类选择器在HTML中以class属性表示，在CSS中，类选择器以“.”表示。

.类名{
属性：属性值;
}
例如：将所有设置了red类的HTML元素均设置为红色
.red{
color:red;
}

注意：类选择器使用“.”进行标识，后面需要紧跟类名。
总的来说，class选择器使用的最多。

3、如何生效

要使css生效我们总共有三个方法：外部样式表，内部样式表，内联样式。

外部样式表

实际开发中外部样式表比较多，适合样式比较多的情况，核心是样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。
引入外部样式表分为两步：
1、在项目中新建一个后缀名为.css的样式文件，把所有CSS样式都写入到此文件中。
2、在HTML页面中使用<link>标签引入这个文件。
在这里插入图片描述

内部样式表

这个做法就是将样式规则放在head文件内，然后使用<style></style>这一标签，在这里插入代码片<style></style>写在head头里。

距离：
<style>
    body {
      background-color: linen;
      text-align: center;
    }
    h1 {
      color: red;
    }
    .nav {
      margin-top: 100px;
      color: chocolate;
      font-size: 50px;
    }
  </style>

内联样式

这种方式采取直接将样式规则写在元素里的方式，不常用。

<h3 style="color:green;">Hello,world.</h3>

优先级

当一个元素有多个选择器时，就会有优先级产生。
优先级表可以总结如下：
在这里插入图片描述

4、居中

一、水平居中

1、行内元素的水平居中：如果被设置元素为文本、图片等行内元素时，设置text-align:center实现行内元素水平居中。

div {
  text-align:center;
}

可以书写以下属性：
在这里插入图片描述
2、定宽的块状元素的水平居中：
当被设置元素为定宽块级元素时用 text-align：center 就不起作用了。可以通过设置“左右margin”值为“auto”来实现居中的。

div{
     width: 200px;
     margin: 0 auto;
        }

3、不定宽的块状元素的水平居中：
在实际工作中我们会遇到需要为“不定宽度的块级元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。可以直接给不定宽的块级元素设置text-align：center来实现，也可以给父元素加text-align:center 来实现居中效果。当不定宽块级元素的宽度不要占一行时，可以设置display 为 inline 类型或inline-block（设置为行内元素显示或行内块元素）

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
<style>
.container{
    text-align:center;
    background: beige
}

.container ul{
    list-style:none;
    margin:0;padding:0;
    display:inline-block;
}

.container li{
    margin-right:8px;
    display:inline-block;
}
</style>

一、垂直居中

1、使用line-height实现垂直居中
适合文本使用，子元素的line-height跟父元素的height需要一样。

<style>
    .div1 {
        width: 400px;
        height: 100px;
    }

    p {
        line-height: 100px;
    }
</style>
<body>
<div class="div1">
    <p>使用line-height实现垂直居中</p>
</div>

2、通过display:flex实现垂直居中
通过display:flex实现CSS垂直居中的方法是给父元素display:flex，而子元素align-self:center。

<style>
    .div1 {
        width: 400px;
        height: 100px;
        display:flex;
    }

    p {
        align-self:center;
    }
</style>
<body>
<div class="div1">
    <p>使用display:flex实现垂直居中</p>
</div>

5、盒子模型

所谓盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，CSS盒子模型本质是一个盒子，它包括边框、外边距、内边距和实际内容。
在这里插入图片描述

1、边框（border）
border可以设置元素的边框，边框有三部分组成：边框宽度、边框样式和边框颜色。

border:border-width||border-style||border-color;

在这里插入图片描述
2、内边距(padding)
padding属性用于设置内边距，即边框与内容之间的距离。

3、外边距（margin）
margin属性用于设置外边距，即控制盒子与盒子之间的距离。

（粗略简写，详情请看下集。）

小废废的学习笔记

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS总结

CSS知识点总结什么是CSSCSS语法归纳1、语法规范2、选择器元素选择器（标签选择器）id选择器class选择器3、如何生效外部样式表内部样式表内联样式优先级4、居中一、水平居中一、垂直居中5、盒子模型什么是CSSCSS能对html构建的网页进行美化，HTML主要做结构，显示元素内容，CSS来布局网页，它最大的价值是：负责样式，即HTML的结构与CSS的样式相分离。CSS语法归纳1、语法规范2、选择器选择器（选择符）就是根据不同需求把不同标签选出来，这就是选择器的作用。以上CSS做了两
复制链接

扫一扫