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


                                        

  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或百分数等与字体大小有关的值定义行间距
 

 

 

 

 

 

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM