文本属性粗谈 , 天气阴的雅痞

                        css核心属性的文本字体属性:

属性 “font-sizes”,属性值:

- 法定属性值和常规属性值

- 常规的属性值设置的时候都会添加单位(web中常用的单位为px)

- 浏览器中默认的字体大小16px;

- 由于浏览器存在差异 规定12px是浏览器中显示的最小字体

- 建议设置字体的大小为偶数

- 如果属性值为零的情况下不需要添加单位 font-size:0 border/margin/padding:0

- 前端除了使用像素,还有一些常见单位

- em  相对于父级进行计算 用在首行缩进

-pt 常用在硬件设备上的单位  (磅)

-rem 相对于的是html根元素进行计算(非常重要-移动端

-% 宽高自适应

-deg 2d与3d  角度值

     属性(font-family )

 -属性值  有中文和英文,在浏览器中默认的字体类型是微软雅黑

-中文:建议属性值添加引号

-英文:属性值只有一个英文单词不需要加引号,如果有多个属性值需要添加引号

关于加粗和倾斜的标签:b,strong ,i,em

加粗属性:font-weight

属性值  -法定属性值100~900之间(100~500正常字体)(600~900加粗字体)

-bold   加粗

-bolder  更粗

重要的属性值 norma(正常的)用来清加粗标签的默认样式(使用标签,不需要默认样式)

-倾斜属性:font-style

-属性:font-style

-属性值:

-italic 倾斜的

-oblique 更倾斜的

-normal 正常的

属性:line-height

-文本在垂直方向居中(单行文本) 行高= 高度

-行高>高度  文字向下移动

-行高<高度  文字向上移动

注意:line-height多用于单行文本

多行文本行高(ui设计图会标明)

从第一行文本顶部量取到第二行文本顶部即可

文本属性的简写

属性:font

属性值:font-weight, font-style,font-size/line-height font-family

font-weight和font-style可以不写或者互换位置

font-size/line-height 固定写法 不能改不能换位置

font-family 可以默认 但不能不写

拓展:跑马灯标签marquee(已废弃 但可以使用)

属性:color  切记不要写成font-color

属性值

-常见的英文单词 green,yellow,red,pink 等

-十六进制:0-9/a-f(大小写不区分)任意组成的六位字符

常见的十六进制:#fff白色 #0000黑色 #cccc灰色

-六位字符一样的时候可以省略为三位 #000   #abc

重要:rgb(red,green,blue )范围0-255

-rgba(,,,alpha)透明度:范围0-1

透明度的表示方式:-rgba(某一个进行修改)-opacity:0-1(全部都可以修改)

文本水平对齐方式    text-align

-right ,left,center,justify(两端对齐,字符要求)

   文本修饰

属性:text-decoration

属性值

-underline 下划线

-overline 上划线

-line-through 删除线

-重要:none 清楚下划线      del 删除

首行缩进(只针对第一行)

属性:text-indent

属性值:数值+单位 可以接负值

字间距:letter-spacing

词间距:word-spacing

有序列表,无序列表,自定义列表

定义列表的符号样式属性

属性:list-style-type

属性值:disc(实心圆)circle(空心圆)

square(实心方块)

none(清楚列表的默认样式)

使用图片作为列表符号list-style-image

属性值url()

定义列表符号位置

属性:list-style-position

属性值

inside/outside

清除列表默认样式

list-style:none

        背景属性

背景颜色属性

属性:background-color 可以简写成 background

属性值

-英文单词

-十六进制

-rgb/rgba

背景图片

属性:background-image

属性值:url(相对路径)

当容器大于背景图片的时候,图片会进行铺满

当容器小于背景图只显示一部分

当图片等于背景图相等

关于图片的使用

-background-image:是css属性需要容器大小来支持

-img:html结构

   背景平铺属性

属性:background-repeat

属性值:

-   no-repeat   不平铺   只显示一张图

-  repeat  平铺  默认值

背景图片定位:属性background-position

属性值:两个属性值

-x轴的方向 left right center

-y轴的方向 top bottom  center

背景图的固定

属性:backgroung-attachment

属性值

-scroll 滚动 默认值

-fixed 固定

     简写方式

属性:backgroung

属性值:颜色 图片 平铺 定位 固定

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

推荐阅读更多精彩内容