HTML分享05

文本属性

(1)文本大小 

{font-size:12px/14px/16px;}

默认16px,最小12px 

还有em单位 em单位是相对与父元素字体大小进行取值 1em=父元素文字大小

单位还可以是pt,9pt=12px;

(2)字体类型

{font-family:字体1,字体2,;}

说明:

*当字体是中文字体时需加引号;”宋体”

*当英文字体中有空格时需加引号: 如“Times  New  Roman”;

Windows中文版本操作系统下,中文默认字体为宋体或者新宋体,英文字体默认为Arial.

(3)字体加粗

{font-weight:bolder/bold/normal}

说明:

bolder(更粗的)/bold(加粗)/normal(常规)

1)在css规范中把字体的粗细分为9个等级,分别从100-900,其中100对应最轻的字体变形,而900对应最重的字体变形。 100-500常规字体 600-900加粗字体

(4)字体倾斜

{ font-style:italic/oblique/normal;}

说明:

取值为:italic/oblique/normal italic和oblique都表示倾斜,不过oblique的幅度要大一点。但一般浏览器对它们的区分不是很明显

(5)文本行高

{line-height:normal/数值;}

说明:

当单行文本的行高等于容器高时,可实现单行文本在容器中垂直方向居中对齐;

当单行文本的行高小于容器高时,可实现单行文本在容器中垂直中齐以上任意位置的定位;

当单行文本的行高大于容器高时,可实现单行文本在容器中垂直中齐以下任意位置的定位。

(IE6及以下版本存在浏览器兼容问题)尽量不要让行高大于高度

(6)文本属性的复合写法

font:font-style   font-weight   font-size / line-height   font-family

说明:

按以上顺序;size和family固定不可和其他属性位置互换; *文字字体大小、行高、类型常用的属性写法

(7)文本

{color:颜色值;}

1、用十六进制表示颜色值: 16进制颜色代码指定颜色的组成方式:前两位表示红色,中间两位表示绿色,最后两位表示蓝色。把三个数值依次并列起来 ,以#开头 0  1  2  3  4  5  6  7  8  9  A  B  C  D  E  F 颜色模式:光色模式 FF 00 00(红 绿 蓝);        写法:#faf7fc;

R    G  B

2、RGB 例如:color:#F00;

3、 color:rgba(0,255,255,0.6 ) 透明度  alpha

(8)文本对齐

水平对齐方式{text-align:left/right/center/justify;} 两端对齐

垂直对齐方式{vertical-align:top/bottom/middle;} 上 中 下; inline-block;

(9)文本修饰

text-decoration:none/underline/overline/line-through/blink

说明:

none:没有修饰

underline:添加下划线

overline:添加上划线

line-through:添加删除线

(10)首行缩进

{text-indent:value;}

说明: text-indent可以取负值; text-indent属性只对第一行起作用

(11)字间距,词间距

{letter-spacing:value;}

说明:控制英文字母或汉字的字距

word-spacing:value;

说明:控制英文单词词距

列表属性

(1)定义列表符号

{list-style-type: }

说明:取值: disc(实心圆) circle(空心圆) square(实心方块) none(去掉列表符号);

(2)使用图片作为列表符号

{list-style-image:url(图像路径); }

说明:url(所使用图片的路径及全称)

(3)定义列表符号的位置

{list-style-position: ;}

说明:取值: outside(外边) inside(里边);

(4)列表属性简写

{list-style: ; }

说明:

可简写直接设置列表属性值; 常用属性: list-style:none;去掉列表样式;

背景属性

(1)背景颜色

语法:选择符{background-color:颜色值;} 简写:background:color值;

(2)背景图片设置

语法:background-image:url(背景图片的路径及全称);

说明:

网页上有两种图片形式:插入图片、背景图; 插入图片:属于网页内容,也就是结构。

背景图:属于网页的表现,背景图上可以显示文字、插入图片、表格等。

背景图片的显示原则     

1)容器尺寸等于图片尺寸,背景图片正好显示在容器中;     

2)容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满元素;     

3)容器尺寸小于图片尺寸,只显示元素范围以内的背景图。     

4)加载背景图必须有容器区域;

(3)背景图片平铺设置

语法:选择符 {background-repeat:no-repeat/repeat/ repeat-x/repeat-y }

no-repeat:不平铺

repeat:平铺 (默认)

repeat-x:横向平铺

(4)背景图片位置

语法:选择符{background-position:水平方向属性值 垂直方向属性性;}

水平方向值:left/center/right或数值

垂直方向值: top/center/bottom或数值

说明:

水平向右 垂直向下移动 是正数值

水平向左 垂直向上移动 是负数值

两个值 :第一个值表示水平位置的值,          第二个值表示垂直的位置。 *例如:当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。

(5)背景图的固定

语法:选择符{background-attachment:scroll(滚动)/fixed(固定);}

说明:    fixed 固定,不随内容一块滚动;    scroll:随内容一块滚动

(6)背景属性简写

语法:选择符{background:属性值1 属性值2 属性值3;}

背景缩写: {background:#00ff00  url(背景图片的路径及全称) no-repeat  center  top;}

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

推荐阅读更多精彩内容

  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,337评论 0 7
  • 在CSS属性中,字体和大小,子元素可以继承父元素,但颜色不能 CSS核心属性 一.CSS属性组成和作用 1.每个c...
    迷茫o阅读 304评论 0 0
  • [if !supportLists]1.[endif]html5文档结构由 和( )两部分组成? A A. B. ...
    蔚蓝指明阅读 3,767评论 0 1
  • 1.标签 常用的单标签 < !— xx –>:注释标签 快捷键:ALT+/ < br/>:换行标签 注释:自动生成...
    无念丶无为阅读 504评论 0 3
  • 目录 Day01标签行元素 Day02表单元素css选择器伪类选择符行内元素块元素表格 Day03文本相关属性列表...
    Moquyun阅读 514评论 0 0