CSS学习心得(二)

CSS字体

  • 字体系列(font-family)
  • font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。
  • 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体"。

    p{font-family:"Times New Roman",Times,serif;}

对于较常用的字体组合,看看我们的 Web安全字体组合

  • 字体样式(font-style)

    • 正常normal
    • 斜体italic
    • 倾斜的文字oblique
  • 字体大小(font-size)

  1. :设置文字像素大小

      h1 {font-size:40px;}
    

上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。
虽然可以通过浏览器的缩放工具调整文本大小,但是,这种调整是整个页面,而不仅仅是文本

  1. 用em来设置字体大小
    1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
    h2 {font-size:1.875em;}
    在上面的例子,em的文字大小是与前面的例子中像素一样。不过,如果使用 em 单位,则可以在所有浏览器中调整文本大小。
    不幸的是,仍然是IE浏览器的问题。调整文本的大小时,会比正常的尺寸更大或更小。

  2. 使用百分比和EM组合
    body {font-size:100%;}
    h1 {font-size:2.5em;}
    在所有浏览器中,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。

CSS链接

链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。

  • 链接状态
    a:link- 正常,未访问过的链接
    a:visited - 用户已访问过的链接
    a:hover- 当用户鼠标放在链接上时
    a:active - 链接被点击的那一刻

当设置为若干链路状态的样式,也有一些顺序规则:
a:hover必须跟在a:linka:visited后面
a:active必须跟在 a:hover后面

创建连接框

 a:link,a:visited
{
display:block;/*让元素变为块级元素*/
font-weight:bold;/*字体粗细*/
color:#FFFFFF;
background-color:#98bf21;
width:120px;/*设置背景块状宽度*/
text-align:center;/*将字体位于块状中部*/
padding:4px;/*填充*/
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
} 

CSS列表

ps:u1表示无序列 o1表示有序列表

  • 不同的列表项标记(list-style-type)
ul.a {list-style-type: circle;}/*圈*/
ul.b {list-style-type: square;}/*方块*/
ol.c {list-style-type: upper-roman;}/*罗马字母*/
ol.d {list-style-type: lower-alpha;}/*字母排序*/
  • 作为列表项标记的图像(list-style-image)

    u1 {list-style-image:url('.....');}
    
  • 缩写(list-style)

    ul
    {
     list-style: square url("sqpurple.gif");
    }
    

    顺序:1.type 2.position 3.image

CSS表格

  • 边框属性(border,border-collapse)

    table {border-collapse:collapse;}
    table,th,td {border: 1px solid black;}
    
  • 高度与宽度(width,height)

    table {width:100%;}
    th {height: 50px;}
    
  • 对齐方式(水平对齐text-align,垂直对齐vertical-align)

text-align: right left center
vertical-align:top middle bottom` 更多见参考手册。

  • 标题位置(caption-side)
    caption {caption-side:bottom;}

表格填充padding 表格背景 字体不再赘述。

CSS边框

  • 边框样式(border-style)
    border-style属性用来定义边框的样式。

  • 边框宽度(border-width)
    为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em(单位为 px, pt, cm, em 等),或者使用 3 个关键字之一,它们分别是 thick 、medium(默认值) 和 thin。
    注意:CSS 没有定义 3 个关键字的具体宽度,所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px,而另一个用户则分别设置为 3px、2px 和 1px。

  • 边框颜色(border-color,必须由border-style设置样式后才可使用)
    ps:透明为transparent

  • 边框-单独设置各边

    p
    {
      border-top-style:dotted;
      border-right-style:solid;
      border-bottom-style:dotted;
      border-left-style:solid;
    }
    ------------------------------------------------------------------------------------
       border-style:dotted solid;/*上下dotted,左右solid*/
    
  • 边框-简写属性
    border:5px solid red;

    可以分别控制边框四个边的属性
    a,b,c,d:上右下左
    a,b,c:上(左右)下
    a,b:(上下)(左右)

CSS轮廓(outlines)

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

属性:outline-color;outline-style;outline-width;
(ps:觉得这个东西好丑啊)

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,748评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,050评论 0 1
  • 本文为阅读《Head First HTML 与 CSS》的css部分的读书笔记,方便回顾书上的知识,另一篇为Hea...
    兼续阅读 1,820评论 0 17
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,075评论 0 40
  • 提过了好饿好饿的毛毛虫之后,当然不得不提棕熊棕熊,你看到了什么? 全书用非常简单,并且重复率高的句型一直在重复,X...
    先行教育罗茜阅读 288评论 0 0