HTML+CSS基础学习笔记(5)
一、文字排版——字体
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)的更多相关文章
- HTML&CSS基础学习笔记—创建列表
创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...
- HTML&CSS基础学习笔记1.16-单元格间距和表格主体
上一篇讲html学习笔记,讲过了合并单元格,那么今天就来介绍下如何控制单元格的间距,以及表格主体的相关知识. 单元格间距 在上个知识点的显示结果中你可能发现了,单元格与单元格之间有一小段空白.这是由& ...
- HTML&CSS基础学习笔记1.32-选择器是什么
选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解, ...
- HTML&CSS基础学习笔记1.31-像素和相对长度
像素和相对长度 之前的笔记中,我们提到过用属性width.height来设置图片的尺寸,它们的单元都是”px(像素)”.长度单位总结一下,目前比较常用到px(像素).em.% 百分比,要注意其实这三种 ...
- CSS基础学习笔记
一. CSS介绍 1. CSS概述:CSS(Cascading Style Sheets)指层叠样式表,极大提高了工作效率. 2. 基础语法: 属性大于1个之后,属性之间用分号隔开 如果大于1个单词, ...
- HTML&CSS基础学习笔记1.33-元素选择器
元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这 ...
- HTML&CSS基础学习笔记1.30-颜色的表达
颜色的表述 在网页中的颜色设置是非常重要,CSS的属性有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 ...
- HTML&CSS基础学习笔记1.29-灵活地使用样式
灵活的使用样式 使用样式的感觉很棒吧! 刚我们使用的内联样式是给具体的标签加上样式,如果有多个标签的时候,我们用内联样式给标签加样式的时候就需要一个个的加过来,这样就很麻烦. 而如果我们使用内部样式表 ...
- HTML&CSS基础学习笔记1.28-给网页添加一个css样式
CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...
- HTML&CSS基础学习笔记1.26-input重置表单
重置表单 <input>的[type]属性值为"button"的时候表示一个普通的按钮,相当于一个<button>标签. <input>的[ty ...
随机推荐
- C++ Socket UDP "Hello World!"
这是C++ SOCKET网络程序中的C/S结构之UDP "Hello World !",共两个控制台工程: //////////////////////////////////// ...
- Android UI 设计准则
Design Principles 设计准则 These design principles were developed by and for the Android User Experienc ...
- [笔记] 走进 Pocket,看看只有 20 位员工的 Pocket 是如何搞定 2000 万用户的
走进 Pocket,看看只有 20 位员工的 Pocket 是如何搞定 2000 万用户的 保持专注. 不断更新优先级. 对产品有主人翁意识. (觉得做好产品是自己的职责, 不是应付工作) 你的用户如 ...
- 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; ...
- 转:三十一、Java图形化界面设计——布局管理器之GridLayout(网格布局)
http://blog.csdn.net/liujun13579/article/details/7772491 网格布局特点: l 使容器中的各组件呈M行×N列的网格状分布. l 网格每列宽度相 ...
- Vijos_1792_摆花_(动态规划,多重集组合数)
描述 https://vijos.org/p/1792 共n种花,第i种花有a[i]个,要摆m个,同一种花连续且花按照序号从小到大排,问共有多少种摆花方案. 描述 小明的花店新开张,为了吸引顾客, ...
- 【转】windows7 64位系统认不出8g内存显示只有3G可用
原文网址:http://www.jb51.neos/windows/93721.html 我的电脑安装的是Win7 64位系统,当时内存是用的8G的,系统里面显示出来只有3.00G可用,真是崩溃啊 ...
- [C#网络编程系列]专题一:网络协议简介
转自:http://www.cnblogs.com/zhili/archive/2012/08/11/NetWorkProgramming.html 因为这段时间都在研究C#网络编程的一些知识, 所以 ...
- web前端相关的书籍
一.Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备:前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScr ...
- 手动启动jenkins
无论Linux还是windows, jenkins都是作为一个后台服务存在的. 所以在Linux下,手动启动或停止jenkins: service jenkins start service jenk ...