字体和颜色样式——css学习笔记

CSS文本样式详解

最新推荐文章于 2024-11-03 11:09:26 发布

转载最新推荐文章于 2024-11-03 11:09:26 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/flowerbaby/archive/2012/10/15/2723423.html

cs 有许多样式文本的属性，本节主要是使用css来控制文本的 字体，格式，颜色，文本修饰等

一:改变字体和指定字体外观的属性

1：用font-family属性定义网页中的字体，每个font-family包括一系列具相同特征的字体

字体系杨浦五种： sans-serif ‚serif monospace cursive和fantasy. 而每个系有包括许多字体

 
Sans-serif Family   系列是没有衬线的字体 在电脑频幕上这些字体要比Serif字体更具可读性

Ssrif 系列是有衬线（指字母主线端的短细线）的字体，一般用于报纸印刷
 Monospace Family系列的字母具有相同宽度。这些字体主要用来显示软件代码实例

Cursive 系列是一些看起来像是手写的字体，有时用于标题

　Fantasy 系列是一些有固定装饰的字体，这些字体并不多见，在规范Web设计中不常用。

body{
             font-family: Verdana, Geneva, Arial, sans-serif; 
}

2：用font-size属性控制字体大小

body{
           font-size: 14px;(使用像素)  百分数用与别的字体大小的相对值来定义字体大小<font-size:  150%;>
           还可以用em  定义字体大小  用“em ” 是制定比例因数  <font-size：1.2em;> 还有一种就是关键字 <font-size:  small;>
}

3：用color属性给文本添加颜色　

body{
          color:  silver;(用词来指定颜色)
}

4：font-weight属性设置字体的粗细

body{
           font-weight:  bold， lighter, normal, bolder；
}

5:用text-decoration属性给文本添加更多样式。

应用text-decoration属性，可以用overlines,underlines和line-thoughs等来修饰文本

body{
           text-decoration： underline；
}

二：给字体添加样式

italic(斜体) 文本是向右倾斜的有时候多一些弯曲的衬线，可以用font-style属性在css中给文本添加斜体（italic）样式：

Italic和oblique是让字体倾斜显示的两种格式。

font-style:  italic;

有的字体并不支持italic(斜体)格式，就用oblique斜体文本代替。oblique也是倾斜的，不过字体不是专门设计的倾斜字母，浏览器只是把普通字母倾斜显示了

font-style:  oblique;

三: 如何制定Web 颜色？方法有。。。

1. 可以用颜色名直接定义（17中颜色）17种颜色名预先定义了红色，绿色和蓝色三原色的比例

在css中可以这么写

body {
             background-color:  silver;(css颜色名不分大小写)
}                                   ↓写颜色名

2. 可以根据红，绿，蓝的相对百分比来定义颜色

3. 可以用十六进制代码定义——（是描述红，绿，蓝成分多少的简略表达法）（常用）

（1）十六进制代码是以#开头的如 #cc6600. 则

前两位代表红色，中间代表绿色，最后两位代表蓝色。

（2）十六进制代码基于16个数字（0-f）的。用十六进制，从0到15只需以为数就够了，9以上用字母

如看到“b” 就知道是代表11

（3）把十六进制颜色分成三部分：每个十六进制颜色都由红色，绿色，蓝色三部分组成。

# cc 66 00

↓红绿蓝

把每个十六进制数转化成相应的十进制数每部分的值都可以换算成0—255的一个数。

cc--

↓12×16=192 192+12=204——十六进制的204等于十六进制的CC

下面的也这么算 (6x16)+6=102 (0x16)+0=0

完成

四：关于text-decoraions的所有内容《含有下划线》

文本修饰允许你在浏览器，闪烁文本中添加一些underlines,overlines, line-throughts之类的修饰效果。

要添加文本修饰，只要在元素中设置tex-decorations属性便可

em{
          text-decoration： line-through;
}这条规则将会使元素<em>d的文本中央有条线穿过
如果文本继承了你不想要的文本修饰，用“none”就可以去掉
           em{
                text-decoration: none;(文本就没有修饰了)
 }

五：行间距

line-height属性可以定义文本的行间距   可以像其他与字体有关的属性一样，也可以用像素，em或百分数等与字体大小有关的值定义行间距

转载于:https://www.cnblogs.com/flowerbaby/archive/2012/10/15/2723423.html