css读书笔记4:字体和文本
字体属性
网页中的字体有3个来源:
1.用户机器中安装的字体;
2.保存在第三方网站上的字体。可以使用link标签把它们链接到页面中;
3.保存在子集的web服务器上的字体。可以使用@font-face规则随网页一起发送给浏览器。
与字体样式相关的6个属性:
font-family(字体家族。一般对body元素使用,让整个网页使用同样的字体。一般需要多列出几种后备字体,以防前面的字体无效。)
font-size(字体大小。)
font-style(字体样式。设定字体是斜体还是整正体。)
font-weight(字体粗细。该属性有2个值:bold粗体,normal普通。)
font(简写属性。可以直接设置以上所有的属性,但分顺序,最好分开用,免得搞错。)
文本属性
与文本有关的几个css属性:
text-indent(文本缩进)
letter-spacing(字符间距)
word-spacing(单词间距。因为汉字不用空格分隔,所以这个属性对纯中文网页没有什么用。)
text-decoration(文本装饰。属性的值有:underline下划线,overline上划线,line-through删除线,none没有装饰。)
text-align(文本对齐。属性的值有:left左对齐,right右对齐,center居中对齐,justify两端对齐。)
line-height(行高。可以使用倍数或者绝对像素值。)
text-transform(文本转换。属性的值有:none默认,uppercase转成大写,lowercase转成小写,capitalize每个单词首字母大写。)
vertical-align(垂直对齐。这个属性只对行内元素起作用,一般用来展示上下角标。)
css读书笔记4:字体和文本的更多相关文章
- 【精通css读书笔记】 第八章 布局
学习了css布局的基础后又来翻阅<精通css>这本经典书籍,对布局有了进一步的认识. 基于浮动的布局 两列的布局仍然是使用一个元素向左浮动,一个元素向右浮动,值得注意的是要加入displa ...
- css读书笔记3:定位元素
定位元素要掌握css技术,核心就是要掌握元素定位. 一般把下面这条规则作为所有css样式表的第一条,初始化所有元素的内边距和外边距都为0: * {padding:0;margin:0;} 盒模型浏览器 ...
- css读书笔记2:css工作原理
css就是一种先选择html元素,然后设定选中元素css属性的机制.css选择符合要应用的样式构成一条css规则. 为文档添加样式的3种方法: 1.行内样式,直接写在特定标签的style属性中:2.嵌 ...
- css读书笔记1:HTML标记和文档结构
块级元素和行内元素:块级元素:上下堆叠,每个块级元素都独立占一行.块级元素的盒子宽度与父元素同宽.行内元素:左右堆叠,只有在空间不足的情况下才会折到下一行显示.行内元素的盒子会收缩包裹其内容,并尽可能 ...
- 超越css读书笔记
一.运用所有有效的css选择符 1.属性选择符(基于一个元素是否有属性名称,例如href,或者属性值) 例如:img[alt]{border:1px;} 所有包含alt属性的图像都将会有一个灰色的边框 ...
- 【CSS学习笔记】字体的控制
关于font-family: "无衬线体"(Sans-serif),比如黑体,微软雅黑 "有衬线体"(Serif),比如宋体,新宋 程序员设置的字体,客户电脑上 ...
- CSS读书笔记(3)---清除浮动的几种方法
浮动元素容易造成页面错位现象.下面说说关于清除浮动的几种方法. 首先.先创建一个浮动导致错位的页面. <!DOCTYPE html> <html lang="en" ...
- CSS读书笔记(2)---简易相册和日历表的制作
一.HTML和CSS制作的简易相册 相册在默认情况下是缩略图显示,而且是截取相片的某一部分显示的.当鼠标停留在某张缩略图上,相册列表中的缩略图变为大图,展示在相册的左边区域, 同时缩略图部分变成空的 ...
- CSS读书笔记(1)---选择器和两列布局
(1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red" ...
随机推荐
- linux 开启wifi热点
1,在网络连接管理中创建一个wifi连接,点击 Add,然后选Wi-Fi 2,设置wifi热点名字.wifi接连名字 3,设置 Mode 选 Ad-hoc,其它默认. 4,在 Wi-Fi Securi ...
- 解决This function or variable may be unsafe
工程名字右键属性-->C/C++-->预处理器-->预处理器定义-->加入:_CRT_SECURE_NO_WARNINGS
- Spring 框架 详解 (四)------IOC装配Bean(注解方式)
Spring的注解装配Bean Spring2.5 引入使用注解去定义Bean @Component 描述Spring框架中Bean Spring的框架中提供了与@Component注解等效的三个注 ...
- BZOJ 3241: [Noi2013]书法家
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3241 题意: 思路:把每个字母分成三部分,两个字母之间还有空的列,所以我一共设了11个状态 ...
- CF 321B Ciel and Duel(费用流)
题目链接:http://codeforces.com/problemset/problem/321/B 题意:两个人,分别有n.m张牌.每张牌有两个属性类型和能力,类型为攻击或者防守.B的m张牌的属性 ...
- C#中关键字ref修饰类对象或结构体[转]
using System; using System.Collections.Generic; using System.Text; namespace CSharpTest { struct Dog ...
- Cheatsheet: 2013 08.01 ~ 08.13
Mobile Objective C Blocks: Summary, Syntax & Best Practices Android SDK: Create an Arithmetic Ga ...
- winform继承窗体,无法修改父窗体控件问题处理笔记
问题描述: 一个窗体集成父窗体,发现无法直接修改父窗体的控件,比如修改大小等,父窗体控件已经设置为public,如果做成一个dll被引用无此问题 特征: 不禁使父窗体控件,就算新加一个控件也会这样:鼠 ...
- 1:CSS中一些@规则的用法小结 2: @media用法详解
第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule ...
- Know How To Use ID_NULL Function To Search An Object In Oracle Forms
ID_NULL built in function is used to determine that an object type variable is null or not null in O ...