html & css学习第二周总结(下)

接前天的总结,下部分主要整理下文本格式化的内容,包括单位、字体样式、文本样式。这些理解上没有什么难度,主要是多练记住就好了。

一.单位

1.长度单位

(1)px 像素:老朋友了,要记住的是:手机的一个像素点大概是电脑显示屏的1/4,所以适配到手机的字体要扩大四倍。

(2)%百分比:表示以相对于父元素大小来设置当前元素大小,优点在于当父元素尺寸发生改变时,子元素尺寸随之改变。在创建自适应页面时,经常使用百分比作为单位。

(3)em:em单位与百分比类似,但它是相对于当前元素字体大小来计算的:

1 em = 1 font-size

比如父元素设置了字体大小为20px,子元素设置1em,显示就为20px;2em则为2*20=40px;如果不设置字体大小直接使用em为单位,则相对于浏览器默认字体大小16px来显示。

除去字体大小,宽度和长度的设置同理,另外设置首行缩进时采用em单位就可以实现缩进n个字符的效果。


2.颜色单位

(1)rgb值

语法:标签{color:rgb(0,0,0)},每个数值范围是0-255,也可以用百分比表示,0-100%对应数值0-255

(2)十六进制

语法:标签名{color:#000000},使用三组两位数的十六进制数组表示一个颜色,也是对应rgb颜色,只不过换做十六进制表示。每组数范围为00-ff,对应0-255。一组数中数字/字母重复可以只写一个,比如#ff0000,可以简写为#f00.



二.字体样式

1.常用字体样式

font-style 设置字体倾斜

font-weight  设置字体粗细

font-variant 设置小型的大写字母

font-size 设置字体大小

font-family 设置字体

(1)font-style 设置字体倾斜,可选值有:

-normal  默认值,文字正常显示

-italic 文字会以斜体显示

-oblique 文字会以倾斜效果显示

大部分浏览器都不会对斜体和倾斜作区分,一般只会使用italic


(2)font-weight  设置字体粗细,可选值有:

-normal 默认设置,文字正常显示

-bold 文字加粗显示

也可以指定100-900之间的9个值,但是字体粗细是根据计算机现有的字体库中的版本,往往没有那么多版本,很多设置效果一样,因此一般不用


(3)font-variant 设置小型大写字母,即把小写字母变成大写字母,但是要比正常大写字母小,可选值:

-normal  默认值,文字正常显示

-small-caps 文本以小型的大写字母显示

(并不知道有什么用==)

设置后小写字母变大写,但size会小些


(4)font-size 设置字体大小,要注意的是设置的不是文字本身的大小,字体是在一个看不见的框中,设置的是框的大小,实际上字体会略小于设置的值;但根据字体不同,显示效果不一样。


(5)font-family  设置字体,直接写字体名称,且可以同时指定多个字体,用逗号隔开,例如:p{font-family:arila,微软雅黑;}。当采用多种字体时:

-浏览器会优先使用前面的字体,如果没有就再尝试下一个。如果字体名称中有空格,使用时最好加上引号,表示为一个字体;

-如果计算机字体库中都没有,则显示默认字体(采用一种字体时也一样)。

设置字体时也可以不指定某个具体的字体,可以设置为某一类字体,浏览器自行选择这一类中的一个字体,有五大类型:serif(衬线字体),sans-serif(非衬线字体),monospace(等宽字体),cursive(草书字体),fantasy(虚幻字体)。浏览器不同显示效果不同。


2.简写格式

要指定多个样式时可以直接用font来设置,之间用空格隔开,比如:

选择器{font:italic small-caps bold 60px "微软雅黑"; }

-font里斜体、加粗、小大写字母没有顺序要求,可写可不写;

-font必须写大小和字体,且位置必须在最后两位,字体必须在最后。


三.文本样式

常用文本样式:

text-transform 设置字母大小写

text-decoration 设置文本划线的修饰

letter-spacing 和 word-spacing 分别设置子符间和单词间的间距

text-align 设置文本对齐

text-indent 设置首行缩进

line-height 设置行高

(1)text-transform 设置字母大小写,可选值有:

-none 默认,不做任何处理

-capitalize 单词首字母大写

-uppercase  所有字母都大写

-lowercase 所有字母都小写


(2)text-decoration 设置文本划线的修饰,可选值有:

-none 默认值,不做任何处理

-underline:下划线(超链接标签的默认值是underline,如果要去掉下划线,则要设置值为none)

-overline:上划线

-line-through:删除线


(3)letter-spacing 和 word-spacing 分别设置子符间和单词间的间距,后者设置的实质上是单词间空格的距离,对中文影响不大。


(4)text-align 设置文本对齐,可选值有:

-left 默认值

-right 文本靠右对齐

-center 文本居中

-justify 两端对齐


(5)text-indent 设置首行缩进,常使用em作为单位,2em表示缩进两个字符。当指定值是正数是向右缩进,为负值是向左缩进,有时需要隐藏些内容但又希望搜索引擎能够抓取的时候就会设置为负值。

(6)line-height 设置行高,在css中没有直接设置行间距的方式,只能通过设置行高间接的方式来设置行间距。

网页中的文字在看不见的一行行线中,且默认垂直居中于两行中,因此行间距:

行间距=行高-字体大小

指定line-height的值有三种值:

①直接设定一个大小,如:选择器{line-hight:n px;},这样行间距就是n减去字体大小后的值;

②指定一个百分数,则会相对于字体大小去计算行高,这种方法不常用;

③直接写一个数值(表示多少倍行距)行高设置字体大小相应的倍数,如:选择器{line-hight:1.5;},这就是指定了1.5倍行距的意思。

另外,因为文字是默认垂直居中于两行中的,所以当给单行的文本行高设置与父元素高度一致时,文本就会在父元素中垂直居中。


行高也可以通过简写来设置,同样写在font中,语法:

-font:字体大小/行高  “字体名称”;

比如:

font:20px/30px "微软雅黑",就是指文字大小20px,行高30px,行间距10px,字体为微软雅黑。

要注意的是使用font本身默认有一个行高,如果不另外指定行高则会采用默认值,因此需要指定行高的话,就得写在font中,或者写在font后,写在font前的话就会被默认值给覆盖掉。


总结结束!接下来的是很容易搞混的内容了,加油~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,029评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,238评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,576评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,214评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,324评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,392评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,416评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,196评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,631评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,919评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,090评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,767评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,410评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,090评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,328评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,952评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,979评论 2 351

推荐阅读更多精彩内容