当前位置:首页 > 前端技术 > 字体和颜色样式——css学习笔记

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

2022年09月16日 14:18:47前端技术4

                                        

  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

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42041.html

标签: css
分享给朋友:

“字体和颜色样式——css学习笔记” 的相关文章

CSS a标签样式

a标签悬停时鼠标样式、下划线、颜色等 a { color: blue; cursor: pointer; /* 鼠标样式*/ } a:link { color: #06F; text-decoration: none; }...

如何使用纯 CSS 创建翻牌动画

如何使用纯 CSS 创建翻牌动画

下面的示例向您展示了如何使用纯 CSS 创建翻牌动画。 作者:坚果 公众号:“大前端之旅” 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括F...

浏览器对css 伪类 hover的支持

浏览器对css 伪类 hover的支持

今天在调试的时候,发现用hover写的样式在火狐上可以,在ie上却不行,百度了下,原来我用的是ie的Quirks模式。 这是在http://www.w3help.org网站上查到的结果。 问题描述 IE6 IE7(Q) IE8(Q) 不支持 A 元素以外的其他元素的...

HTML的一些常用的标签和部分css知识

HTML的一些常用的标签和部分css知识

一.form标签的注意事项 form为表单标签,属性有action和method。 action为表单提交的路径,method为表单 的提交方式。表单有九种提交请求,常用 的有两种,今天就介绍常用的两种请求get和 post。 1.get请求...

Html/Css

原文地址:http://blog.csdn.net/annip/article/details/53455226 一.什么是role属性 role属性作用是告诉Accessibility类应用(比如屏幕朗读程序,为盲人提供的访问网络的便利程...

VSCode代码自动补全(html标签、style样式、css属性及值)

VSCode代码自动补全(html标签、style样式、css属性及值、),修改配置文件即可完成! 操作环境 1. 系统window 10 2. 软件VS code 2019汉化 1.按CTRL+SHIFT+P 2.输入搜索Su...

HTML-CSS标签属性注释大全

           ★文章有点长,但是我觉得你不用一次性看完,可以收藏一下,在自己的碎片时间里,可以随时拿出来看看。    ★今天把HTML里一些常用的标签也整理了一份,希望对于初学者有...

html标签属性大全(囊括CSS、CSS3、H5、XML等)

转载:https://www.w3school.com.cn/tags/tag_html.asp 作者:zhzhsgg 来源链接:https://blog.csdn.net/zhzhsgg/article/details/1130...

springmvc如何引入css等资源

   配置文件: <mvc:resources location="/WEB-INF/css/" mapping="/css/**" />     <mvc:resources location="...

什么是HTML和CSS

什么是HTML和CSS? HTML的定义: 首先来说HTML,HTML中文称为超文本标记语言,从语义上来说,它只是一种是一种标识性的语言,并不是一种编程语言。所以在提及其作用时,只能从语义方面去想,而不能从样式上去想。它其中有许许多多的标签,...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。