一、文字排版——字体

Eg:

body{font-family:"宋体";}

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

注:

不要设置不常用的字体,如果用户本地电脑上没有安装所设置的字体,就会显示浏览器默认的字体。

二、文字排版——字号、颜色

Eg:

设置网页文字字号12像素,字体颜色设置为#666(灰色):

body{

font-size:12px;

color:#666;

}

三、文字排版——粗体

Eg:

p span{font-weight:bold;}

四、文字排版——斜体

Eg:

p a{font-style:italic;}

五、文字排版——下划线

Eg:

p a{text-decoration:underline;}

六、文字排版——删除线

七、段落排版——缩进

中文文字段前空两个文字的空白。

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

八、段落排版——行间距(行高)

Eg:

p{line-height:1.5em;}

九、段落排版——中文字间距、字母间距

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

Eg:

h1{

  letter-spacing:50px;

}

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

单词间距设置(word-spacing):

Eg:

h1{

  word-spacing:50px;

}

十、段落排版——对齐

为块元素中的文本、图片设置居中样式等,可以使用text-align

居中

h1{

  text-align:center;

}

居左

h1{

  text-align:left;

}

居右

h1{

  text-align:right;

}

HTML+CSS基础学习笔记(5)的更多相关文章

  1. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  2. HTML&CSS基础学习笔记1.16-单元格间距和表格主体

    上一篇讲html学习笔记,讲过了合并单元格,那么今天就来介绍下如何控制单元格的间距,以及表格主体的相关知识. 单元格间距 在上个知识点的显示结果中你可能发现了,单元格与单元格之间有一小段空白.这是由& ...

  3. HTML&CSS基础学习笔记1.32-选择器是什么

    选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解, ...

  4. HTML&CSS基础学习笔记1.31-像素和相对长度

    像素和相对长度 之前的笔记中,我们提到过用属性width.height来设置图片的尺寸,它们的单元都是”px(像素)”.长度单位总结一下,目前比较常用到px(像素).em.% 百分比,要注意其实这三种 ...

  5. CSS基础学习笔记

    一. CSS介绍 1. CSS概述:CSS(Cascading Style Sheets)指层叠样式表,极大提高了工作效率. 2. 基础语法: 属性大于1个之后,属性之间用分号隔开 如果大于1个单词, ...

  6. HTML&CSS基础学习笔记1.33-元素选择器

    元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这 ...

  7. HTML&CSS基础学习笔记1.30-颜色的表达

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

  8. HTML&CSS基础学习笔记1.29-灵活地使用样式

    灵活的使用样式 使用样式的感觉很棒吧! 刚我们使用的内联样式是给具体的标签加上样式,如果有多个标签的时候,我们用内联样式给标签加样式的时候就需要一个个的加过来,这样就很麻烦. 而如果我们使用内部样式表 ...

  9. HTML&CSS基础学习笔记1.28-给网页添加一个css样式

    CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...

  10. HTML&CSS基础学习笔记1.26-input重置表单

    重置表单 <input>的[type]属性值为"button"的时候表示一个普通的按钮,相当于一个<button>标签. <input>的[ty ...

随机推荐

  1. C++ Socket UDP "Hello World!"

    这是C++ SOCKET网络程序中的C/S结构之UDP "Hello World !",共两个控制台工程: //////////////////////////////////// ...

  2. Android UI 设计准则

    Design Principles  设计准则 These design principles were developed by and for the Android User Experienc ...

  3. [笔记] 走进 Pocket,看看只有 20 位员工的 Pocket 是如何搞定 2000 万用户的

    走进 Pocket,看看只有 20 位员工的 Pocket 是如何搞定 2000 万用户的 保持专注. 不断更新优先级. 对产品有主人翁意识. (觉得做好产品是自己的职责, 不是应付工作) 你的用户如 ...

  4. Wide character in print at a2.pl line 6.

    jrhapt01:/home/tomcat/test> cat a2.pl my $str="$ARGV[0]"; use Encode; use URI::Escape; ...

  5. 转:三十一、Java图形化界面设计——布局管理器之GridLayout(网格布局)

    http://blog.csdn.net/liujun13579/article/details/7772491 网格布局特点: l  使容器中的各组件呈M行×N列的网格状分布. l  网格每列宽度相 ...

  6. Vijos_1792_摆花_(动态规划,多重集组合数)

    描述 https://vijos.org/p/1792 共n种花,第i种花有a[i]个,要摆m个,同一种花连续且花按照序号从小到大排,问共有多少种摆花方案.   描述 小明的花店新开张,为了吸引顾客, ...

  7. 【转】windows7 64位系统认不出8g内存显示只有3G可用

    原文网址:http://www.jb51.neos/windows/93721.html   我的电脑安装的是Win7 64位系统,当时内存是用的8G的,系统里面显示出来只有3.00G可用,真是崩溃啊 ...

  8. [C#网络编程系列]专题一:网络协议简介

    转自:http://www.cnblogs.com/zhili/archive/2012/08/11/NetWorkProgramming.html 因为这段时间都在研究C#网络编程的一些知识, 所以 ...

  9. web前端相关的书籍

    一.Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备:前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScr ...

  10. 手动启动jenkins

    无论Linux还是windows, jenkins都是作为一个后台服务存在的. 所以在Linux下,手动启动或停止jenkins: service jenkins start service jenk ...