H5学习之02css属性(全)


本篇内容:
  • 1,字体属性:(font)
  • 2,文本属性: (text)
  • 3,背景属性:(background)
  • 4,超链接属性:(a:)
  • 5,列表属性:(list)
  • 6,轮廓属性:(Outline)
  • 7,表格属性:(table)

1,字体属性:(font)
Snip20170122_11.png
  • 1.1,font-style:(字体风格)

  • inherit; (继承);

  • oblique;(偏斜体)

  • italic;(斜体)

  • normal;(正常)

  • 1.2, font-weight:(文字粗细)

  • 100-900; (整百数值)

  • bold; (加粗)

  • bolder; (比加粗还要粗)

  • lighter; (细文字)

  • normal; (正常)

  • 1.3,font-size:(字体大小)

  • 20px; (数值)

  • inherit;

  • medium;

  • large;

  • larger;

  • x-large;

  • xx-large;

  • small;

  • smaller;

  • x-small;

  • xx-small;

  • 1.4, font-family:(字体类型)
    font-family:“字体1”, "字体2"; 如果后面有多个参数以逗号隔开,则后面的选项是前面的备选方案,即第一个字体不存在的时候选择第二个,如果第二个也不存在,依次选择后面的字体

  • "宋体";

  • 常用字体: (font-family):Courier New, Courier, monospace, Times New Roman, Times, serif, Arial, Helvetica, sans-serif, Verdana

  • 1.5, font-variant: (大写字体或者正常字体)

  • normal 默认值。浏览器会显示一个标准的字体。

  • small-caps 浏览器会显示小型大写字母的字体。

  • inherit 规定应该从父元素继承 font-variant 属性的值。

  • 合写:font
    合写font的时候的顺序参考:

Snip20170123_12.png
/*1,size必须放在family前面,并且必须放在style和weight两个属性后面*/
/*2,style和weight可以省略,且这两个属性位置可以换*/
/*3,如果其他什么不对,可以看错误提示*/
font:900 italic 20px "Athelas";
2,文本属性: (text)
Snip20170123_13.png
  • 2.1,color:(字体颜色)

  • color_name 规定颜色值为颜色名称的颜色(比如 red)。

  • hex_number 规定颜色值为十六进制值的颜色(比如 #ff0000)。

  • rgb_number 规定颜色值为 rgb 代码的颜色(比如 rgb(255,0,0))。

  • inherit 规定应该从父元素继承颜色。

  • 2.2,direction: (方向)

  • ltr 默认。文本方向从左到右。

  • rtl 文本方向从右到左。

  • inherit 规定应该从父元素继承 direction 属性的值。

  • 2.3,line-height: (行高)

  • normal 默认。设置合理的行间距。

  • number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。

  • length 设置固定的行间距。

  • % 基于当前字体尺寸的百分比行间距。

  • inherit 规定应该从父元素继承 line-height 属性的值。

  • 2.4,letter-spacing: (字符间距,指每个字母之间的间距,后面的word-spacing是指单词之间的间距)

  • normal 默认。规定字符间没有额外的空间。

  • length 定义字符间的固定空间(允许使用负值)。

  • inherit 规定应该从父元素继承 letter-spacing 属性的值。

  • 2.5, text-align: (字符对齐)

  • left 把文本排列到左边。默认值:由浏览器决定。

  • right 把文本排列到右边。

  • center 把文本排列到中间。

  • justify 实现两端对齐文本效果。

  • inherit 规定应该从父元素继承 text-align 属性的值。

  • 2.6,text-decoration:(字符装饰)

  • none 默认。定义标准的文本。

  • underline 定义文本下的一条线。

  • overline 定义文本上的一条线。

  • line-through 定义穿过文本下的一条线。

  • blink 定义闪烁的文本。

  • inherit 规定应该从父元素继承 text-decoration 属性的值。

  • 2.7,text-indent:(字符缩进)

  • length 定义固定的缩进。默认值:0。

  • % 定义基于父元素宽度的百分比的缩进。

  • inherit 规定应该从父元素继承 text-indent 属性的值。

  • 2.8,text-transform:(字符变形,用于控制元素中的字母大小写)

  • none 默认。定义带有小写字母和大写字母的标准的文本。

  • capitalize 文本中的每个单词以大写字母开头。

  • uppercase 定义仅有大写字母。

  • lowercase 定义无大写字母,仅有小写字母。

  • inherit 规定应该从父元素继承 text-transform 属性的值。

  • 2.9, unicode-bidi: (设置文本方向)

  • 2.10,white-space:(空白空间:设置元素中空白的处理方式)

  • normal 默认。空白会被浏览器忽略。

  • pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。

  • nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
    标签为止。

  • pre-wrap 保留空白符序列,但是正常地进行换行。

  • pre-line 合并空白符序列,但是保留换行符。

  • inherit 规定应该从父元素继承 white-space 属性的值。

  • 2.11, word-spacing: (字间隔,属性增加或减少单词间的空白,前面的letter-spacing是指每个字母之间的间距)

  • normal 默认。定义单词间的标准空间。

  • length 定义单词间的固定空间。

  • inherit 规定应该从父元素继承 word-spacing 属性的值。

3,背景属性:(background)
Snip20170123_15.png
  • 3.1, background-attachment: (北京粘附:设置背景图像是否固定或者随着页面的其余部分滚动)

  • scroll 默认值。背景图像会随着页面其余部分的滚动而移动。

  • fixed 当页面的其余部分滚动时,背景图像不会移动。

  • inherit 规定应该从父元素继承 background-attachment 属性的设置。

  • 3.2, background-color: (背景颜色)

  • color_name 规定颜色值为颜色名称的背景颜色(比如 red)。

  • hex_number 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。

  • rgb_number 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。

  • transparent 默认。背景颜色为透明。

  • inherit 规定应该从父元素继承 background-color 属性的设置。

  • 3.3,background-image:(背景图片)

  • url('URL') 指向图像的路径。

  • none 默认值。不显示背景图像。

  • inherit 规定应该从父元素继承 background-image 属性的设置。

  • 3.4,background-position:(背景位置)

Snip20170123_16.png
  • 3.5,background-repeat:(背景重复)
  • repeat 默认。背景图像将在垂直方向和水平方向重复。
  • repeat-x 背景图像将在水平方向重复。
  • repeat-y 背景图像将在垂直方向重复。
  • no-repeat 背景图像将仅显示一次。
  • inherit 规定应该从父元素继承 background-repeat 属性的设置。
4,超链接属性:(a:)
  • 设置链接的样式

  • 能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等)

  • 链接的特殊性在于能够根据它们所处的状态来设置它们的样式

  • 链接的四种状态:

    • a:link - 普通的、未被访问的链接
    • a:visited - 用户已访问的链接
    • a:hover - 鼠标指针位于链接的上方
    • a:active - 链接被点击的时刻
  • 实例

a:link {color:#FF0000;}     /* 未被访问的链接 */
a:visited {color:#00FF00;}  /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}   /* 正在被点击的链接 */
5,列表属性:(list)
Snip20170123_17.png
  • 5.1, list-style-image:(列表图片样式)

  • URL 图像的路径。

  • none 默认。无图形被显示。

  • inherit 规定应该从父元素继承 list-style-image 属性的值。

  • 5.2, list-style-position:(列表位置样式)

  • inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。

  • outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。

  • inherit 规定应该从父元素继承 list-style-position 属性的值。

  • 5.3,list-style-type:(列表类型样式)

Snip20170123_18.png
6,轮廓属性:(Outline)
Snip20170123_19.png
  • 6.1,outline-color:(轮廓颜色)

  • color_name 规定颜色值为颜色名称的轮廓颜色(比如 red)。

  • hex_number 规定颜色值为十六进制值的轮廓颜色(比如 #ff0000)。

  • rgb_number 规定颜色值为 rgb 代码的轮廓颜色(比如 rgb(255,0,0))。

  • invert 默认。执行颜色反转(逆向的颜色)。可使轮廓在不同的背景颜色中都是可见。

  • inherit 规定应该从父元素继承轮廓颜色的设置。

  • 6.2,outline-style:(轮廓样式)

Snip20170123_20.png
  • 6.3,outline-width:(轮廓宽度)
  • thin 规定细轮廓。
  • medium 默认。规定中等的轮廓。
  • thick 规定粗的轮廓。
  • length数值 允许您规定轮廓粗细的值。
  • inherit 规定应该从父元素继承轮廓宽度的设置。
7,表格属性:(table)
Snip20170123_21.png
  • 7.1, border-collapse: (边框塌陷,设置表格的边框是否被合并为一个单一的边框)
表格边框塌陷.gif
  • separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

  • collapse 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

  • inherit 规定应该从父元素继承 border-collapse 属性的值。

  • 7.2,border-spacing:(表格边框间距:设置分隔单元格边框的距离)

  • length length
    规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。
    如果定义一个 length 参数,那么定义的是水平和垂直间距。
    如果定义两个 length 参数,那么第一个设置水平间距,而第二个设置垂直间距。

  • inherit 规定应该从父元素继承 border-spacing 属性的值。

  • 7.3,caption-side:(标题位置)

  • top 默认值。把表格标题定位在表格之上。

  • bottom 把表格标题定位在表格之下。

  • inherit 规定应该从父元素继承 caption-side 属性的值。

  • 7.4,empty-cells:(空白单元格是否显示)

  • hide 不在空单元格周围绘制边框。

  • show 在空单元格周围绘制边框。默认。

  • inherit 规定应该从父元素继承 empty-cells 属性的值。

  • 7.5,table-layout:(表格布局算法)

  • automatic 默认。列宽度由单元格内容设定。

  • fixed 列宽由表格宽度和列宽度设定。

  • inherit 规定应该从父元素继承 table-layout 属性的值。

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,629评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 919评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,100评论 18 139
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 1,927评论 1 4
  • 三生三世十里桃花剧 你说都是肥皂般的泡沫无聊 神话的幻想曲不能奢望 我认真的看你的脸 桃花似的绯色霞晕 一圈圈,开...
    萧娜阅读 440评论 6 6