div字体居中_div和span的使用

这节我们来制作以下效果

我们先把四个段落的文字都写出来，分别包含在p标签里

现在看到的效果如下

我们来一点一点给它加入样式

首先，来使文字水平居中并且加背景色

但是这样显示的效果有一些问题，直接加入文字背景会显示背景顶着两头，导致背景太长

这时我们就需要一个属性span

span只是一个容器，并不实际显示

有了span，我们就可以给span来设置背景颜色控制大小

具体的使用如下

设置了背景色、字体颜色、字体大小后，显示效果为

我们再来设置需要加粗的文字和改颜色的文字

效果如下

还有一些字体颜色和加粗的修改此处省略……

设置后效果如下

但是对比一下效果，我们可以看出整个文字的效果并不是纯黑色，而是灰色，这时我们需要怎么设置呢？

有两种方法：

1.设置每个p的color

2.给所有文字嵌套一个div标签，来设置div标签的color

我们肯定会选择第二种方法，先来介绍一下div

具体的使用如下

效果会看到所有文字(除设置外的)都变成灰色

设置完字体的属性样式后，我们来考虑整个容器如何居中？

我们之前已经使用过文字居中是text-align:center；

容器的居中就要使用margin:auto；

但是注意，如果不设置容器的大小，那么默认撑满整个屏幕，那么margin:auto;将没有意义

效果如下

本节代码：

我们来做一下总结

--- 笔记来自于【千锋教育】视频

- End –

‍

div字体居中_div和span的使用相关推荐

html的div修改字体,div字体大小_div内文字大小改变css代码
控制div内文字字体大小,其实非常简单,一个CSS样式即可实现,字体大小均能根据需求自由设置.不同div内字体大小根据需求也可用自由改变. 一.字体大小CSS样式 font-size 用法: p{fo ...
web前端字体居中_DIV中文字水准、垂直居中
DIV中文字水平.垂直居中实现Div层里的文字垂直居中的方法有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字:方法有不少,但真正 ...
html中span标签字数大小,DIV字体大小 span字体大小 font-size样式
DIV内字体大小,DIV内文字大小设置,div font-size字体大小布局篇,同时扩展到span字体大小,等标签内字体大小设置布局教程设置对象DIV字体大小或span字体大小设置有两种方法,一种 ...
简述div标签和span标签的不同_div与span区别及用法
DIV与SPAN区别及div与san用法篇接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候, ...
html div自动居中显示,DIV居中_div水平居中_DIV布局居中
若何让DIV居中呢?若何让DIV盒子水准居中呢?本节CSS5让大家实现DIV结构程度居中. 一.div居中完成引见在结构一张网页时,一般网页主体框架是居中于浏览器中的.实现最外层DIV水准居中与涉猎 ...
用CSS让DIV上下左右居中的方法
例如一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念利用表格单元格的居中属性. 步骤 ...
【HTML＋CSS网页设计与布局从入门到精通】第13章-块元素div和内联元素span格式布局
目录块元素背景,边框,颜色等布局块元素ID选择器另一个例子块元素中的图片盒子模型的演示块级元素中的文本格式块级元素div与内联元素span的对比两个行内元素的margin 两个块级元素 ...
Android中设置字体居中,【Android】TextView中不同大小字体如何上下垂直居中？
前言在客户端开发中,我们往往需要对一个TextView的文字的部分内容进行特殊化处理,比如加粗.改变颜色.加链接.下划线等.iOS为我们提供了AttributedString,而Android则提供 ...
html中div内容居中的方法
一.div内容居中的方法: 方法1:table-cell div中的内容居中:不改变盒子尺寸. <!DOCTYPE html> <html lang="en"& ...

div字体居中_div和span的使用

div字体居中_div和span的使用相关推荐

最新文章

热门文章