文字排版

字体

我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。
语法:
  1. body{font-family:"宋体";}
这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)
现在一般网页喜欢设置“微软雅黑”
关于字体的问题可以参考阮一峰的经典文章:http://www.ruanyifeng.com/blog/2014/07/chinese_fonts.html
另外对于英文衬线体和非衬线体还有一篇文章:http://sixf.org/cn/2014/06/english-fonts/
语法:
  1. body{font-family:"Microsoft Yahei";}
OR:
  1. body{font-family:"微软雅黑";}
注意:第一种方法比第二种方法兼容性更好一些。
因为这种字体即美观又可以在客户端安全的显示出来(用户本地一般都是默认安装的)。

字号,颜色

可以使用下面代码设置网页中文字的字号为12像素,并把字体颜色设置为#666(灰色):
语法:
  1. body{font-size:12px;color:#666}

粗体


我们还可以使用css样式来改变文字的样式:粗体、斜体、下划线、删除线
语法:
  1. p span{font-weight:bold;}
如果想为文字设置粗体是有单独的css样式来实现的,再不用为了实现粗体样式而使用h1-h6或strong标签了

斜体

语法:
  1. p a{font-style:italic;}
  2. <p>三年级时,我还是一个<a>胆小如鼠</a>的小女孩。</p>

下划线

有些情况下想为文字设置为下划线样式,这样可以在视觉上强调文字
语法:
  1. p a{text-decoration:underline;}
  2. <p>三年级时,我还是一个<a>胆小如鼠</a>的小女孩。</p>

删除线


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


语法:
  1. .oldPrice{text-decoration:line-through;}


段落排版

缩进

中文文字中的段前习惯空两个文字的空白
语法:
  1. p{text-indent:2em;}
  2. <p>1922年的春天,一个想要成名名叫尼克卡拉威(托比?马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。</p>
注意:2em的意思就是文字的2倍大小

行间距

另一个在段落排版中起重要作用的行间距(行高)属性(line-height)

语法:
  1. p{line-height:1.5em;}
  2. <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
上面设定了行间距是1.5倍

中文字间距,字母间距

如果想在网页排版中设置文字间隔或者字母间隔就可以使用    letter-spacing 来实现
语法:
  1. h1{
  2. letter-spacing:50px;
  3. }
  4. ...
  5. <h1>了不起的盖茨比</h1>
注意:这个样式使用在英文单词时,是设置字母与字母之间的间距。

单词间距设置:
语法:
  1. h1{
  2. word-spacing:50px;
  3. }
  4. ...
  5. <h1>welcome to myHouse!</h1>

对齐

想为块状元素中的文本、图片设置居中样式吗?可以使用text-align
块状元素包括了 div, hx...
语法:
  1. h1{
  2. text-align:center;
  3. }
  4. <h1>了不起的盖茨比</h1>
当然也可以设置居左
语法:
  1. h1{
  2. text-align:left;
  3. }
  4. <h1>了不起的盖茨比</h1>
还可以设置居右
语法:
  1. h1{
  2. text-align:right;
  3. }
  4. <h1>了不起的盖茨比</h1>





HTML+CSS笔记 CSS进阶的更多相关文章

  1. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  2. HTML+CSS笔记 CSS进阶再续

    CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上, ...

  3. HTML+CSS笔记 CSS进阶续集

    元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...

  4. HTML+CSS笔记 CSS中级 一些小技巧

    水平居中 行内元素的水平居中 </a></li> <li><a href="#">2</a></li> &l ...

  5. HTML+CSS笔记 CSS中级 颜色&长度值

    颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{co ...

  6. HTML+CSS笔记 CSS中级 缩写入门

    盒子模型代码简写 回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15p ...

  7. HTML+CSS笔记 CSS入门续集

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代(标签). 语法: p{color:red;} <p> ...

  8. HTML+CSS笔记 CSS入门

    简介: </span>年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的<span>脚本解释程序</span>,作为ABC语言的一种继承. & ...

  9. css笔记 css用法:

    前端框架:AdminLTE  https://almsaeedstudio.com/themes/AdminLTE/index2.html CSS学习教程: http://www.divcss5.co ...

随机推荐

  1. Socks5协议中文文档

    译者:Radeon(Radeon bise@cmmail.com) 译文公布时间:2001-6-18 文件夹 1.介绍 2.现有的协议 3.基于TCP协议的客户 4.请求 5.地址 6.应答 7.基于 ...

  2. Effective JavaScript Item 36 实例状态仅仅保存在实例对象上

    本系列作为EffectiveJavaScript的读书笔记. 一个类型的prototype和该类型的实例之间是"一对多"的关系.那么,须要确保实例相关的数据不会被错误地保存在pro ...

  3. sql server dateadd()

    定义和用法 DATEADD() 函数在日期中添加或减去指定的时间间隔. 语法 DATEADD(datepart,number,date) date 参数是合法的日期表达式.number 是您希望添加的 ...

  4. android UI-EditText的长度监听慎用TextWatcher

    在用户昵称的输入时,限定8个字符,本意是在输入超过8个时候,页面toast一个提示,就是下面的TextWatcher的监听,在afterTextChanged中处理. 原bug:huawei MT2- ...

  5. Android布局绘制常见小问题

    一些网上分享的整理 1.Android设置Selector不同状态下颜色及图片 Selector常用状态: android:state_selected 控件选中状态,可以为true或false an ...

  6. 关于 WP上应用调试时报错“指定的通信资源(端口)”已由另一个应用程序使用 问题

    问题来源 碰到这个问题是调试wp7项目的时候,之前因为安装的是wp8.0的sdk 包括wp7.5所以wp7的也能用,后来不知道怎么回事wp7项目就不能调试了总是显示启动而不是 device或者是虚拟机 ...

  7. IIS上不能播放mp4

    iis不支持mp4格式,需要手动添加. 进入iis服务管理器,打开你的网站,然后点击MIME类型---添加(扩展名:mp4   MIME类型:application/octet-stream) 如此即 ...

  8. Delphi 2010下载+完美破解

    点击链接进入http://altd.embarcadero.com/download/RADStudio2010/delphicbuilder_2010_3615_win.isoRAD Studio/ ...

  9. 在python文本编辑器里如何设置Tab为4个空格

    python中缩进一般为四个空格,我总结3种常用编辑器中种如何设置Tab键为四个空格 第一种:下载python3.5时自带de 一个IDLE编辑器 在Options选项下的Configure IDLE ...

  10. Github Blog 搭建手册

    http://www.ilehao.com/blog/2012/11/11/github-blog-config/ http://www.freebuf.com/articles/web/25613. ...