CSS格式化排版

前面讲解了CSS的各种规定,具体能应用到哪些方面呢?

(一)文字排版

1.字体

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

body{font-family:"宋体";}     选择器{font-family:“字体名称”}

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

body{font-family:"Microsoft Yahei";}

body{font-family:"微软雅黑";}

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

2.字号、颜色

字号:  选择器{font-size:x px;}            颜色:选择器{color:red;}

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

body{font-size:12px;color:#666;}

3.粗体

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

p span{font-weight:bold;}

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

4.

斜体

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

  a{font-style:italic;}

5.下划线

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

p a{text-decoration:underline;}

6.

删除线

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

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

.oldPrice{text-decoration:line-through;}  7.

缩进

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

p{text-indent:2em;}    2em的意思就是文字的2倍大小8.

行间距(行高)

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

p{line-height:1.5em;}9.

中文字间距、字母间距

中文字间隔、字母间隔设置:

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

h1{
    letter-spacing:50px;
}
...
<h1>了不起的盖茨比</h1>

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

单词间距设置:

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

h1{
    word-spacing:50px;
}
...
<h1>welcome to imooc!</h1> 10.

段落排版--对齐

想为块状元素中的文本、图片设置居中样式吗?可以使用text-align样式代码,如下代码可实现文本居中显示。(那么什么是块状元素呢?在后面的11-1、11-2小节中会讲到。)

h1{
    text-align:center;
}
<h1>了不起的盖茨比</h1>

同样可以设置居左:

h1{
    text-align:left;
}
<h1>了不起的盖茨比</h1>

还可以设置居右:

h1{
    text-align:right;
}
<h1>了不起的盖茨比</h1>
时间: 2024-12-30 20:30:20

CSS格式化排版的相关文章

html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版

继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签.p{color:red;} <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p>可见右侧结果窗口中p中的文本与span中的文本都设置为了红色.但注意有一些css样式是不具有继承

从零开始学习html(十)CSS格式化排版——下

六.文字排版--删除线 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 5 <title>删除样式</title> 6 <style type="text/css"> 7 8 </style&g

了解HTML CSS格式化排版 文字排版

这里简单的写一些涉及到字体排版中常用到的属性, 大家可以学习查看, 也可以mark下以后看. font-family: "Micrsoft Yahei"; 设置字体 font-size: 20px; 设置字号 color: red; 设置颜色 font-weight: bold; 文字加粗 font-style: italic; 文字斜体 text-decoration: underline; 文字下划线 text-decoration: line-through; 文字删除线 tex

CSS格式化排版 文字排版

字体排版中常用到的属性: font-family: "Micrsoft Yahei"; 设置字体 font-size: 20px; 设置字号 color: red; 设置颜色 font-weight: bold; 文字加粗 font-style: italic; 文字斜体 text-decoration: underline; 文字下划线 text-decoration: line-through; 文字删除线 text-indent: 2em; 段落缩进 text-align; ce

css学习の第二弹—文字格式化排版

1.css格式化排版 >>字体设计: etc:body{font-family:"Microsoft Yahei";} >>字号,颜色: etc:body{font-size:12px;color:#666} *****注释:#666(灰色) >>粗体 etc:p span{font-weight:bold;} >>斜体 etc:p{font-style:italic;} >>下划线 etc:p a{text-decorati

doraemon的python 格式化排版

### 11.5 常用格式化排版 文字文本属性 ```css /*为网页中的文字设置默认字体为微软雅黑*/ body{ font-family:'Microsoft yahei' } /*备选字体*/ body{ font-family:'Microsoft yahei','宋体','黑体' } ``` 网页中的字体一般为16px 字体样式: - normal 默认的,文本设置为普通字体 - italic 如果当前字体的斜体版本可用,那么文本设置为斜体版本:如果不可用,那么就会利用onlique

CSS格式化 CSS代码压缩工具

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> <head> <met

css格式化的基本运用

1.css格式化 <style type="text/css"> .one{ text-indent: 3em; } .two{ text-align: center; } .three{ text-transform: lowercase; text-transform: capitalize; } .four{ text-shadow:10px 10px 10px red ; } .five{ word-spacing: 2em; letter-spacing: 1em

网页格式化排版代码,专用信息采集后的内容整理

public static string ClearHtml(string content) { Regex regex = new Regex(""); //首先把p标签的属性去掉,只留<p> regex = new Regex(@"<p.*?>", RegexOptions.IgnoreCase | RegexOptions.Singleline); content = regex.Replace(content, "<p