文字排版

字体

我们可以使用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. Ruby on Rails开发Web应用的基本概念

    Web应用架构 C/S架构 Web应用从最初就採用C/S架构.Server负责监听client请求,提供资源,Client向server发起请求并渲染页面.两者通过TCP/IP协议栈之上的HTTP协议 ...

  2. Python之lxml

    作者:Shane 出处:http://bluescorpio.cnblogs.com lxml takes all the pain out of XML. Stephan Richter lxml是 ...

  3. 一个人的旅行(用小技巧转化为dijkstra算法)

    注意: 1:因为两点之间可能有多条路,所以更新路径长度的时候做一次判断 if(time < mat[a][b]) mat[a][b] = mat[b][a] = time; 2:因为主函数中的数 ...

  4. BZOJ 1407: [Noi2002]Savage( 数论 )

    枚举答案, 然后O(N^2)枚举野人去判他们是否会在有生之年存在同山洞. 具体做法就是: 设第x年相遇, 则 Ci+x*Pi=Cj+x*Pj (mod M), 然后解同余方程. 复杂度应该是O(ans ...

  5. Java的基本语法

    Java基本语法格式 Java基本语法格式 Java中的所有程序代码都必须存在于一个类中,用class关键字定义类,在class前面可以有一些修饰符. 修饰符 class 类名{ 程序代码} 注: ① ...

  6. 几本不错的开源书(to be continued)

    Linux 1.working-on-gnu-linux GNU/Linux 至今已經相當成熟並足以應付日常生活之使用,凍仁也於 2009 年開始使用它來工作至今,將藉由此書 1 來撰寫較有系統的文章 ...

  7. [LeetCode]题解(python):143-Reorder List

    题目来源: https://leetcode.com/problems/reorder-list/ 题意分析: 给定一个链表L:L0→L1→…→Ln-1→Ln,改变链表的排序为: L0→Ln→L1→L ...

  8. Nuget升级问题

    想在项目中通过“Add Library Package Reference”添加Moq,结果出现错误提示说Nuget版本太低. 要升级Nuget需要先卸载原来的Nuget. 1.在控制面板,卸载程序里 ...

  9. 转:CSS Overflow 属性

    原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...

  10. linux shell编程总结

    linux shell编程总结 本周学习了unix/linux shell编程,参考的是<LINUX与UNIX Shell 编程指南>,David Tansley著:徐焱,张春萌等译,由机 ...