PHP全栈开发：CSS Ⅰ 选择器

Posted 2020-12-28 秋天的蒙奇奇

直到目前为止，我们把从html中的数据是如何通过php到服务器端，然后又通过PHP到数据库，然后从数据库中出来，通过PHP到HTML的整个过程通过一个案例过了一遍。

可以说，这些才刚刚开始。下面我们开启这整个流程的第二阶段，开始设计一个注册登录页面。

我们需要用到大量的CSS的排版布局的知识。

首先CSS是指层叠样式表，也就是Cascading Style Sheets

样式，也就是style，是CSS中最核心的部分。

样式，style定义如何显示HTML元素。

 

那么我们来看一下CSS语句是怎样的：

选择器{属性：值；属性：值；}

上面这就是一个CSS的语句了。

 

选择器我们在今后会大量的遇到，像类选择器，标签选择器等等。

CSS语句总是以分号结束，并用大括号括起来。

例如

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

这就是一组CSS语句。

注释的话呢，CSS的注释方法采用     /* 注释内容 */    这样的方式来进行注释。

 

好的，说完了这些，我们就可以开始介绍CSS语句中最重要的选择器。

没有选择器，就没有CSS

选择器用于在HTML页面中去选择东西，选好这些东西之后我们再去规定它的颜色和样式。

 

首先我们要介绍的是

id选择器

我们都知道，HTML标签都有一个id属性，这个id属性是唯一的，那么我们通过CSS的id选择器，就能够选择到特定的标签，然后来指定该标签的样式。

那么我们的id选择器在css里面是怎样声明的呢？

用#号。。

就是它，#号，记住了。

例如某个标签的id是name,那么我们可以用如下代码选择它，并规定它的样式

#name
{
text-align:center;
color:red;
}

好的，我们这就完成了id选择器的学习，接下来我们开始下一个选择器的学习，就是class选择器。

class选择器

class选择器和id选择器就不同了，class表示一个类，可以几个标签同属一个类

我们可以同时对这个类的好几个标签进行样式的设置

class选择器以点号.开头

这个很好记忆，我们类在C++里面它的属性就是用.来表示的。

所以点开头的，就是class选择器，假如我们有一个叫center的类，那么我们可以如下设置

.center
{
text-align:center;
}

标签选择器

标签选择器就是以标签开头的了。比如说以p标签开头

p
{
text-align:center;
}

当然我们也可以混合起来用

例如

p.center
{
text-align:center;
}

这就是所有p标签里面的class类才居中了。

而不是所有的p标签都居中

好像挺方便的。