CSS快速入门

悟空

已于 2022-03-27 13:55:57 修改

阅读量756

点赞数 25

分类专栏： # 网页基础文章标签： css 前端 html

于 2022-03-16 16:00:55 首次发布

本文链接：https://blog.csdn.net/m0_50991874/article/details/123526906

版权

📒博客主页：悟空的博客主页
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
🙉作者简介：一只还在学本领的石猴 🐵
👀关注公众号【悟空信条】，简历模板、学习资料、面试题库等通通分享🎁
🙏作者水平很有限，如果发现错误，一定要及时告知作者哦！感谢感谢！🚤

📝全部总结：《悟空的“架构取经之路”》

如果说HTML是肉身、CSS就是皮相、Javascript就是灵魂。

对于一个网页，HTML定义网页的结构，CSS(层叠样式表)描述网页的样子，JavaScript是用来实现网页上的特效效果

一个很经典的例子是说HTML就像一个人的骨骼、器官，而CSS就是人的皮肤，有了这两样也就构成了一个植物人了，加上javascript这个植物人就可以对外界刺激做出反应，可以思考、运动、可以给自己整容化妆（改变CSS）等等，成为一个活生生的人。

0 写在前面

学习之前，请先看完《HTML看这篇就够了》

本篇文章不会面面俱到，但可以深度的快速入门，看完即可实战，如果还要一些细枝末节的东西，用到的时候再去充电即可，本篇文章将会通过代码分析，效果图演示，让我们很快的掌握此方面的内容。对于一些理解起来有点不太明白的，那是我描述的还不够清楚，不要失去兴趣，复制代码，自己改几个demo理解起来会很容易搞懂

1 css的语法

1.1实例

CSS的语法由三部分构成：选择符（selector）、属性（property）和属性值（value）。语法格式如下：

选择符{
     属性：属性值
 }

选择符用来指定针对哪个HTML标签应用样式表，任何一个HTML标签都可以是一个CSS的选择符。如：

p{
    color:red;
}

其中，<p>是选择符，color是属性，blue是属性值。该规则将在网页段落标签里的内容为蓝色。

可以为选择符指定多个样式，需要在属性之间用分号加以分隔。下面的选择符body就包含两个样式：一个是字体颜色为红；另一个是字体居中。

body{
    color:red;
    text-align:center;
}

也可以将相同属性和属性值赋给多个选择符，选择符之间用逗号隔开

h1,h2,h3,h4,h5,h6{
    color:red;
    text-align:center;
}

该规则将标题标签（<h1>到<h6>）的字体都变成蓝色

1.2css注释

CSS注释以 /* 开始, 以 */ 结束, 实例如下:

p{
    /*这是另一个注释*/
    color:blue;
}

2 在网页中添加CSS的方法

css在网页中暗器位置可分为三种：内嵌样式，内部样式和外部样式

2.1内嵌样式

内嵌样式是将样式代码写在标记里面的，使用style作为属性，样式语句作为属性值。内嵌样式只对所在标记有效。
代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内嵌样式</title>
    
    </head>
    <body>
        <p style="background: red">段落1<p>
        <p >段落2<p>
    
    </body>
</html>

效果图：

这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <p>拥有相同的样式，你不得不重复地为每个<p> 添加相同的样式，比如段落2想要需要添加样式就必须在段落2的<p>标签里面继续书写，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内嵌方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

2.2内部样式

内部样式是使用＜style＞标记将样式代码写在HTML的＜head＞＜/head＞里面的。内部样式只对所在网页有效。
代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内部样式</title>
        <style>

            h1{
     
                background: red;
            }

        </style>
    </head>
    <body>
            <h1>这里使用了内部样式</h1>

    </body>
</html>

效果图：

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护

2.3外部样式

1）链接样式表
将样式代码写在一个以.css为扩展名的CSS文件里，然后在每个需要用到这些样式的网页里引用这个CSS文件。通过HTML的link元素将外部的样式文件链接到网页里。

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

注意：这个外部的样式文件不能含有<head>和<style>这样的标签仅仅由css的语法构成即可

2）导入样式表
导入方式指的是使用 CSS 规则引入外部 CSS 文件。

3.选择符的分类

3.1 普通选择符

任意的HTML标记都可以作为选择符，这样的选择符称为普通选择符。其样式仅仅作用在选择符指定的HTML标记上。如：

p{
    color:red;
}

3.2 类选择符

假如我们希望<p>标签有两个样式；一种居中对齐；一种居右对其，我们可以写成如下格式
代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>类选择符</title>
        <style>
            p.right{
     
                text-align:right
            }
            p.center{
     
                text-align:center
            }
        </style>
    </head>
    <body>
            <p class="right">这段居右显示</p>
            <p class="center">这段居中显示</p>
    </body>
</html>

css中，省略HTML标记名只写“.类名”表示这个类名适用于所有的HTML标记的class属性，这种选择符称为通用类选择符。比如在上面的例子中css中省略掉p标签名，那么在html的所有标签都可以使用right和center两个类名

3.3 id选择符

HTML标记名加上id名，中间用“#”号分开，id名供该HTML标记的id属性使用。
例如：
p# bigFont{font-size:24px}
如果省略HTML标记名只写“#id名”表示这个id名适用于所有的HTML标记的id属性，这种选择符称为通用id选择符。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>id选择符</title>
        <style type="text/css">
    
            #bigFont{
     font-size:24px}
    
        </style>
    </head>
    <body>
        <div id="bigFont">这段字体超大的耶</div>
    </body>
</html>

效果图：

3.4 类选择符和id选择符的区别

乍一看，这两个选择符的用法不是一样的么，的确很相似，后续我会出一篇文章详细讲解它两的区别
（先有个了解即可）

id：用来定义页面中大的样式，如栏目划分，顶部，正文，底部等；用#top的形式来定义；
class：用来定义一些比较细节的样式，如具体的一个菜单，一行文字等，用.text的形式来定义。

4.伪类及对象

4.1. 超链接伪类

超链接伪类共有4个：

a：link表示未被访问的链接
a：visited表示已被访问过的链接，
a：hover表示鼠标悬浮在其上的链接，
a：active表示鼠标点中激活链接。

由于优先级的关系，在写超链接＜a＞的CSS时，一定要按照a：link、a：visited、a：hover、a：active的顺序书写。看不明白没关系，直接上例子

代码（这里关注注释即可）：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>超链接伪类</title>
        <style>
            a:link{
     
                color:red;
            }/* 未访问显示为红色 */
            a:visited<