今天是第二期啦，我们今天来学习css；

1，CSS介绍

CSS可以理解为对我们上期Html所写的代码进行化妆，达到界面美化的效果；

语法：选择器+{一条/n条声明}

选择器决定针对谁进行修改，声明决定修改啥，声明的属性是键值对，用；区分键值对，用：区分键和值；

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css练习</title>
    <style>
        p{
            color: blue;
            size: 500px;
        }
    </style>
</head>
<body>
    <p>你好世界</p>
</body>
</html>

我们使用style标签，在style标签中写修改的内容；

 我们看看结果：

注意哈，style可以放到界面任意位置，一般我们放到head中。

引入方式：

有三种引入方式，一种是内部样式，一种是行内样式，还有一种是外部样式，行内样式是直接在标签后面写，但是太乱了，外部样式是直接创建一个CSS单独写，与html分开了，企业大部分都是用这个，但是我们后端宝宝，我们只需要用内部样式就好啦，就是刚才演示代码的样式，用一个style标签，之后在标签中统一写；我们来额外学一个html的标签嗷，上期忘说了，我们可以用ul标签表示无序列表，ol标签标识有序列表，标签内用li标签写数据，来看代码和效果：

 <ul>
        <li>我是无序第一个</li>
        <li>我是无序第二个</li>
        <li>我是无序第三个</li>
    </ul>
    <ol>
        <li>我是有序第一个</li>
        <li>我是无序第二个</li>
        <li>我是无序第三个</li>
    </ol>

 

这样式的，还挺好看的嗷；

2，CSS选择器

介绍完了，我们来学习怎么使用吧，我们想要使用css的话就要用css选择器，因为css是对界面的标签进行选择，之后再对标签进行修饰，所以我们要有选择器来选中我们的页面标签；

1，标签选择器

我们可以选中标签，对其进行属性设置：

<style>
        p{
            color: blue;
            size: 500px;
        }
        div {
            color: brown;
        }
    </style>
<p>你好世界</p>
    <div>我是div1</div>
    <div>我是div2</div>
    <div>我是div3</div>
    <span>我是span1</span>

 看看效果：

2，class选择器

使用.class(自己设置的名){};

         .ass1 {
            color: aquamarine;
         }
    <div class="ass1">我是div1</div>
    <div class="ass1" class="ass2">我是div2</div>
    <div class="ass2">我是div3</div>

 

一个标签可以使用多个类，一个类也可以被多个标签使用；

3，id选择器

给标签设置id，在style中使用#id{}进行属性设置；
 

    <div class="ass1" id="asid1">我是div1</div>
    <div class="ass1" class="ass2" id="asid2">我是div2</div>
    <div class="ass2" id="asid3">我是div3</div>
         .ass1 {
            color: aquamarine;
         }

         #asid2 {
            color: blueviolet;
         }
         #asid1 {
             font-size: larger;
         }

看看效果： 

4，复合选择器

当标签就是div这样的嵌套层数太高了的时候，我们可以用复合选择器来指定确定的标签，

    <ul>
        <li><p>我是无序第一个</p></li>
        <li>我是无序第二个</li>
        <li>我是无序第三个</li>
    </ul>
    <ol>
        <li>我是有序第一个</li>
        <li>我是无序第二个</li>
        <li>我是无序第三个</li>
    </ol>
         ul li p{
            color: darkmagenta;
         }

 

5，通配符选择器

直接用*来代表所有的标签

         * {
            color: chartreuse;
         }

全都变绿了，这样可以看到嗷class选择器和id选择器的优先级是更高的；

如果想选多种标签的话，可以使用，号分阁；

3，常用CSS

  <div id="divid1">我是一个div</div>

接下来我们就对这个div进行化妆啦； 

1，设置颜色

使用color:

         #divid1 {
            color: dodgerblue;
         }

 

豪堪；

2，设置字体大小

用font-size：

         #divid1 {
            font-size: x-large;
         }

 

变大啦；

3，边框

border：

         #divid1 {
            border: solid;
         }

solid是实线应该，看看效果：
 因为是div超级长；

边框还可以拆分设置：
 

          #divid1 {
            border-color: brown;
            border-width: medium;
            border-style: solid;
          }

4，宽度和长度

width，设置宽度；height，设置长度；

          #divid1 {
            width: 150px;
            height: 300px;
          }

 

5，内边距

padding，设置内容和边框的距离。

          #divid1 {
            padding: 200px;
          }

 

这里还能单独设置，使用padding-top，padding-bottom，padding-left，padding-right对4个方向分别设置边距； 

6，外边距

margin，设置元素与元素之间的距离：

          #divid1 {
            margin: 100px;
          }

 

同理，这个也是能从4个方向单独设置外边距的；

本期内容就到这里了，下期我们学习JavaScript的学习，这样我们的前端知识足够应付一段时间了； 

# 学习 # 前端 # css # java
Logo
技术共进，成长同行——讯飞AI开发者社区

技术共进，成长同行——讯飞AI开发者社区

更多推荐

cover

人工智能和数据科学就业市场：到底发生了什么？

avatar 讯飞AI开发者社区
cover

AI智能体第4期——深入了解人工智能智能体的不同类型：反应式、规划式等

avatar 讯飞AI开发者社区
cover

智慧暖通节能系统：AI 驱动的 “按需供能 + 精准控温” 低碳解决方案

avatar 讯飞AI开发者社区