web进门第11天
来源:互联网 发布:zookeeper java 编辑:程序博客网 时间:2024/04/30 00:00
文字排版--字体
我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面代码实现:为网页中的文字设置字体为宋体。
body{font-family:"宋体";}
如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)
现在一般网页喜欢设置“微软雅黑”,如下代码:
body{font-family:"Microsoft Yahei";}
或
body{font-family:"微软雅黑";}
注意:第一种方法比第二种方法兼容性更好一些。
在网页上设置删除线
原价上的删除线使用下面代码就可以实现:
.oldPrice{text-decoration:line-through;}
段落排版--缩进
中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现:
p{text-indent:2em;}<p>内容</p> 2em的意思就是文字的2倍大小。段落排版--行间距(行高)
如下代码实现设置段落行间距为1.5倍。
p{line-height:1.5em;}<p>内容</p>段落排版--中文字间距、字母间距
中文字间隔、字母间隔设置:
如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing 来实现,如下面代码:
h1{ letter-spacing:50px;}...<h1>了不起的盖茨比</h1>注意:这个样式使用在英文单词时,是设置字母与字母之间的间距。
单词间距设置:
如果我想设置英文单词之间的间距呢?可以使用 word-spacing 来实现。如下代码:
h1{ word-spacing:50px;}...<h1>welcome to imooc!</h1>段落排版--对齐
想为块状元素中的文本、图片设置居中样式,可以使用text-align样式代码,如下代码可实现文本居中显示。
h1{ text-align:center;}<h1>了不起的盖茨比</h1>同样可以设置居左:
h1{ text-align:left;}<h1>了不起的盖茨比</h1>还可以设置居右:
h1{ text-align:right;}<h1>了不起的盖茨比</h1>
元素分类
在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>
元素分类--块级元素
在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block
就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。
a{display:block;}
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
元素分类--内联元素
在html中,<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码display:inline
将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从而使 div 元素具有内联元素特点。
div{ display:inline; }......<div>我要变成内联元素</div>
内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
元素分类--内联块状元素
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block
就是将元素设置为内联块状元素。(css2.1新增),<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
视频讲解盒子原理
- web进门第11天
- web进门第12天
- web进门第13天
- web进门第14天
- web进门第15,16天
- orbit kepler 基于lua的web开发平台从入门到进门
- 20几岁要懂得的处世心理学---------第40节:先进门再提要求--登门槛技术
- 会让谁进门呢?
- 小喜进门
- 第三只猫进门
- JQUERY进门篇
- ruby便捷进门
- 学习java进门
- ruby 进门小结
- React小白进门
- web入门第10天
- web第8天mysql
- 学习方法-php进门的学习方法
- iOS开发--微信首页下拉拍摄的眼睛效果(直接拿走)
- Java遍历文件夹的2种方法:
- java.util.concurrent包API学习笔记
- Android res/raw文件;raw与res/assets异同
- 模板类成员函数的定义和声明为什么要放在一个文件中
- web进门第11天
- Activity从左进入
- <3>Android HAL如何向上层提供接口总结
- Ubuntu 下SVN服务器的搭建
- error:unknown field ioctl specified in initializer
- hive Illegal Operation state transition from CLOSED to ERROR的处理
- SpringMVC+Spring+Hibernate的小例子
- 同步调用、回调和异步调用区别
- Android SDk Manager 目前可用的更新ip