PHP全栈开发(八):CSS Ⅰ 选择器
直到目前为止,我们把从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 Ⅰ 选择器的更多相关文章
- Python全栈开发:css引入方式
css的四种引入方式: 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. <p style="color: red;backgr ...
- Python 全栈开发八 文件处理
一.基本流程 打开文件得到文件句柄 将文件句柄赋值给一个变量 通过文件句柄对文件进行操作 关闭文件 二.基本操作 1.文件句柄 f = open("a.txt",encoding= ...
- 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天)
点击了解更多Python课程>>> 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天) 课程大纲 1.这一期比之前的Python培新课程增加了很多干货:Linux ...
- 全栈开发必备的10款Sublime Text 插件
Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等.Sublime Text 更妙的是它的可扩展性.所以,这里挑选了全栈开发必备的10款 Sublime T ...
- 全栈开发必备的10款 Sublime Text 插件
Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等.Sublime Text 更妙的是它的可扩展性.所以,这里挑选了全栈开发必备的10款 Sublime T ...
- 老男孩Python高级全栈开发工程师【真正的全套完整无加密】
点击了解更多Python课程>>> 老男孩Python高级全栈开发工程师[真正的全套完整无加密] 课程大纲 老男孩python全栈,Python 全栈,Python教程,Django ...
- Python 全栈开发【第0篇】:目录
Python 全栈开发[第0篇]:目录 第一阶段:Python 开发入门 Python 全栈开发[第一篇]:计算机原理&Linux系统入门 Python 全栈开发[第二篇]:Python基 ...
- .NET全栈开发工程师学习路径
PS:最近一直反复地看博客园以前发布的一条.NET全栈开发工程师的招聘启事,觉得这是我看过最有创意也最朴实的一个招聘启事,更为重要的是它更像是一个技术提纲,能够指引我们的学习和提升,现在转载过来与各位 ...
- Python全栈开发【面向对象】
Python全栈开发[面向对象] 本节内容: 三大编程范式 面向对象设计与面向对象编程 类和对象 静态属性.类方法.静态方法 类组合 继承 多态 封装 三大编程范式 三大编程范式: 1.面向过程编程 ...
- Python全栈开发【基础一】
Python全栈开发[第一篇] 本节内容: Python 的种类 Python 的环境 Python 入门(解释器.编码.变量.input输入.if流程控制与缩进.while循环) if流程控制与wh ...
随机推荐
- 2507-AOP- springboot中使用-使用注解方式
Springboot中使用aop,与SSM中使用AOP,整体配置与编写方式都是类似的.但是Springboot简化了很多xml配置,切点的表达式可以直接进行javaconfig. 记录一些示例 spr ...
- 羽夏看Linux内核——环境搭建
写在前面 此系列是本人一个字一个字码出来的,包括示例和实验截图.如有好的建议,欢迎反馈.码字不易,如果本篇文章有帮助你的,如有闲钱,可以打赏支持我的创作.如想转载,请把我的转载信息附在文章后面,并 ...
- LuoguP1516 青蛙的约会 (Exgcd)
#include <cstdio> #include <iostream> #include <cstring> #include <algorithm> ...
- RabbitMQ 入门系列:3、基础编码:官方SDK的引用、链接创建、单例改造、发送消息、接收消息。
系列目录 RabbitMQ 入门系列:1.MQ的应用场景的选择与RabbitMQ安装. RabbitMQ 入门系列:2.基础含义:链接.通道.队列.交换机. RabbitMQ 入门系列:3.基础含义: ...
- React报错之React hook 'useState' cannot be called in a class component
正文从这开始~ 总览 当我们尝试在类组件中使用useState 钩子时,会产生"React hook 'useState' cannot be called in a class compo ...
- 万物皆可集成系列:低代码释放用友U8+深度价值(2)—数据拓展应用
在上一篇内容我们介绍了如何利用低代码开发套件实现低代码应用与U8+系统的对接集成,本次给大家带来的是如何将用友U8+系统中的数据进行价值扩展和实际应用. 我们以生产物料齐套分析为例来说明如何利用低代码 ...
- 基于Anacoda搭建虚拟环境cudnn6.0+cuda8.0+python3.6+tensorflow-gpu1.4.0
!一定要查准cudnn,cuda,tensorflow-gpu对应的版本号再进行安装,且本文一切安装均在虚拟环境中完成. 下文以笔者自己电脑为例,展开安装教程阐述(省略anaconda安装教程): 1 ...
- java数组---初始化
public class ArrayDemo { public static void main(String[] args) { int[] a={1,2,3,4,5,6,7,8,9}; //静态初 ...
- Spring5中JdbcTemplate
JdbcTemplate是什么 JdbcTemplate 类提供了很多便利的方法解决诸如把数据库数据转变成基本数据类型或对象,执行写好的或可调用的数据库操作语句,提供自定义的数据错误处理. 在spri ...
- JavaScript之数组常用API
这篇文章主要帮助大家简单理解数组的一些常用API用法,许多小伙伴常用方法记不住?别急,看完下面的介绍您一定就会明白各个方法是如何用的了.该文章适合新手小白看,大佬可以多多指点️! 1.数组的创建以及A ...