css:基础

Au_ust2024-11-09 8:50

前言

我们之前其实也可以写出一个看起来算是一个网页的网页，为什么我们还要学css？

CSS（Cascading Style Sheets）也叫层叠样式表，是负责美化的，我们之前说html就是一个骨架，css就可以用来美化网页

这个美化主要包括文本内容，图片的外形，版面布局和外观显示样式

从而将网页的结构和样式部分解耦

css语法

css代码风格

小写字母为主，代码分段展开写，属性值前面、冒号后面保留一个空格，标签和大括号中间保留空格像这样：

照例我们打开一个html文件，输入！后按tab键生成初始代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

在body标签内写字，在head里添加：

html 复制代码 
<style>
        p {
            color: skyblue;
        }
    </style>

改变颜色

在p选择器内添加：

 font-size: 12px;

改变字体

css选择器

选择器的作用就是方便选择我们要进行优化的元素，怎么定位我们的元素？通过标签啊

所以选择器就是选择标签、并更改样式

选择器可以分为基础选择器 和复合选择器

基础选择器

基础选择器就是单个作用的选择器，例如标签选择器、类选择器、id选择器和通配符选择器

选择器：对谁进行修改

选择器里面的一行一行的叫声明，表示要修改那一部分的样式

声明的属性是键值对，使用 ; 区分键值对, 使用 : 区分键和值

标签选择器

我们刚刚写的其实就是一个简单的用标签选择器来改变字体颜色的作用，style是样式的意思，因为我们要作用的是p标签内的内容，所以在style内用p标签和大括号来表示

style标签放哪都行，但是建议放在head里

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法</title>
    <style>
        p {
            color: skyblue;
            font-size: 12px;
        }

        div {
            color: deeppink;
        }
    </style>
</head>

<body>
    <p>喜欢暴雪校园行的孩子们你们好啊</p>
    <div>我是炉石传说玩家</div>
    <span>励志轩</span>
    <p>我最喜欢的模式是酒馆战旗模式</p>
</body>

可以发现这样就把某一类的标签都设置成了统一样式（第一行和最后一行都是p标签内的内容，所以都被改变了）

但是这样我们就不能只改变某一个p标签内的内容了

类选择器

我们可以给我们要设置样式的标签们定义为一个类，这样我们直接对相应的类进行操作就好了（面向对象别再追了）

在style内加入

html 复制代码 
.class{

}

并且对对应的类内加入属性class,自己起个名字

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法</title>
    <style>
        p {
            color: skyblue;
            font-size: 12px;
        }

        div {
            color: deeppink;
        }

        .陶喆 {
            color: fuchsia
        }

        .周杰伦 {
            color: forestgreen
        }
    </style>
</head>

<body>
    <p>喜欢暴雪校园行的孩子们你们好啊</p>
    <div>我是炉石传说玩家</div>
    <span>励志轩</span>
    <p>我最喜欢的模式是酒馆战旗模式</p>
    <ul>
        <li class="陶喆">流沙</li>
        <li class="林俊杰">江南</li>
        <li class="周杰伦">七里香</li>
        <li class="陶喆">天天</li>
        <li class="陶喆">蝴蝶</li>
        <li class="陶喆">寂寞的季节</li>
        <li class="周杰伦">稻香</li>
    </ul>
</body>

可以看见颜色进行了相应的改变（在开发的时候不要用中文来命名类，尽量用英语）

类标签在开发中挺常用的

当然我们的class名字也不能和我们的标签重名，就像C语言不能和关键字重名一样

生成一个颜色小盒子：

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法</title>
    <style>
        p {
            color: skyblue;
            font-size: 12px;
        }

        div {
            color: deeppink;
        }

        .陶喆 {
            color: fuchsia
        }

        .周杰伦 {
            color: forestgreen
        }

        .first {
            height: 100px;
            width: 100px;
            background-color: gold;//设置背景颜色
        }

        .second {
            height: 50px;
            width: 100px;
            background-color: brown;
        }

        .third {
            height: 30px;
            width: 100px;
            background-color: black;
        }
    </style>
</head>

<body>
    <p>喜欢暴雪校园行的孩子们你们好啊</p>
    <div>我是炉石传说玩家</div>
    <span>励志轩</span>
    <p>我最喜欢的模式是酒馆战旗模式</p>
    <ul>
        <li class="陶喆">流沙</li>
        <li class="林俊杰">江南</li>
        <li class="周杰伦">七里香</li>
        <li class="陶喆">天天</li>
        <li class="陶喆">蝴蝶</li>
        <li class="陶喆">寂寞的季节</li>
        <li class="周杰伦">稻香</li>
    </ul>
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
</body>

当然，我们说过盒子里可以写字的：

html 复制代码 
 <div class="first">我是海绵宝宝的头</div>
    <div class="second">我是海绵宝宝的裤子</div>
    <div class="third">我是海绵宝宝的鞋</div>

在开发场景中，一个标签可能具有多种身份，比如励志轩既是她自己，也是一个通信工程的学生，还是一个自学计算机的励志轩；或者我们设置励志轩的参数也有很多，比如玩什么游戏、喜欢吃什么水果，我们在修改的时候也可以分不同的类来设置，也可以把同一类一起设置，更清晰

所以一个标签可以有多种类名：

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法</title>
    <style>
        p {
            color: skyblue;
            font-size: 12px;
        }

        div {
            color: deeppink;
        }

        .陶喆 {
            color: fuchsia
        }

        .周杰伦 {
            color: forestgreen
        }

        .first {
            height: 100px;
            width: 100px;
            background-color: gold;
        }

        .second {
            height: 100px;
            width: 100px;
            background-color: brown;
        }

        .third {
            height: 100px;
            width: 100px;
            background-color: black;
        }

        .eat {
            color: blueviolet;
        }

        .size {
            font-size: 12px;
        }
    </style>
</head>

<body>
    <p>喜欢暴雪校园行的孩子们你们好啊</p>
    <div>我是炉石传说玩家</div>
    <span>励志轩</span>
    <p>我最喜欢的模式是酒馆战旗模式</p>
    <ul>
        <li class="陶喆">流沙</li>
        <li class="林俊杰">江南</li>
        <li class="周杰伦">七里香</li>
        <li class="陶喆">天天</li>
        <li class="陶喆">蝴蝶</li>
        <li class="陶喆">寂寞的季节</li>
        <li class="周杰伦">稻香</li>
    </ul>
    <div class="first">我是海绵宝宝的头</div>
    <div class="second">我是海绵宝宝的裤子</div>
    <div class="third">我是海绵宝宝的鞋</div>
    <div class="eat size">励志轩喜欢吃苹果</div>
</body>

注意类名直接用空格隔开

（其实励志轩不喜欢吃苹果，我要诽谤她）

id选择器

id选择器的功能是类似的：

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法</title>
    <style>
        
        #荷叶饭{
            color: hotpink;
        }
    </style>
</head>

<body>
    <div id="荷叶饭">我叫荷叶饭</div>
</body>

注意：引用用#号

id选择器和类选择器最大的不同是id是唯一的，而且我们的id只能被调用一次，就像每个进程的pid都是不一样的，我们的id也是唯一的

我们对id的改变也是更倾向于结构上的改变

通配符选择器

*是我们的通配符，我们在css里，只要用它，就可以改变所有标签的样式

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法</title>
    <style>
        p {
            color: skyblue;
            font-size: 12px;
        }

        div {
            color: deeppink;
        }

        .陶喆 {
            color: fuchsia
        }

        .周杰伦 {
            color: forestgreen
        }

        .first {
            height: 100px;
            width: 100px;
            background-color: gold;
        }

        .second {
            height: 100px;
            width: 100px;
            background-color: brown;
        }

        .third {
            height: 100px;
            width: 100px;
            background-color: black;
        }

        .eat {
            color: blueviolet;
        }

        .size {
            font-size: 12px;
        }

        #荷叶饭 {
            color: hotpink;
        }

        * {
            color: mediumslateblue;
        }
    </style>
</head>

<body>
    <p>喜欢暴雪校园行的孩子们你们好啊</p>
    <div>我是炉石传说玩家</div>
    <span>励志轩</span>
    <p>我最喜欢的模式是酒馆战旗模式</p>
    <ul>
        <li class="陶喆">流沙</li>
        <li class="林俊杰">江南</li>
        <li class="周杰伦">七里香</li>
        <li class="陶喆">天天</li>
        <li class="陶喆">蝴蝶</li>
        <li class="陶喆">寂寞的季节</li>
        <li class="周杰伦">稻香</li>
    </ul>
    <div class="first">我是海绵宝宝的头</div>
    <div class="second">我是海绵宝宝的裤子</div>
    <div class="third">我是海绵宝宝的鞋</div>
    <div class="eat size">励志轩喜欢吃苹果</div>
    <div id="荷叶饭">我叫荷叶饭</div>
</body>

毫无反应！为什么？因为我们的通配符优先级很低

我们把其他部分的样式修改都注释掉：

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法</title>
    <style>
        /* p {
            color: skyblue;
            font-size: 12px;
        }

        div {
            color: deeppink;
        }

        .陶喆 {
            color: fuchsia
        }

        .周杰伦 {
            color: forestgreen
        }

        .first {
            height: 100px;
            width: 100px;
            background-color: gold;
        }

        .second {
            height: 100px;
            width: 100px;
            background-color: brown;
        }

        .third {
            height: 100px;
            width: 100px;
            background-color: black;
        }

        .eat {
            color: blueviolet;
        }

        .size {
            font-size: 12px;
        } */

        #荷叶饭 {
            color: hotpink;
        }

        * {
            color: mediumslateblue;
        }
    </style>
</head>

<body>
    <p>喜欢暴雪校园行的孩子们你们好啊</p>
    <div>我是炉石传说玩家</div>
    <span>励志轩</span>
    <p>我最喜欢的模式是酒馆战旗模式</p>
    <ul>
        <li class="陶喆">流沙</li>
        <li class="林俊杰">江南</li>
        <li class="周杰伦">七里香</li>
        <li class="陶喆">天天</li>
        <li class="陶喆">蝴蝶</li>
        <li class="陶喆">寂寞的季节</li>
        <li class="周杰伦">稻香</li>
    </ul>
    <div class="first">我是海绵宝宝的头</div>
    <div class="second">我是海绵宝宝的裤子</div>
    <div class="third">我是海绵宝宝的鞋</div>
    <div class="eat size">励志轩喜欢吃苹果</div>
    <div id="荷叶饭">我叫荷叶饭</div>
</body>

可以看到除了最后一行都改变了，因为最后一行还设置了别的改动，优先级比通配符高

一般不怎么用捏

css字体属性

定义字体系列
html 复制代码 
.陶喆 {
            font-family: '宋体'
        }

        .周杰伦 {
            font-family: 'Cambria';
        }

可以看见部分字体改变了

我们还可以设置多个字体，可以方便用户在查看网页的时候，如果没安装第一种字体，你们就执行第二种字体

html 复制代码 
 .eat {
            font-family: 'Courier New', Courier, monospace;
        }

一般都使用系统默认字体，保证网页在各种浏览器都能正常显示

定义字体大小
html 复制代码 
body {
            font-size: 80px;
        }

这时候我们就把body内的字体都改变了

但是我们发现标题的大小没有改变

标题的大小是需要单独设置的捏

html 复制代码 
 p {
            font-size: 100px;
        }

不要忘记加px（单位：像素）

谷歌浏览器的默认文字为16px

定义字体粗细

我们之前学了html的<b></b>和<strong></strong>我们也可以用css里的属性来设置字体的粗细

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法</title>
    <style>

        .bold {
            font-weight: bold;
        }
    </style>
</head>

<body>
   
    <div class="bold">我是一行变粗的字</div>
</body>

看看效果：

我们也可以设置数字来决定粗细，选择700就和加粗是一个效果

normal==100,bold==700,数字后面不能加单位

在实际开发中，我们多用的是数字；但是如果你的内容十分重要的话，建议用html的方式加粗

定义文字样式
html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法</title>
    <style>
        
        .bold {
            font-weight: 700;
        }

        .em {
            font-style: italic;
        }
    </style>
</head>

<body>
    
    <div class="bold">我是一行变粗的字</div>
    <div class="em">我是一行变斜的字</div>
</body>

斜了：

但是一般我们不会让字变斜，更多的时候是让字体正过来：

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法</title>
    <style>

        .bold {
            font-weight: 700;
        }

        .em {
            font-style: italic;
        }

        .normal {
            font-style: normal;
        }
    </style>
</head>

<body>
    
    <div class="bold">我是一行变粗的字</div>
    <div class="em">我是一行变斜的字</div>
    <em class="normal">我是一行变直的字</em>
</body>

本来是斜的，现在直了

复合属性

在一个类选择器里简写（但是不常用，而且感觉写起来累累的）

大概是这个格式：

html 复制代码 
 font:font-style font-weight font-size/line-height font-family
html 复制代码 
        #荷叶饭 {
            /* font:font-style font-weight font-size/line-height font-family */
            font: italic 700 50px 'icrosoft yahei';
        }

我觉得这个格式很神经病，规则也很多，例如：不能更换顺序，各个属性用空格隔开，不需要设置的属性值可以忽略，但又必须保留font_size和font_family属性，不然就不起作用

我将不会再使用这个写法

css文本属性

文本颜色

我们之前改变颜色都是用设定号的默认颜色选，像这样：

首先我们知道任何一种色光都可以用红、绿、蓝三种颜色组成，所以不同的颜色本质上只是其他颜色栈的比例不同而已：

RGB16进制代码，FF代表16，每两位十六进制数分别对应R(红色)，G(绿色)，B(l0-255的亮度值(占比)

其中红色#FF0000，绿色#00ff00，蓝色为#0000ff，黄色为#ffff00，紫色为#ff00ff，青色为#00ffff，白色#ffffff，黑色#000000（上面所提到的都是饱和色）

妈呀刚刚文章莫名其妙的乱码了

我们还可以用rgb格式来表示颜色，原理是哟个原理，都是用三原色不同亮度的占比来确定颜色的：

输入对应的值来修改颜色比例，范围也是0-255

因为本人小接触过一点电子绘画，其实颜色还有一种表示方法是用HSV三个参数来表示颜色，分别是色相，饱和度，色明度

颜色有很多种，红色、蓝色这种就是一个色相，一个颜色有多红/蓝，就是饱和度，一个颜色暗不暗/亮不亮就是亮度

（我一般画画更喜欢用hsv模式来找颜色，因为更符合人体工程，毕竟我不是计算机）

文本对齐

我们之前学了html里改变表格对齐方式的center，现在我们可以在css里改变文本的对齐方式：

 .陶喆 {
            text-align: center;
        }

同样的，把center改成left就可以向左对齐，right可以向右对齐

装饰文本

这个我们在html里也学过，包括下划线、删除线、上划线

在text-decoration这个属性里

underline:下划线

overline:上划线

line-through:删除线

none:默认值，默认什么都不加

html 复制代码 
   .陶喆 {
            text-decoration: underline;
        }

        .周杰伦 {
            text-decoration: overline;
        }

        .林俊杰 {
            text-decoration: line-through
        }

默认值什么时候使用？将带线的文本去线，例如引入的网址

文本缩进

感觉像学word。。。

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法</title>
    <style>
     
    p {
            text-indent: 20px;//缩进20px
        }
    </style>
</head>

<body>
    
    <p>在意大利，一般在别人参加什么考试或者比赛之前，为了表达自己的祝福，就会对他们说："In bocca al
        lupo！"</p>
    <p>这句话的字面意思是，在狼的嘴巴里。但是它的实际的意思相当于"祝你好运！"。而回答的时候一般会说："Crepi！"意思是但愿如此。Crepi的原型是动词crepare，意为"裂开，破裂"。
    <p>很显然，既然在狼的嘴巴里，那么我们就把狼嘴给破开吧。</p>
    </p>
</body>

In bocca allupo！

如果对20取负值，就会向左突出，消失：

20px是像素值的大小，并不方便我们真正的控制页面布局，使用还要另一种单位：em

em是一个相对单位，它表示的是一个当前元素（font-size）一个文字的大小；如果当前元素没有设置大小，则按照父元素的一个文字大小做单位（例如<li>就是<ul>的子元素）

html 复制代码 
 p {
            text-indent: 2em;
        }
行间距

妈呀我不会学的真是word吧

声明：

html 复制代码 
p {
            line-height: 16px;
        }

16像素是一个文字默认的大小

html 复制代码 
p {
            line-height: 26px;
        }

行距变宽了

css样式表

我们之前写的这种放在html文件内的叫内部样式表， 还有一种外部样式表，新建一个css文件，使用link标签引入到html文件里，这样我们的样式也可以同时应用到多个html文件里，真正实现了结构和样式的分离：

我们把我们之前写的样式直接写道css文件里：

新建文件，后缀名为.css，写入声明：

html 复制代码 
  /* p {
            color: skyblue;
            font-size: 12px;
        } */

  div {
      color: deeppink;
  }

  .陶喆 {
      color: fuchsia
  }

  .周杰伦 {
      color: forestgreen
  }

  .first {
      height: 100px;
      width: 100px;
      background-color: gold;
  }

  .second {
      height: 100px;
      width: 100px;
      background-color: brown;
  }

  .third {
      height: 100px;
      width: 100px;
      background-color: black;
  }

  .eat {
      color: blueviolet;
  }

  .size {
      font-size: 12px;
  }

  #荷叶饭 {
      color: rgb(red, green, blue)
  }

  /* * {
            color: mediumslateblue;
        } */

  .陶喆 {
      font-family: '宋体'
  }

  .周杰伦 {
      font-family: 'Cambria';
  }

  .eat {
      font-family: 'Courier New', Courier, monospace;
  }

  /* body {
            font-size: 80px;
        }

        p {
            font-size: 100px;
        } */

  .bold {
      font-weight: 700;
  }

  .em {
      font-style: italic;
  }

  .normal {
      font-style: normal;
  }

  #荷叶饭 {
      /* font:font-style font-weight font-size/line-height font-family */
      font: italic 700 50px 'icrosoft yahei';
  }

  /* .陶喆 {
            text-align: center;
        } */
  .陶喆 {
      text-decoration: underline;
  }

  .周杰伦 {
      text-decoration: overline;
  }

  .林俊杰 {
      text-decoration: line-through
  }

  p {
      text-indent: 2em;
  }

  p {
      line-height: 16px;
  }

然后引入我们的css文件，在html文件的head标签内里用link标签：

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法</title>
    <link rel="stylesheet" href="1107.css">//stylesheet:样式表
</head>

<body>
    <p>喜欢暴雪校园行的孩子们你们好啊</p>
    <div>我是炉石传说玩家</div>
    <span>励志轩</span>
    <p>我最喜欢的模式是酒馆战旗模式</p>
    <ul>
        <li class="陶喆">流沙</li>
        <li class="林俊杰">江南</li>
        <li class="周杰伦">七里香</li>
        <li class="陶喆">天天</li>
        <li class="陶喆">蝴蝶</li>
        <li class="陶喆">寂寞的季节</li>
        <li class="林俊杰">美人鱼</li>
        <li class="周杰伦">稻香</li>
    </ul>
    <div class="first">我是海绵宝宝的头</div>
    <div class="second">我是海绵宝宝的裤子</div>
    <div class="third">我是海绵宝宝的鞋</div>
    <div class="eat size">励志轩喜欢吃苹果</div>
    <div id="荷叶饭">我叫荷叶饭</div>
    <div class="bold">我是一行变粗的字</div>
    <div class="em">我是一行变斜的字</div>
    <em class="normal">我是一行变直的字</em>
    <p>在意大利，一般在别人参加什么考试或者比赛之前，为了表达自己的祝福，就会对他们说："In bocca al
        lupo！"</p>
    <p>这句话的字面意思是，在狼的嘴巴里。但是它的实际的意思相当于"祝你好运！"。而回答的时候一般会说："Crepi！"意思是但愿如此。Crepi的原型是动词crepare，意为"裂开，破裂"。
    <p>很显然，既然在狼的嘴巴里，那么我们就把狼嘴给破开吧。</p>
    </p>
</body>

改变前：朴素的页面

改变后：

炒鸡好用（想吃美广的炒鸡）

如果进行很小的修改，是可以在行内修改的，其实style也是标签的属性：

html 复制代码 
<em class="normal" style="color: rgb(16, 9, 225);">我是一行变直的字</em>

一般还是更推荐外部样式表

相关推荐
桂月二二4 小时前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
hunter2062065 小时前
ubuntu向一个pc主机通过web发送数据，pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb5 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角5 小时前
CSS 颜色
前端·css
浪浪山小白兔6 小时前
HTML5 新表单属性详解
前端·html·html5
lee5767 小时前
npm run dev 时直接打开Chrome浏览器
前端·chrome·npm
2401_897579657 小时前
AI赋能Flutter开发：ScriptEcho助你高效构建跨端应用
前端·人工智能·flutter
limit for me7 小时前
react上增加错误边界 当存在错误时 不会显示白屏
前端·react.js·前端框架
浏览器爱好者7 小时前
如何构建一个简单的React应用？
前端·react.js·前端框架
qq_392794487 小时前
前端缓存策略：强缓存与协商缓存深度剖析
前端·缓存
热门推荐
01centos7 init.d 和system.d02Dell服务器升级ubuntu 22.04失败解决03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04PyTorch AMP 混合精度中grad_scaler.py的scale函数解析05Windows10安装PCL1.14.0及点云配准06密码学原理技术-第六章-introduction to pulibc-key cryptography07xgboost: Why not implement distributed XGBoost on top of spark08Oracle Scheduler: Calendaring09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10大语言模型LLM的文生图、文生视频和文生语音技术简介