zoukankan      html  css  js  c++  java
  • css权威指南--笔记

    第1章 css和文档

        1,元素:替换元素(img input),非替换元素(大多数span)。

        2,link:rel(代表关系:stylesheet,候选样式表:alternate stylesheet);type(text/css);media:(all(所有表现媒体, screen,print),title(配合候选使用)。

        3,@import url(sheet1.css) 需在style内使用,放在其他css规则之前。

        4,向后可访问性:<style><!-- 样式 --></style>,这样较老浏览器会将style忽略,能理解css的浏览器能正常读取样式表。

        5,css注释:/* */。

    第2章 选择器

        1,对声明分组时,一定要在各个声明的最后使用分号。

        2,p.warming.help {background:red;} 只匹配class包含warming和help的p元素,如果p包含warming和其他的则不能匹配。

        3,实际上,浏览器并不检查html中id的唯一性,但这会导致编写dom更困难。

        4,属性选择器:h1[class] {...} 

                             h1[class=''] {...}完全匹配

                             h1[class~=''] {...}部分匹配 [class^='']以什么开头 [class$='']以什么结尾 [class*='']包含什么的所有元素

                             *[lang|='en']特定属性选择器,会选择lang属性等于en或以en-开头的所有元素。

        5,选择子元素:h1>strong;选择相邻兄弟元素h1+p(h1和p有共同父元素,最终选择p)。

        6,链接伪类:未访问链接:link,访问过链接:visited(它们都是静态的),等同于<body link='' vlink=''>。

             动态伪类:焦点:focus,鼠标停留:hover,激活:active。(动态伪类可以用于任何元素)

             建议伪类顺序:link-visited-focus-hover-active。

             选择第一个子元素(:first-child),很容易误解,是所有第一个子元素(在下面例子中,作为第一个子元素的元素包括第一个p,第一个li和strong及em)。

     1 <div>
     2     <p>helooo</p>
     3     <ul>
     4         <li>111</li>
     5         <li><strong>222</strong></li>
     6     </ul>
     7     <p>
     8         <em>333</em>
     9     </p>
    10 </div>

            根据语言选择(:lang()),如*:lang(fr){color:red;} 这是将所有法语元素变成红色。

            伪元素选择器:首字母:first-letter,用户代理动态构成假象元素<p:first-letter>;

                                第一行:first-line;

                                之前和之后:before :after。

    第3章 结构和层叠

        1,实际上,所有样式冲突的解决都是由层叠来处理。

            选择器的特殊性:id选择器(0,1,0,0);类 属性 伪类(0,0,1,0);各个元素和伪元素(0,0,0,1);通配选择器(0,0,0,0);内联样式(1,0,0,0)。

            重要性:!important放在声明的结束分号之前。

        2,例外:应用到body元素的背景样式可以传递到html元素(html是文档的根元素),相应的可以定义其画布。

            大多数框模型属性都不能继承(包括外边距 内边距 背景 边框),继承的值没有特殊性,0特殊性比无特殊性要强。

        3,声明权重由大到小:读者的重要声明>创作人员的重要声明>创作人员的正常声明>读者的正常声明>用户代理声明。 

            通过将伪类链接在一起,可以缓解特殊性和顺序带来的问题。

    第4章 值和单位

        1,函数式rgb颜色:rgb(color),color用一个百分数(0%-100%)或者整数三元组(0-255)表示。

            十六进制rgb颜色:将三个介于00-FF的十六进制数连起来,就可以设置一种颜色。

            web安全颜色:在256色计算机系统上总能避免抖动的颜色。rgb值20%和51的倍数,0% 0也是,十六进制值00,33,66,99,cc,ff。

        2,绝对长度单位:in cm mm pt pc。

            相对长度单位:1个em定义为一种给定字体的font-size值(这个值随元素的不同而不同),ex指所用字体中小写x的高度,px非常适合用于度量图像大小(一小网格就是1像素)。

        3,a{color:inherit}可以让链接使用继承的color值而非用户代理的默认样式。

        4,角度值:度(deg),梯度(grad),弧度(rad),都允许度数。

            时间值:ms,s,不允许负值。

            频率值:Hz,MHz,不允许负值。

    第5章 字体

        1,serif字体:这些字体成比例,而且有上下短线;sans-serif:这些字体是成比例的,而且没有上下短线;cursive:模仿人的手写体。

        2,建议在所有的font-family规则中都提供一个通用字体,这样当用户代理无法提供特定字体时,就可以选择一个候选字体,如:font-family:Times,TimesNR,...,serif,当字体名包含# ¥ 空格之类的符号时就要加上引号。

        3,font-weight:normal和bold分别对应400和700,font-weight是可以继承的,让字体更粗bolder,让字体更细lighter。

        4,font-size:larger和smaller缩放因子1.2(通常),百分值是根据从父元素继承的大小,与相对大小关键字一样百分号可以积累。

    1 p{font-size:12px;}
    2 em{font-size:120%;}    /* 12px*120% */
    3 strong{font-size:135%;}    /* 12px*120%*135% */
    4 <p><em><strong></strong></em></p>

        5,font-style:默认值normal,斜体italic,倾斜oblique。

        6,font-variant(字体变形):默认normal,小型大写字母文本small-caps。

        7,font-stretch(字体拉伸):wider...不过现在浏览器都还不支持%>_<%。

        8,font-size-adjust(调整字体大小):目前测试只有firefox支持,x的高度除以font-size的结果称为方面值。

        9,font:(font-style font-variant font-weight)(font-size font-family)前三个顺序随意,后面两个固定且必须,line-height可以加在font-size后面且用'/'隔开。

        10,@font-face{font-family:'';src:url();}会延迟文档显示。

    第6章 文本属性

        1,text-indent应用于块级(可以是数值 百分数 inherit),可以继承。

        2,text-align用于块级(left(默认) right center justify(两端对齐) inherit),可继承。

        3,line-height:em ex和百分数都是相对于元素的font-size值计算的。行间距=(line-height)-(font-size),然后行间距除以2分别加在内容区的顶部和底部就是行内框。

        4,vertical-align:用于行内及替换元素,无继承性,默认baseline。sub使元素变为下标,super将元素的基线相对于父元素的基线升高。

        5,word-spacing:字间隔,值可为正值 负值 0(narmal);letter-spacing:字母间隔,值可为正值 负值 0(narmal)。

        6,text-transform:uppercase,lowercase,capitalize(首字母大写),none(默认)。

        7,text-decoration:underline,overline(上划线),line-through(贯穿),blink(文本闪烁),不能继承(为了使装饰匹配,必须显式的声明其装饰)。

        8,text-shadow:水平阴影位置 垂直阴影位置(负值就是左上方) 模糊半径 颜色。

        9,white-space:normal(忽略空格换行),pre(空白符不会忽略),nowrap(不换行),pre-wrap(保留空白符换行),pre-line(合并空白符保留换行符)。

        10,direction(文本方向):ltr,rtl;行内元素只有当unicode-bidi设置为embed或bidi-override时才会应用direction。

        11,word-wrap:normal(只在允许的断字点换行),break-word(在长单词或url内部进行换行);如果这一行放不下这个单词会做到下一行。

        12,word-break:break-all(允许单词内换行),keep-all(只能在半角空格或连字符处换行);如果这一行放不下会继,,续放。

    第7章 基本视觉格式化(略看的)

        1,内边距不能为负值,外边距可以,边框宽度据对不能为负值,border-color如果没设则取元素内容的前景色。

    第8章 内边距、边框和外边距

        1,margin(padding)可设置百分数值,是相对于父元素的width计算的;margin外边距会合并,padding内边距不会。

        2,对于行内非替换元素:外边距通过改变元素内容在行中的起点来影响换行,margin不影响上下只影响左右;对于替换元素:margin会影响行高。

        3,边框默认为none,边框宽度默认为medium(通常2px)。

        4,border-style:dotted(点),dashed(虚线),double(双线),groove(3D 凹槽边框),ridge(3D 垄状边框),inset,outset(凸起)。

        5,border-width:thin,medium(默认),thick,length。

        6,border-color:color,transparent(透明边框)。

        7,padding:对于有背景色和内边距的行内非替换元素,背景可以向元素上面和下面延伸。

        8,无论替换元素是块级还是行内元素,内边距都会围绕其内容,背景色将填入该内边距(例如图片底部与文字对齐,input与文字居中对齐,而不会覆盖)。

    第9章 颜色和背景

        1,color是可以继承的;background-color不能继承(默认transparent),如果一个元素没有指定的颜色,那么背景应当是透明的,这样其祖先元素的背景才能可见。

        2,所有的背景属性都不能继承。只要有背景图像就应该同时包含一个背景颜色。

        3,background-repeat:repeat(默认),repeat-x,repeat-y,no-repeat。

        4,background-position:0% 0%(默认),left,center,right,top,bottom,length。如果只出现一个关键字,则认为另外一个关键字是center。如果有两个值必须一起出现,水平值在前垂直值在后。

        5,background-attachment:scroll,fixed。

    第10章 浮动和定位

        1,浮动元素周围的外边距不会合并,如果要浮动一个非替换元素则必须声明width。

        2,浮动元素的包含块是其最接近的块级祖先元素,此外,浮动元素会生成一个块级框。

        3,浮动规则:①浮动元素的左(或右)外边界不能超过其包含块的左(或右)内边界;

                          ②浮动元素的左(或右)外边界必须是源文档中之前出现的左浮动(或右浮动)元素的右(左)外边界,除非出现浮动元素的顶端在先出现浮动元素的底端下面(这样就不会重叠)。

                          ③左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边(不会重叠)。

                          ④浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。

        4,负外边距可能导致浮动元素移到父元素的外面。

        5,行内框与一个浮动元素重叠时,其边框背景和内容都在该浮动元素之上显示;块框与一个浮动元素重叠时,其边框和背景在该浮动元素之下显示,内容在之上。

        6,clear工作原理:它会增加元素的上外边距,使之最后落在浮动元素的下面,这实际上会忽略为清除元素(设置clear的元素)顶端设置的外边距宽度。

             清除区域:在元素上外边距之上增加的额外间隔,不允许任何浮动元素进入这个范围内。这意味着元素设置clear时,它的外边距并不改变。之所以向下移是因为清除区域造成的。

        7,position:static(默认),元素框正常生成;

                          relative,元素框偏离某个距离;

                          absolute,元素框从文档流完全删除,相对于其包含块定位,元素定位后生成一个块级框;

                          fixed,元素框表现类似于absolute,不过其包含块是视窗本身。

              元素可以定位到其包含块的外部。

        8, 偏移属性:top,bottom(百分数相对于包含块的高度),left,right(相对于包含块的宽度)。默认值是auto。

        9,min-width max-width使元素不至于太宽或太高,而且可以相对安全地混合使用不同的单位。

        10,overflow:visible(默认),hidden,scroll,auto。用于块级和替换元素。

        11,clip:rect(top,right,bottom,left),auto。所有偏移都是距左上角的偏移(不允许百分数可以是负值),用于绝对定位元素。

        12,visibility:visible(默认),hidden(不可见但还会影响文档布局),collapse(同于hidden)。

        13,绝对定位元素的包含块是最接近的position值不为static的祖先元素;如果值过度受限,用户代理会忽略right(bottom)的值(从左向右读)。

        14,z-index:auto(默认),integer。

        15,固定定位:元素会完全从文档流中去除。    

        16,相对定位:移动走了之后,原位置空白,可以覆盖其他内容;若过度受限,一个值会重置为另一个值的相反数。

    第11章 表布局

        1,display:inline(默认),none,blcok,list-item,table等等。

        2,border-collapse:collapse(合并边框),separate(默认分隔边框),应用于display值为table或inline-table的元素

        3,border-spacing(边框间隔):默认为0,length(除非为separate,否则忽略该属性)。

        4,empty-cells(空单元格):show(默认),hide。

        5,table-layout:auto(默认),fixed。

    第12章 列表与生成内容

        1,列表类型(list-style-type):disc(默认),circle等等。

        2,列表项图像(list-style-image):none(默认),url()。

        3,列表标志位置(list-style-position):outside(默认),inside。

            以上均用于display值为list-item的元素。

        4,使用外边距和内边距实现缩进:ul{margin-left:0;padding-left:1em}或ul{margin-left:1em;padding-left:0}。

        5,指定内容(content):normal(默认),attr(href)。

        6,生成引号(quotes):' " '  ' " '。

        7,counter-reset(设置计数器起点),counter-increment(递增一定的量),还需结合content属性和一个与计数器有关的值。

    第13章 用户界面样式

        1,系统字体:caption,icon,menu,message-box,small-caption,status-bar这些值只能用于font属性。

        2,系统颜色:不建议使用,css3已废除。

        3,光标(cursor):auto(默认,用户代理确定最适合的)与default(系统默认的)不同,pointer(手),text(文本图标),crosshair(十字),move,url()等等。

        4,轮廓样式(outline-style):none,dotted,dashed,solid等等,轮廓与边框不同在于只能指定一个关键字,可以画在边框外面。

        5,轮廓宽度(outline-width):thin,medium(默认),thick,length。

        6,轮廓颜色(outline-color):color,invert(默认)。(outline:color style width)。

    第14章 非屏幕媒体

        1,media:screen,print,all等等(用于link标签中)。

  • 相关阅读:
    windwos8.1英文版安装SQL2008 R2中断停止的解决方案
    indwows8.1 英文版64位安装数据库时出现The ENU localization is not supported by this SQL Server media
    Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds
    SQL数据附加问题
    eclipse,myeclipse中集合svn的方法
    JAVA SSH 框架介绍
    SSH框架-相关知识点
    SuperMapRealSpace Heading Tilt Roll的理解
    SuperMap iserver manage不能访问本地目的(IE9)
    Myeclipse中js文件中的乱码处理
  • 原文地址:https://www.cnblogs.com/colima/p/5540102.html
Copyright © 2011-2022 走看看