持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

继HTML学习后，我又进入了css的学习，刚开始我并不知道css是什么东西，直到前端的学长告诉我css的主要作用就是美化网页，比如说设置文本字体、大小、图片边框、边距、排版等，它也是一种标记语言，而他的功能却是HTML很难做到的。

Css基础

Css规范

“无规矩，不方圆”,css也要遵从一定的规则，他的规则主要由两个主要部分构成：选择器以及一条或多条声明。比如：

<html>
	<head>
		<style>
			h3 { 
			color: white;
    		fontsize:15px;
			}
		</style>
	</head>
</html>

代码规范：代码采用展开格式；在属性值前面，冒号后面，保留一个空格；在选择器和大括号中间保留空格；尽量用小写字母；

Css选择器

选择器分为基础选择器和复合选择器两大类。

基础选择器

基础选择器最为常用，其分为：标签选择器、类选择器、id选择器和通配符选择器，下面介绍一下各个选择器的作用。

标签选择器

标签选择器使用HTML标签名称作为选择器，为某一类标签添加CSS样式，但是不可以设计差异化样式，我们常常会在全局CSS中通过标签选择器为一些元素设定基本的规范，比如说我为所有的盒子的外边距和内边距都清空

div {
    margin:0;
    padding:0;
}

类选择器

如果想要差异化单独选一个或者某几个标签，我们就要用到类选择器,基本格式如下：

<html>
	<head>
		<style>
		.hot { 
			color: white;
			}
		</style>
	</head>
	<body>
   		<p class="hot"> 文本内容 </p>
	</body>
</html>

我们可以在“."后进行自定义类名，不要使用纯数字、中文等命名，命名要有意义，让别人一目了然，可以在网上查找一些web前端开发命名规范,我们可以简单记为：样式.定义，结构class调用。

接下来我们用类选择器来一波实战吧：

<html>
    <head>
        <title>让我们用类选择器画三个盒子吧</title>
        <style>
            .pink{
                width:50px;
                height:50px;
                background-color:pink;
            }
            .purple{
                width:50px;
                height:50px;
                background-color:purple;
            }
        </style>
    </head>
    <body>
        <div class="pink">粉色</div>
        <div class="pink">粉色</div>
        <div class="purple">紫色</div>
    </body>
</html>

这样我们就成功的画出来了竖向排列的两个粉色的盒子和一个紫色的盒子，由此我们也可以验证div标签本身就是一个盒子。

就像人有很多个名字一样，大名，小名，明星还有艺名，我们也可以给一个标签指定多个类名，那多类名具体的使用方式是什么呢？具体格式如下：

<html>
    <head>
        <title>为一个标签指定两个类名</title>
        <style>
            .blue{
                color:blue;
            }
            .font
            {
                font-size:40px;
            }
        </style>
    </head>
    <body>
       <div class="blue font">嘻嘻</div>
    </body>
</html>

这样我们就可以把嘻嘻设置成字体大小为40px,字体颜色为蓝色的字啦，但多个类名要用空格隔开。

id选择器

id选择器可以为标有特定的id的html元素指定特定的样式，基本格式如下：

<html>
    <head>
        <title>id选择器</title>
        <style>
          #pink{
              color:pink;
            }
        </style>
    </head>
    <body>
       <div id="pink">嘻嘻</div>
    </body>
</html>

我们可以简单的记忆为：样式#定义，结构id调用。由上可以看出，id选择器和类选择器很相似，他们之间有什么区别呢？类选择器可以调用多次，但id选择器只能调用一次，除此之外，我们尽量不要用ID选择器为元素赋予样式，其存在的作用是为获取元素而生的。

通配符选择器

在css中，通配符选择器使用"*"定义，它表示选取页面中所有元素，基本格式如下：

<style>
*{
    color: red;
}
</style>

只要在head标签内写下这些，body标签内的元素将都会被改变，一般来讲我们可以通过预先设置*来为所有的元素设置基础样式。

* {
    margin:0;
    padding:0;
}

这种写法非常常见

lxmoe的css学习笔记（一）