目录
文字排版– – 字体
文字排版– – 字号、颜色
文字排版– – 粗体
文字排版– – 斜体
文字排版– – 下划线
文字排版– – 删除线
段落排版– – 缩进
段落排版– – 行间距(行高)
段落排版– – 中文字间距、字母间距
段落排版– – 对齐
首页 web前端 css教程 CSS的代码格式化

CSS的代码格式化

Aug 09, 2017 pm 03:48 PM
css 格式化

文字排版– – 字体


我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体。

body{font-family:"宋体";}1
登录后复制

这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)
现在一般网页喜欢设置“微软雅黑”,如下代码:

body{font-family:"Microsoft Yahei";}1
登录后复制

body{font-family:"微软雅黑";}1
登录后复制

注意:第一种方法比第二种方法兼容性更好一些。

因为这种字体即美观又可以在客户端安全的显示出来(用户本地一般都是默认安装的)。

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>认识html标签</title><style type="text/css">body{    font-family:"Microsoft Yahei";}span{    font-family:"宋体";}</style></head><body>    <h1>三年级</h1>    <p>三年级<span id="stress">三年级</span>三年级</p>    <p>三年级</p></body></html>1234567891011121314151617181920
登录后复制

文字排版– – 字号、颜色


可以使用下面代码设置网页中文字的字号为12像素,并把字体颜色设置为#666(灰色):

body{font-size:12px;color:#666}1
登录后复制

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字号、颜色</title><style type="text/css">body{font-size:12px;color:#666;}.stress{font-size:20px;color:red;}</style></head><body>    <h1>三年级</h1>    <p>三年级<span class="stress">三年级</span>三年级</p>    <p>三年级<span>三年级</span>三年级</p></body></html>12345678910111213141516
登录后复制

文字排版– – 粗体


我们还可以使用css样式来改变文字的样式:粗体、斜体、下划线、删除线,可以使用下面代码实现设置文字以粗体样式显示出来。

p span{font-weight:bold;}1
登录后复制

在这里大家可以看到,如果想为文字设置粗体是有单独的css样式来实现的,再不用为了实现粗体样式而使用h1-h6或strong标签了。

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>粗体签</title><style type="text/css">p span{font-weight:bold;}a{font-weight:bold;}</style></head><body>    <h1>三年级时</h1>    <p>三年级时<span class="stress">三年级时</span>三年级时<a href="http://www.imooc.com">三年级时</a>三年级时</p>    <p>三年级时</p></body></html>12345678910111213141516
登录后复制

文字排版– – 斜体


以下代码可以实现文字以斜体样式在浏览器中显示:

 p a{font-style:italic;}<p> 三年级 <a> 四年级 </a> 五年级 </p>12
登录后复制

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>斜体样式</title><style type="text/css">p{    font-style:italic;    
}a{    font-weight: bold;    color: red;    font-style: normal;}</style></head><body><p>三年级<a>三年级</a>三年级</p> </body></html>1234567891011121314151617181920
登录后复制

文字排版– – 下划线


有些情况下想为文字设置为下划线样式,这样可以在视觉上强调文字,可以使用下面代码来实现:

p a{text-decoration:underline;}<p> 三年级 <a> 四年级 </a> 五年级 </p>12
登录后复制

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>下划线样式</title><style type="text/css">a {    text-decoration:underline;    
}span {    text-decoration:underline;}</style></head><body><p><span>三年级</span><a> 四年级 </a> 五年级 </p></body></html>123456789101112131415161718
登录后复制

文字排版– – 删除线


如果想在网页上设置删除线怎么办,这个样式在电商网站上常会见到:
这里写图片描述

上图中的原价上的删除线使用下面代码就可以实现:

 .oldPrice{text-decoration:line-through;}1
登录后复制

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>删除样式</title><style type="text/css">.oldPrice{text-decoration:line-through;}</style></head><body><p>原价:<span class="oldPrice">300</span>元 现价:230 元</p> </body></html>12345678910111213
登录后复制

段落排版– – 缩进


中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现:

p{text-indent:2em;}<p>1922年的春天,一个想要成名名叫尼克卡拉威(托比?马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。</p>12
登录后复制

注意:2em的意思就是文字的2倍大小。

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>缩进样式</title><style type="text/css">p{text-indent:2em;};</style></head><body>    <h1>尼克?卡拉威</h1>    <p>1922年的春天,一个想要成名名叫尼克?卡拉威(托比?马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。</p>    
    <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p></body></html>123456789101112131415
登录后复制

段落排版– – 行间距(行高)


这一小节我们来学习一下另一个在段落排版中起重要作用的行间距(行高)属性(line-height),如下代码实现设置段落行间距为1.5倍。

p{line-height:1.5em;}<p>菲茨杰拉德,二十世纪美国文学巨擘之一。</p>12
登录后复制

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>行间距</title><style type="text/css">p{line-height:2em;}</style></head><body><p>菲茨杰拉德,二十世纪美国文学巨擘之一。</p></body></html>12345678910111213
登录后复制

段落排版– – 中文字间距、字母间距


中文字间隔字母间隔设置

如果想在网页排版中设置 文字间隔 或者 字母间隔 就可以使用 letter-spacing 来实现,如下面代码:

h1{
    letter-spacing:50px;
}...<h1>了不起的乔布斯</h1>12345
登录后复制

注意:这个样式使用在英文单词时,是设置字母与字母之间的间距。

单词间距设置:

如果我想设置英文单词之间的间距呢?可以使用 word-spacing 来实现。如下代码:

h1{
    word-spacing:50px;
}...<h1>welcome to iOS!</h1>12345
登录后复制

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字间距</title><style type="text/css">h1{    letter-spacing:20px;}</style></head><body><h1>hello world!你好!</h1></body></html>123456789101112131415
登录后复制

注意
当设置元素为英文时,letter-spacing 设置不是英文单词的间隔,而是字母间的间隔。


段落排版– – 对齐


想为 块状元素 中的文本、图片设置居中样式吗?可以使用text-align样式代码,如下代码可实现文本居中显示。

h1{
    text-align:center/left/right;
}<h1>了不起的乔布斯</h1>1234
登录后复制

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>对齐</title><style type="text/css">div{    text-align:center;}</style></head><body><div><img src="http://img.com/2000200.jpg" ></div></body></html>123456789101112131415
登录后复制

以上是CSS的代码格式化的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vue中怎么用bootstrap vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤:安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选:自定义样式。可选:使用插件。

HTML,CSS和JavaScript的角色:核心职责 HTML,CSS和JavaScript的角色:核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

了解HTML,CSS和JavaScript:初学者指南 了解HTML,CSS和JavaScript:初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎么写分割线 bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法:使用 标签,可创建水平分割线。使用 CSS border 属性,可创建自定义样式的分割线。

bootstrap怎么插入图片 bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法:直接插入图片,使用 HTML 的 img 标签。使用 Bootstrap 图像组件,可以提供响应式图片和更多样式。设置图片大小,使用 img-fluid 类可以使图片自适应。设置边框,使用 img-bordered 类。设置圆角,使用 img-rounded 类。设置阴影,使用 shadow 类。调整图片大小和位置,使用 CSS 样式。使用背景图片,使用 background-image CSS 属性。

bootstrap怎么设置框架 bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架,需要按照以下步骤:1. 通过 CDN 引用 Bootstrap 文件;2. 下载文件并将其托管在自己的服务器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根据需要编译 Sass/Less;5. 导入定制文件(可选)。设置完成后,即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。

bootstrap按钮怎么用 bootstrap按钮怎么用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按钮?引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本

bootstrap怎么调整大小 bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小,可以使用尺寸类,具体包括:调整宽度:.col-、.w-、.mw-调整高度:.h-、.min-h-、.max-h-

See all articles