CSS入门内容简介

好久不见玛卡巴卡们~~~~

一、什么是CSS

前面我们在HTML中说到，HTML就像一个人的骨架，那么，相对而言，CSS就是我们的皮相。CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果。能够做到页面的样式和结构分离。

二、CSS语法规则

①CSS语法规则是什么？

每一个CSS语句=选择器+应用的属性

②通过图来进一步说明：

说明：CSS代码是可以放到HTML文件中的，（通常是放到style标签里），同时style标签是可以放到HTML的任意位置，下面这个图例，就是将CSS代码放入HTML中来实现的

此处需要注意的点：

1.{}里面的键值结构的书写方式：

键值对之间使用;来进行分割，习惯上每个键值对独占一行。
键和值之间使用：来进行分割，习惯上每个冒号后面会加上一个空格。并且，每个键值对就对应了一个CSS属性
2.在CSS中的注释不能用java中//来表示且同时不能用HTML中表示的方式来进行，而要用/* */来进行表示。

上述内容输出结果：

三、CSS引入方式

1.内部样式表

就是通过style标签来写CSS，形如上述在语法规则里举的例子，这种方式做法是不常见的，当然也可以用来写一些比较简单的CSS

2.内联样式

是通过HTML标签中的style属性，来应用一些样式。

这是一种比较特殊的用法，通常会搭配JS来进行使用，但是这种方式同样只适合于特别简单的情况，而与此同时，内联样式只是针对当前元素生效，不需要写选择器，不需要写{}，直接写CSS属性和值即可

3.外部样式

通俗地说是通过.css文件的形式，在HTML中用Link标签加以联合使用。这样可以使多个HTML文件复用同一种样式，比如在

标签中的字体均为红色。

用图片进行演示：

输出结果如下：

外部式常在工作中被用到。

四、CSS选择器

选择器的作用是选择页面中的元素（标签），一次可以选择一个，也可以选择多个。

下面分别为大家介绍几种选择器。

1.基础选择器

实质上是指由单个选择器构成

1.1标签选择器

是指写的选择器就是一个HTML名，它会对选择的所有标签生效，很明显，这里选择的标签是你好。

输出展示的结果：

1.2类选择器

通过类选择器，可以选择任意想要的元素，从理论上来讲，拥有这一个选择器就足够了。

我们如何建立这种选择器呢？

我们首先需要在CSS代码中创建一个类名，在对应的HTML元素中，通过class属性来引用这个类名，此时具有该类名的元素，就会应用上相关的css属性

①运用外部样式实现类选择器功能：

②直接在HTML页面中实现上述功能：

两者的输出结果均是一样的，如下所示：

1.3id选择器

id选择器只能选中一个元素，不能选中多个元素，我们需要先给选中元素设置一个id，且id只能在一个页面中，是不能够重复的。我们通过下面的例子来看看。

1.4通配符选择器

通配符选择器是一个常用的选择器。

*就是这里的通配符,就直接选中了页面的所有元素,这个最大的用处就是取消掉浏览器的默认样式。

通过实例来进行演示：

2.复合选择器

复合选择器是指把多种选择器综合运用起来

2.1后代选择器

通过多个选择器的组合，能够选中某个元素里面的子元素。

在使用后代选择器中需要注意一下格式，不同的选择器间用空格隔开，且选择器都可以是标签选择器/类选择器/id选择器。演示图如下;

2.2子选择器

通过多个选择器间的组合，能够选中某个元素里面的子元素。

格式：选择器1>选择器2。进行示例的演示：

通过对比子选择器和后代选择器，我们可以发现，利用子选择器的子类可以成功选择，而它的子类的子类，即a标签就不能成功地进行选择，这就说明只能是儿子，不能是孙子。

2.3并集选择器

并集选择器：即并列写多个选择器，中间利用,来分隔开。而这里的并集选择器可以写简单的选择器，也可以用复合选择器。进行示例的演示：

并集选择器通过选中ul的类''next''后代，与ol的li后代，将它们文本的共同属性置为黄色，这样就得到了我们如图所示的结果。

2.4伪类选择器

这里的伪选择器我们主要通过鼠标选中文字与否的区别来进行演示，主要用到的关键字是：hover鼠标悬停的样式,active鼠标按下的样式。具体演示如下：

通过这样的操作，我们就能够更直观地感受到不同状态下字体的颜色。

五、CSS中相关属性

1.字体属性

在应用字体属性的时候，一定得确保对方机器能够有这种额外的第三方字体，否则，在对方显示屏上就不能够得到相应的效果。

1.1字体家族

即字体类型，通过font-family来对其进行设定。具体演示如下：

通过font-family我们就可以得到不同类型的字体了。

1.2字体大小

字体的大小我们用font-size来确定。我们直接在上述类型的基础上来进行演示：

注意：这里的px实质上为单位，意思是像素的意思。在这里就表示60和30像素。另外，除了用像素来对字体大小进行表示，也可以用small,large,normal以及他们的比较级来进行表示。

1.3字体粗细

字体的粗细是用font-weight来进行表示的；（100-900）为字体大小的区间，100最小，900最大。当然同上面字体大小类似，也可以用关键字来进行表示，比如：normal是正常,bold粗体 lighter细。对此进行演示：

1.4字体样式

字体样式在这里主要是指用font-style来使文字倾斜或者说是取消文字的倾斜。下面进行演示说明：

注意：在我们日常开发中很少将其设置为倾斜字体，更多的是对倾斜字体进行改变成正常字体，像em/i这些斜体的字体就可以用这种方式将它们更改成正常的字体。

2.文本属性

2.1文本颜色

文本颜色的关键字是color；color的取值范围有很多种，这里的话着重介绍三种。

①直接使用单词（这种由于比较单一，一般来说使用较少）。

②使用rgb方式来进行表示。

来对这个方式进行一个解释。在这里，r表示red；g表示green；b表示blue； 它们是色光三元色，在css中每一个分量都用一个字节来表示（0-255）。通过每个取值不同就可以搭配出不同的颜色。

当然哪个版块的数值高，那么颜色自然更倾向于那个版块。

③rgb的十六进制表示法：

注意：对于16进制表示法来说，F大小写均可以，且当满足AABBCC格式的时候，可以简写成ABC（如上述例子中#0F8=#00FF88=#00ff88）

④rgba增加一个透明度的属性来表示颜色。

此处的a是指alpha表示透明度,取值为0~1(0是最透明的，1为原本的样子，即没有透明度）

上述例子将有一半透明度和没有透明度进行了对比，可以看出其中的区别还是相当明显的。

2.2文本对齐

①文本对齐：

通常用text-align来进行设置。分别可以设置左对齐，右对齐，居中对齐。举个例子来进行演示：

②文本装饰：

通过text-decoration属性,可以进行文本的装饰，而这里的文本装饰是指实现下划线,删除线等。当然最主要的还是删除下划线，举个例子：

这里的none：表示没有；而line-through表示中线

③文本缩进：

文本缩进使用的是:text-indent。因为对于默认的文本段落是不会缩进的，因此，这里通过这种方式来进行缩进的话，相对于HTML中学的&nbsq而言，更加方便。

3.常用尺寸及行高

①什么是行高：line-height

行高=字体大小+行间距

②行高在实际中表示的究竟是什么?

如图而言：顶线到顶线，中线到中线，基线到基线，底线到底线都可以被称为行高。

我们来举个例子进行演示：

注意：设置行高会对上下两个方面进行影响的！ 而正是因为行高是上下均等的，那么就可以利用行高来设置垂直方向的文本居中。比如，元素高度为120px,则设置行高为120px；就可以实现这个效果。

4.背景属性

4.1设置背景颜色

设置背景颜色是使用background-color来进行表示，其具体用法和文本颜色中的color非常相似。唯一有些不一样的就是transparent，它是用来继承父类的颜色；下面来对背景颜色进行演示：

4.2设置背景图片

①简单平铺：

设置背景图片我们使用background-image；设置背景图片，我们默认的就是一个平铺的效果图。演示如下：

②设置背景图的平铺效果：

使用的是background-repeat:

其中，no-repeat表示不平铺,repeat表示默认选项 repeat-x表示水平平铺 repeat-y表示垂直平铺。我们这里来用平铺和不平铺对比示例：

a.不平铺的结果：

b.平铺的结果：

4.3设置背景图的位置

设置背景图的位置我们用backgrond-position来进行实现。这里的位置形如平面直角坐标系，也就是说存在于两个方向的变量，所以我们在设置时需要考虑两个方向的变量情况。需要额外注意的是，如果我们用px来进行设置，往往不好面对一些居中这样的情况，所以，我们可以用百分数来进行设置。当然也可以通过制定的英文单词来进行进一步的设定。（比如center center==50% 50%）

下面我们将进行演示：

这个的话就是3:5的一个分布，我们从图片中也可以明显地看出区别。

4.4使用background-size来设置背景图片大小

我们通常使用background-size来设置图片的大小。而单位我们一般常用px来进行表示。

当然也是可以用英文字母来表示。下面我们进行演示：

这里显示的80%就是指占了原图大小的80%；

5.圆角矩形

①常规设置：

圆角矩形主要是通过border-radius来进行设定的。主要是对方正的矩形来进行稍微个性化的设定，使其边角更加圆滑的操作。下面来进行演示：

②若是我们想等得一个圆形;

首先我们得有一个现有的正方形，并为设置border-radius为宽度的一半。下面我们进行演示：

当然要是想得到椭圆的话就也就很容易，可以自己思考一下。

6.修改元素的显示模型

是用display来修改元素的显示格式，常见用法就是将行内元素改为块级元素。

①首先我们来讲一下各个代表的含义：

块级元素：

各占一行，可以用来设置宽度和高度（如div;h1-h6;p;ul;il;table）

行内元素：

不能独占一行，不能设置宽度和高度(span;em;a）

行内块元素：

不能独占一行，能设置宽度和高度（input；img）

进行演示：（将行内元素变为块级元素）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <style>
        a{
            width: 190px;
            height: 200px;
            display: block;          
        }
    </style>
    <a href="#">我爱吃香蕉</a>
    <a href="#">我爱吃西瓜</a>
    <div>
        背景图片
    </div>
</body>
</html>

7.盒子模型

7.1什么是盒子模型

对于一个HTML元素来说就像一个如下的矩形：

我们可以把它理解为盖房子。房子的墙就是边距，房子与房子的距离就是外边距，家具距离墙的位置就是内边距，而家具就是内容，因此，我们可以通过css来设置我们刚刚提到的这几个属性。

7.2通过CSS设置相关属性

7.2.1外边距

使用margin属性来进行实现；对于外边距而言，特别需要注意的是，它在垂直方向会出现“塌陷”的情况。这里的塌陷是指：当两个元素都设置了外边距的时候，实际的外边距为较大的外边距。而若是在水平方向的话外边距是可以进行累加的。我们来进行演示

核心代码：

<body>
    <style>
        .name{
            margin-bottom: 30px;
        }
        .name1{
            margin-top: 20px;
        }
 div{
            width: 50px;
            height: 50px;
            background-color: bisque;
            color: #000;
            border:2px black solid;
            text-align: center;
            box-sizing: border-box;
 }
    </style>
    <div class="name">
        测试外边距
    </div>
    <div class=""name1>
测试外边距
    </div>
</body>

结果显示：

7.2.2内边距

内边距主要是通过padding来进行设置；padding也主要是用来设定边框和内容之间的距离，可以分别在某个方向设置，padding-left；padding-right；padding-top；padding-bottom。而padding在默认情况下也会撑大元素，这个时候我们就通过前面提到的将box-sizing设置为border-box。这里就不演示了。

7.2.3边框

边框我们是使用border来进行操作的。首先我们需要明白的是设置边框会撑大原来的元素。但是这种撑大并不是好处，反而来说会对我们的页面布局造成一定程度的影响，因此，在实际操作中，我们为了防止这种情况的发生，将box-sizing设置为border-box，这个时候就会对内容进行挤压，而不是撑大元素。

a.不做处理，让边框撑大元素：

核心代码：

<body>
    <style>
        .name{
            font-size: 30px;
        }
 div{
            width: 500px;
            height: 500px;
            background-color: bisque;
            color: #000;
            border:2px black solid;
            text-align: center;
 }
    </style>
    <div class="name">
        背景图片
    </div>
</body>

结果展示图如下：

b.做处理，让其不对元素进行挤压：

核心代码如下：

<body>
    <style>
        .name{
            font-size: 30px;
        }
 div{
            width: 500px;
            height: 500px;
            background-color: bisque;
            color: #000;
            border:2px black solid;
            text-align: center;
            box-sizing: border-box;

 }
    </style>
    <div class="name">
        背景图片
    </div>
</body>

展示结果：

7.2.4元素的水平居中

这里的居中不是文本的居中，而是元素的居中。也是基于margin来进行实现。下面我们对其进行演示：

8.弹性布局

8.1什么是弹性布局

弹性布局主要是用来安排页面上元素的位置，即排列方式。在前面的介绍中，大部分属性是针对一个元素进行设置的，当然还有些属性是影响到元素和元素之间的，在盒子模型中外边距就是一部分，但是其远远不够，而弹性布局就是为了强化这一点。默认的网页布局是从上到下的，而实际的网页布局不仅仅需要从上到下，还需要从左到右。

8.2flex布局

①设置为弹性布局，

display: flex

来实现.
②设置水平方向排列

justify-content

来实现.

③设置垂直方向排列

align-items

来实现.(flex布局里,一般是一行一行的排列的,不太涉及到多行的情况)

8.2.1设置为弹性布局

div默认作为块级元素,是独占一行的.为了让这些div能够在一个横行中排列,就可以使用弹性布局。

给父元素设置一个属性：display: flex;

默认的布局方式,是"垂直方向”的布局.如果需要"水平方向"的布局,就可以使用弹性布局,通过flex布局,就可以调整子元素排列的方式,默认是这些元素都挤在左上角的.

水平方向的排列方式: justify-content。start靠左排列，end靠右排列，center居中排列，space-between让元素中间有一些等分的间隔(浏览器自动计算的)，space-around 让元素中间有一些等分的间隔.最左边和最右边也有间隔.

垂直方向的排列方式: align-items

8.2.2设置水平方向排列

a.未设置弹性布局：

核心代码：

<body>
    <style>
        .show{
            width: 100px;
            height: 200px;
            background-color: blueviolet;
            /* div是独占一行的,而想要让子元素的div在父元素中水平排列就得用到弹性布局 就需要给父元素设置一个属性 display: flex */
            /* display: flex; */
        }
        .one{
            width: 50px;
            height: 50px;
            background-color: brown;
        }
    </style>
    <div class="show">
        <div class="one">1</div>
        <div class="one">2</div>
        <div class="one">3</div>
    </div>
</body>

显示结果：

b.设置后的核心代码：

<body>
    <style>
        .show{
            width: 100px;
            height: 200px;
            background-color: blueviolet;
            /* div是独占一行的,而想要让子元素的div在父元素中水平排列就得用到弹性布局 就需要给父元素设置一个属性 display: flex */
            display: flex;
            justify-content: space-around;
        }
        .one{
            width: 50px;
            height: 50px;
            background-color: brown;
        }
    </style>
    <div class="show">
        <div class="one">1</div>
        <div class="one">2</div>
        <div class="one">3</div>
    </div>
</body>

显示结果：

成功地将块级元素水平放置了。

8.2.3设置垂直方向排列

垂直方向的排列方式: align-items;直接在水平方向加上居中设置即可。

核心代码：

<body>
    <style>
        .show{
            width: 100px;
            height: 200px;
            background-color: blueviolet;
            /* div是独占一行的,而想要让子元素的div在父元素中水平排列就得用到弹性布局 就需要给父元素设置一个属性 display: flex */
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .one{
            width: 50px;
            height: 50px;
            background-color: brown;
        }
    </style>
    <div class="show">
        <div class="one">1</div>
        <div class="one">2</div>
        <div class="one">3</div>
    </div>
</body>

结果展示如下:

六、简单的实现一个面布局

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面布局</title>
</head>
<body>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .nav{
            width: 100%;
            height: 50px;
            background-color: #047;
            color: white;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
        }
        .container{
            width: 100%;
            height: 500px;
            background-color: gray;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container .left,.container .right{
            width: 20%;
            height: 100%;
            background-color: darkgreen;
            text-align: center;
            line-height: 500px;
            font-size: 20px;
            color: white;
        }
        .container .content{
            width: 60%;
            height: 100%;
            background-color: gray;
            font-size: 20px;
            line-height: 500px;
            text-align: center;
            color: white;
        }
        .footer {
            width: 100%;
            height: 50px;
            background-color: #047;
            color: white;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
        }
    </style>
</body>
<div class="nav">
    导航栏
</div>

<div class="container">
    <div class="left">
        我是左边栏
    </div>
    <div class="content">
        我是内容区
    </div>
    <div class="right">
        我是右边栏
    </div>
</div>

<div class="footer">
    页脚
</div>
</html>

结果展示：

CSS相关内容就到这里啦，好久没有更博啦，要继续加油