zoukankan      html  css  js  c++  java
  • css权威指南(上)

    替换元素指用来替换内容的部分并非由文档内容直接表示,最常见的是图片,与之对应的就是非替换内容

    <img src="how.gif"/>

    display展示的形式,常见的值none、inline(行内)、block(块)

    <link rel="stylesheet" type="text/css" href="sheet1.css" media="all"/>

    <style type="text/css">

      ...

    </style>

    <style type="text/css">

    @import url(sheet2.css);  /*必须放在其他css规则之前,否则不起作用*/

    h1{color:gray;}

    </style>

    向后兼容,对于不支持<style></style>的浏览器,将会以文本的形式显示css中的内容,解决方法:

    <style type="text/css"><!--

    @import url(sheet2.css);

    h1{color:gray;}

    --></style>

    <p style="color:gray;">123456</p>

    第二章  选择器

    h1,h2,h3{color:red;background:yellow;}

    *{color:red;background:yellow;}

    p.warning{font-weight:bold;}

    #lead-para{font-weight:bold;}

    h1[class]{color:silver;}  //属性选择器,拥有class这个属性

    h1[class="t1"]{color:silver;}  //属性选择器,拥有class这个属性,并且值等于“t1”

    子串匹配选择器

    [foo^="bar"]  /*选择foo属性以“bar”开头的所有属性*/

    [foo$="bar"]  /*选择foo属性以“bar”结尾的所有属性*/

    [foo*="bar"]  /*选择foo属性包含“bar”的所有属性*/

    后代选择器

    h1 em {color:gray;}

    选择子元素

    h1>em {color:gray;}

    选择相邻兄弟元素

    h1+p {color:gray;}  /*h1元素后的p元素*/

    伪类选择器

    :link未访问过的地址的锚

    :visited已访问过的地址的锚

    a #footer-copyright:visited{font-weight:normal;}

    :focus拥有焦点时

    :hover指针停留在元素上

    :active被激活的元素(点击鼠标时)

    顺序:link→:visited→:hover→:active

    另一个静态伪类:first-child来选择元素的第一个子元素,这个很容易混淆

    p:first-child{font-weight:bold;}  /*选择作为元素的第一个子元素<p>*/

    结合伪类

    a:link:hover{color:red;}  /*停留在未点击的链接上*/

    伪元素选择器

    p:first-letter{color:red;}  /*对首字母设置样式*/

    :first-line{color:red;}

    first-letter和:first-line只能应用到块级元素

    所有伪元素只能放在选择器的最后面

    设置在之前和之后元素的样式

    h2:before{content:"[[";color:silver;}  /*在每个h2元素前加一对银色中括号*/

    body:after{content:"The End.";}

    第三章  结构和层叠

    特殊性

    一个元素有多个冲突的属性,取最高特殊性的声明

    选择器中有ID属性值加0,1,0,0

    选择器中有类属性值、属性选择或伪类加0,0,1,0

    选择器有各个元素和伪元素加0,0,0,1

    p em{color:purple;}  /*特殊性为0,0,0,2*/

    声明和特殊性

    每个内联样式的特殊性是1,0,0,0

    重要性

    p.dark{color:#333 !important;}

    重要性与特殊性不比较(与非重要性比较),!important要放到声明的最后(分号之前,否则整条声明无效)

    继承

    继承会沿着文档树向下传播,大多数框模型属性(外边距、内边距和背景等)不能继承

    继承的属性没有特殊性,为0,0,0,0

    层叠

    CSS让样式层叠在一起,是通过结合继承和特殊性做到的

    第四章  值和单位


    h1{color:rgb(100%,100%,100%);}  /*大于100%,小于0%将被转化为100%和0%*/

    h1{color:rgb(255,255,255);}  /*同上转化为0和255*/

    h1{color:#FF0000;}  /*00~FF*/

    h1{color:#F00;}  /*会自动复制成两位:FF0000*/

    绝对长度常用单位英寸(in)和点(pt)1in=72pt,厘米毫米米等

    相对长度常用的有em(等于父元素字体的大小)、ex(相对于x的高度)和px(像素)

    关键字

    用于描述一个值的字

    a:link,a:visited{text-decoration:none;}  /*这个none*/

    inherit是所有属性共有的,使一个属性的值与父元素相同,多数情况下属性会自然继承,不必指定

    第五章  字体

    可以使用属性font-family指定文档的字体

    body{font-family:sans-serif;}

    body{font-family:Arial,sans-serif;}  /*若前一种字体不存在,则采用后一种字体*/

    如果字体名称里包含空格、$#等类似符号,需要加引号

    h2{font-family:wedgie,'Karrank',Klingon,fantasy;}

    font-weight属性用于字体加粗,值有normal、bold、bolder、lighter、100、200、...inherit等

    font-size,xx-small、x-small、small、medium(默认值)、large、x-large、inherit等

    body{font-size:15px;}

    body{font-size:120%;}

    font-style字体风格,italic(带有一些变形的斜体)、oblique(生硬的变斜)、norma(默认)和inherit

    font-variant字体变形,small-caps(首字母大写)、normal(默认)和inherit

    font属性集合了所有的字体属性

    h1{font-family:Verdana,Helvetica,Arial,sans-serif;font-size:30px;font-weight:900;font-style:italic;font-variant:normal;}

    h1{font:30px 900 italic normal Verdana,Helvetica,Arial,sans-serif;}

    在简写的font属性中,后两个值font-size必须在font-family之前(其它属性顺序不规定),并且这两个值一定存在,不然整条声明无效

    可以使用系统的字体

    caption标题icon图标menu菜单message-box对话框small-caption小控件status-bar窗口状态栏

    button{font:caption;font-size:1em;}

    第六章  文本属性

    文本缩进text-indent属性,<length>(长度)<percentage>(按照父元素的百分比计算)inherit,行内元素和图像之类的替换元素无法应用text-indent属性

    p{text-indent:3em;}  /*可以设置为负值,注意别超出左边界*/

    水平对齐text-align属性,left(左对齐)、right(右对齐)、center(居中)、justify(两端对齐,会拉伸单个词或字的间隔)和inherit,同样只应用于块级元素

    行高text-height指文本行基线之间的距离,而不是字体的大小,<length>、<percentage>、<number>、normal和inherit,行间距就是text-height减去font-size,再除2就是字的顶部和底部的留白

    垂直对齐vertical-align,baseline(默认值:基线对齐)、sub(下标:基线以下)、super(基线以上)、bottom(底端对齐:行内框的底端与行框底端对齐)、text-bottom(文本底端对齐)、moddle(把行内元素框的中点与父元素基线上方0.5ex处的一个点对齐)、top(与bottom相反)和text-top(与text-bottom相反)

    p{vertical-align:5px;}  /*将元素与对齐前上升5px,也可以是负数*/

    字间距word-spacing,<length>、normal和inherit

    字母间隔letter-spacing,<length>、normal和inherit

    文本转换text-transform,uppercase、lowercase、capitalize(每个单词的首字母大写)、none和inherit

    文本装饰text-decoration,none(关闭所有装饰)、underline(下划线)、overline(上划线)、line-through(中间划线)、blink(闪烁)和inherit

    处理空白符white-space,会影响文档中的空格、换行和tab字符的处理,normal(默认:多个空白符合并为一个空格)、nowrap(除非使用了br元素,否则会防止元素中的文本换行)、pre(多个空白符不会被省略)、pre-wrap(保留多个空白符,文本会正常换行)、pre-line(与pre-wrap相反,省略空白符,保留换行符)和inherit

    文本方向direction,ltr、rtl和inherit

  • 相关阅读:
    JDBC笔记
    MySQL索引
    MySQL事务
    联想笔记本更新BIOS后无法开机,显示自动修复?
    Mysql(笔记)
    [ERROR] Some problems were encountered while processing the POMs: 'modules.module[1]' specifies duplicate child module servlet-01 @ line 13, column 17
    JavaWeb(笔记)
    I/O方式(本章最重要)
    I/O接口
    I/O-外部设备
  • 原文地址:https://www.cnblogs.com/sdgjytu/p/3803952.html
Copyright © 2011-2022 走看看