零基础小白前端学习之初始CSS

╰+哭是因爲堅強的太久メ 2022-12-15 11:24 120阅读 0赞

现在的互联网前端分为三层：

HTML:超文本标记语言。从语义的角度描述页面结构  
CSS:层叠样式表。从审美的角度负责页面样式  
JS:Javascript。从交互的角度描述页面的行为  
css它是一个很神奇的东西，设计者可以通过修改样式表的定义从而使我们的网页呈现出完全不同的外观。比如大家耳熟能详的购物网站：淘宝、京东、小米等等。

1.认识css

CSS全称为“层叠样式表”(Cascading Style Sheets),它主要是用于定义HTML内容在浏览器内的显示样式，比如文字大小、颜色、字体加粗等等。

如下代码：

p { 
        font-size:12px;
        color:red;
        font-weight:bold;
    }
    在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，
    不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，
    欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。
    好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】  每天更新最新技术文章干货。

代码解释：  
![在这里插入图片描述][20201016135106457.png_pic_center]  
使用css样式的一个好处是可以通过定义某个样式，可以让不同网页位置的文本有着统一的字体、字号或者颜色。比如上面代码就是选中了页面中所有的p标签来设置统一样式。

2.css的优势  
那么，在哪里编写我们的css呢？接下来给大家介绍style标签。

style标签包含网页的样式信息。默认情况下，该标签的样式信息通常是CSS的格式。

比如：  
我们网页中有一段文字小猿圈，帮助1000w人高效学编程，现在我想让小猿圈，IT技术免费学习平台这两个短语的文本颜色设置为红色，这时我们就可以通过设置样式来作用，而且只需要编写一条css样式语句。

第一步，新建index.html,将整段文字用

标签包括起来。

第二步，在head标签中使用

span{ 
        color:red;
    }

第三步，用浏览器打开该网页,观察文字的颜色变为了红色

代码如下：

<!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
          span{ 
            color:red;
          }
        </style>
      </head>
      <body>
        <p>
          <span>小猿圈</span>，帮助1000w人高效学编程
        </p>
    
      </body>
    </html>

> 注意：单独将标语用span标签标示出来，不会影响文本的正常显示。如果再给span标签设置了样式，那么该span标签就体现了它的语义。  
> 那么在网页中，尤其是文本，在不影响文本内容变化的情况下，并且将凸显的内容标识出来，我们就可以使用span标签再配合我们的css来修改样式。

效果展示：  
![在这里插入图片描述][20201016135150442.png_pic_center]  
3.css的语法

那么上节课咱们讲解完css的优势之后，我们重点来看一下，如果编写我们的css。

css样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：  
![在这里插入图片描述][20201016135236293.png_pic_center]  
选择符:我们又称为选择器，指明网页中应用样式规则的元素，如上述图中网页的所有§的文本变为蓝色，而其它元素(如ul,ol等等)不会受到影响。

声明：在英文大括号"\{\}“中的就是声明，属性和值之间用英文冒号”：“分割。当有多条声明时，中间可以英文分号”;"分割，如下所示：

> p\{font-size：12px;color:red;\}

再举个例子有助于大家理解什么是选择符、属性、值

比如我家隔壁有三个人，并且有两个人同名，都叫王大大，并且身高是175，年龄都是20岁。还有一个人叫李小小，年龄18岁。那么我就可以这样表示。

> 王大大\{身高:175cm;年龄:20岁;\}

那么。王大大，就是选中了隔壁三个中的其中同名的两个人。叫王大大的这个两个人，他们有共同的特征，比如身高和年龄一样。那么这些特征我们称为叫声明。身高和年龄表示属性，175cm和20岁表示值。那么我们就能将这个人表示出来了。那么对比上述的例子，我们来看css的话，是否变得很简单呢？答案是的。

注意：

为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：

p{ 
        font-size：12px;
        color:red;
    }

4.css注释  
在之前将HTML的注释的时候，我们讲解了它的作用，在这里就不一一阐述了，大家可以翻看html的注释，在css也有注释语句：

用/*注释语句*/来表明(html中使用 )。就像下面代码：

/*设置段落默认样式*/
    p { 
        font-size：12px;
        color: red;
    }

注意：css也有注释嵌套

[20201016135106457.png_pic_center]: /images/20221123/c53b64e0798e412fac5a5c7f0ae5a24b.png
[20201016135150442.png_pic_center]: /images/20221123/492b2684cdee4428afd62a1051acea62.png
[20201016135236293.png_pic_center]: /images/20221123/bea1bfb54ef9441bba86fe4175dbd59a.png