网络日志

一文解读: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...