直到目前为止,我们把从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标签都居中

好像挺方便的。

PHP全栈开发(八):CSS Ⅰ 选择器的更多相关文章

  1. Python全栈开发:css引入方式

    css的四种引入方式: 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. <p style="color: red;backgr ...

  2. Python 全栈开发八 文件处理

    一.基本流程 打开文件得到文件句柄 将文件句柄赋值给一个变量 通过文件句柄对文件进行操作 关闭文件 二.基本操作 1.文件句柄 f = open("a.txt",encoding= ...

  3. 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天)

    点击了解更多Python课程>>> 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天) 课程大纲 1.这一期比之前的Python培新课程增加了很多干货:Linux ...

  4. 全栈开发必备的10款Sublime Text 插件

    Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等.Sublime Text 更妙的是它的可扩展性.所以,这里挑选了全栈开发必备的10款 Sublime T ...

  5. 全栈开发必备的10款 Sublime Text 插件

    Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等.Sublime Text 更妙的是它的可扩展性.所以,这里挑选了全栈开发必备的10款 Sublime T ...

  6. 老男孩Python高级全栈开发工程师【真正的全套完整无加密】

    点击了解更多Python课程>>> 老男孩Python高级全栈开发工程师[真正的全套完整无加密] 课程大纲 老男孩python全栈,Python 全栈,Python教程,Django ...

  7. Python 全栈开发【第0篇】:目录

    Python 全栈开发[第0篇]:目录   第一阶段:Python 开发入门 Python 全栈开发[第一篇]:计算机原理&Linux系统入门 Python 全栈开发[第二篇]:Python基 ...

  8. .NET全栈开发工程师学习路径

    PS:最近一直反复地看博客园以前发布的一条.NET全栈开发工程师的招聘启事,觉得这是我看过最有创意也最朴实的一个招聘启事,更为重要的是它更像是一个技术提纲,能够指引我们的学习和提升,现在转载过来与各位 ...

  9. Python全栈开发【面向对象】

    Python全栈开发[面向对象] 本节内容: 三大编程范式 面向对象设计与面向对象编程 类和对象 静态属性.类方法.静态方法 类组合 继承 多态 封装 三大编程范式 三大编程范式: 1.面向过程编程 ...

  10. Python全栈开发【基础一】

    Python全栈开发[第一篇] 本节内容: Python 的种类 Python 的环境 Python 入门(解释器.编码.变量.input输入.if流程控制与缩进.while循环) if流程控制与wh ...

随机推荐

  1. Menci的序列

    题目大意 一个长度为n的字符串s,只包含+和×. 选出一个子序列,然后你有一个ret,初始为0,按顺序扫你选出的这个子序列. 如果碰到的是+,ret+1,否则ret*2. 最大化ret%2^k. 首先 ...

  2. 上穷碧落下凡尘:Win10系统下基于Docker配置Elasticsearch7配合Python3进行全文检索交互

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_166 基于文档式的全文检索引擎大家都不陌生,之前一篇文章:使用Redisearch实现的全文检索功能服务,曾经使用Rediseac ...

  3. Windows下安装新硬盘

    首先,插上一个硬盘然后开机,会发现"我的电脑/此电脑"里面并没有这个硬盘,这是因为此时硬盘还没初始化和分区,分完区后每个分区会被作为一个逻辑盘显示在里面.那么接下来就是过程. Wi ...

  4. jQuery使用case记录

    添加元素/内容追加等 元素内: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 元素外: after() - 在被选元素之后插入内容 before() ...

  5. 【NOI P模拟赛】奶油蛋糕塔(状压 DP)

    题面 数据范围 1 ≤ n ≤ 5 × 1 0 5 1\leq n\leq5\times10^5 1≤n≤5×105 . 题解 n ≤ 20 n\leq 20 n≤20 的状压应该都会吧,状态记录已经 ...

  6. 【JAVA】学习路径64-补充-编写一个会抛异常的方法

    有一些方法,在调用的时候有可能会出错,所以我们使用这些方法的时候会使用try catch. 比如InputStream里面的read()方法等等,那么这些方法是怎么实现抛异常的效果的呢? 能抛异常的方 ...

  7. vivo前端智能化实践:机器学习在自动网页布局中的应用

    作者:vivo 互联网前端团队- Su Ning 在设计稿转网页中运用基于self-attention机制设计的机器学习模型进行设计稿的布局,能够结合dom节点的上下文得出合理的方案. 一.背景 切图 ...

  8. Neo4j在linux上的安装与Springboot的集成

    Neo4j在linux上的安装与Springboot的集成 在linux安装: 前提:安装配置好java环境 1.下载neo4j 官方社区版下载地址:https://neo4j.com/downloa ...

  9. 【Traefik二次开发】服务 Service 开发

    Service 定义 https://doc.traefik.io/traefik/routing/services/ The Services are responsible for configu ...

  10. Android同屏、摄像头RTMP推送常用的数据接口设计探讨

    前言 好多开发者在调用Android平台RTMP推送或轻量级RTSP服务接口时,采集到的video数据类型多样化,如420sp.I420.yv12.nv21.rgb的,还有的拿到的图像是倒置的,如果开 ...