1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 前端知识-CSS层叠样式表简介和基本样式概述

前端知识-CSS层叠样式表简介和基本样式概述

时间:2022-12-31 10:41:28

相关推荐

前端知识-CSS层叠样式表简介和基本样式概述

产生背景:

html 只关注结构样式从中分离迫切需要更为良好的网页样式表现

样式规则

选择器{ 属性名:属性名; }

常用样式简洁

font字体

font-family和font-size
font-size: 常用px 或者 em1em和当前字体大小相等。在浏览器中默认的文字大小是16px。em = px/16浏览器默认字体大小 16px14px以上建议尽量使用偶数字体大小,ie6会有技术bugfont-family 多个字体使用,隔开为了增强兼容性字体名为中文或有特殊符号必须加引号英文字体必须放在中文字体前安全字体

font-family: Arial, Helvetica, sans-serif;

unicode字体font-family:"\u5fae\u8f6f\u96c5\u9ed1" unicode比中文兼容性更高

在线unciode转换字体大全

windows常见内置中文字体字体中文名 字体英文名宋体 SimSun(浏览器默认)黑体 SimHei微软雅黑Microsoft Yahei微软正黑体 Microsoft JhengHei楷体 KaiTi新宋体 NSimSun仿宋 FangSongOS X常见内置中文字体字体中文名 字体英文名苹方 PingFang SC华文黑体STHeiti华文楷体STKaiti华文宋体STSong华文仿宋STFangsong华文中宋STZhongsongoffice安装后新增字体字体中文名 字体英文名幼圆 YouYuan 好看隶书 LiSu华文细黑STXihei华文楷体STKaiti华文宋体STSong华文仿宋STFangsong华文中宋STZhongsong英文字体:PmingLiuABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ImpactABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789GeorgiaABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789TahomaABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ArialABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789Book AntiquaABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789Century GothicABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789Courier NewABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789Times New RomanABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789VerdanaABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

font-weight
范围: 100-900normal:400 bold:700
font-style

p.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;}//类似style:italic 为斜体

font连写

style weight size family

SWSF

例: font:italic bold 12px/30px Georgia,serif;

a链接

a:link {text-decoration:none;} /* unvisited link/

a:visited {text-decoration:none;} /visited link/

a:hover {text-decoration:underline;} /mouse over link/

a:active {text-decoration:underline;} /selected link */

连写 顺序:link visited hover activeLoVeHAte

列表【ul、ol、dl】

就列表项索引设置:

标记图像

list-style-image:url(‘/upload/article/000/000/015/5c67daf64b661194.gif’);list-style-type

list-style-type属性值decimal 数字lower-roman 小写罗马数字i、ii、iii……upper-roman 大写罗马数字I、II、III……lower-alphaupper-alphalower-greek 希腊Decimal-leading-zero01cjk-ideographic一二三disc 默认值,实心圆"●"circle 空心圆"○"square 实心正方形"■"

list-style-position 标记位置

list-style-position: inside;//content内

list-style-position: outside;//padding内

文本

属性 描述

color 设置文本颜色

direction 设置文本方向。例: 阿拉伯文 direction:rtl;unicode-bidi:bidi-override;

letter-spacing 设置字符间距

word-spacing 设置字间距

line-height 设置行高

text-align 对齐元素中的文本

text-decoration 向文本添加修饰

text-indent 缩进元素中文本的首行

text-shadow 设置文本阴影

text-transform 控制元素中的字母 lowercase uppercase capitalize /单词大写开头/

unicode-bidi 设置或返回文本是否被重写

white-space 设置元素中空白的处理方式

vertical-align 设置元素的垂直对齐 默认baseline

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。