乐趣区

关于css:一文解读CSS语法注释使用方式选择器

写在开篇

html 的内容,想要扭转它的款式?比方色彩、字体、布局,等等,怎么破?CSS 代码带你腾飞!

css 语法

css 的语法非常简单,如下:

 选择器 {属性: 值; 属性: 值}

例如:

h2 {color: cornflowerblue;font-size: 60px;}

下面的 h2 是元素选择器,属性 color,它的值是 cornflowerblue。属性 font-size,它的值是 60px。

应用 css 的 3 种形式

有 3 种 css 的应用形式:

  • 内部 CSS
  • 外部 CSS
  • 行内 CSS

    尽管有 3 种,但笔者只讲内部 css,在理论开发中,内容必须和款式拆散,大有益处,缓缓领会吧!

那么如何应用内部的 css?须要在 html 的 head 中通过 link 来引入,如下:

<head>
    <link rel="stylesheet" href="./test.css">
</head>

css 代码中如何写正文

在写代码的过程中,正文很重要。但不要自觉的正文,对要害的、重要的逻辑做简单明了的正文即可,不然写的代码看起来跟一坨屎没什么区别。那么在 css 代码中,也是能够做正文的。当然了,该正文的时候就正文,不该正文的时候就别正文。那到底要不要加正文?算了,随你吧!不!我还是啰嗦一下,对简单明了、见名知意的代码就没必要正文了,要尽量让咱们的代码看起来简洁、优雅。笔者已经接手过一个我的项目,看了他人写的代码之后,就是一坨屎。我看个屁啊!间接重写,看都不想看了。

回到正题,解锁 3 种正文姿态。

姿态 1:

/* 正文内容 */
h2,h3,p{
    text-align: center;
    color: cornflowerblue;
    font-size: 60px;
}

姿态 2:

/* 正文内容,正文内容,正文内容。*/
h2,h3,p{
    text-align: center;
    color: cornflowerblue;
    font-size: 60px;
}

姿态 3:

h2,h3,p{
    text-align: center;
    color: cornflowerblue; /* 正文内容 */
    font-size: 60px;
}

css 选择器

css 的选择器很重要,所以笔者独自拿出来讲了。上面咱们分析一下 5 种抉择

1. 元素选择器

元素选择器就是通过元素来进行抉择,并设置 css 款式,看上面小栗子。

创立 home.html 文件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title> 全栈运维学习 </title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <p> 面向运维编程 </p>
    <p> 面向运维编程 </p>
</body>
</html>

创立 test.css 文件

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

2. id 选择器

通过 id 选择器,来抉择元素,前提条件是元素须要设置了 id,看上面的小栗子。

创立 home.html 文件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title> 全栈运维学习 </title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <p id="a1"> 面向运维编程 </p>
    <p id="a2"> 面向运维编程 </p>
</body>
</html>

创立 test.css 文件

#a1 {
    text-align: center;
    color: blue;
    font-size: 100px;
}

id 选择器的语法是,后面须要加 #号,而后跟着是 id 的名字,这样就能抉择到元素了,如这个例子只抉择了#a1,#a2 并没有设置任何款式,成果见下图。

效果图如下:

3. 类选择器

类选择器的语法是通过一个点(“.”)来进行抉择,前提是要给元素设置一个类名字,请看上面案例。

创立 home.html 文件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title> 全栈运维学习 </title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <p class="c1"> 彩虹运维技术栈社区 </p>
    <p class="c1"> 面向运维编程 </p>
</body>
</html>

创立 test.css 文件

.c1 {
    text-align: center;
    color: red;
    font-size: 60px;
}

下面的例子中,类名均为 c1 的,设置的 css 款式都会失效,那如果想针对性的设置属性怎么做?请持续往下看小栗子。

前端代码放弃不变,批改一些 css 的代码,请细品:

h2.c1 {
    text-align: center;
    color: red;
    font-size: 80px;
}

p.c1 {
    color: green;
    font-size: 60px;
}

效果图如下:

![上传中 …]()

4. 通用选择器

通用选择器最大特点就是“一锅端”,不论你给元素设置了 id 也好还是 class 也好,都间接将所有元素都利用 css 的款式。它是用“*”符号来作为抉择,请看上面例子。

html 代码别离设置了有 class 和 id,以及啥都没有设置的最初一个 p 元素

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title> 全栈运维学习 </title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <h2 class="cls_1"> 彩虹运维技术栈社区 </h2>
    <p id="id_1"> 继续分享运维畛域技能 </p>
    <p> 继续分享运维开发技能 </p>
</body>
</html>

上面是 css 的代码

* {
    text-align: center;
    color: darkmagenta;
    font-size: 60px;
}

来看看“一锅端”的成果:

5. 分组选择器

分组选择器的最大益处就是能够缩小 css 代码量,如果局部元素须要设置一样的款式,那么能够将它进行分组,抉择器用逗号分隔。

对 html 代码进行革新革新,如下:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title> 全栈运维学习 </title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <h2> 彩虹运维技术栈社区 </h2>
    <h3> 继续分享运维畛域技能 </h3>
    <p> 继续分享运维开发技能 </p>
</body>
</html>

h2、h3、p 为一组,均利用了同样的 css 款式,css 代码如下:

h2,h3,p{
    text-align: center;
    color: cornflowerblue;
    font-size: 60px;
}

成果如下图:

写在最初

本次分享的到此结束,感激浏览。望多多关注咱们,点赞、珍藏、转发。

本文转载于(喜爱的盆友关注咱们):https://mp.weixin.qq.com/s/K0…

退出移动版