web笔记
2016年04月23日

css

content属性

content一般和:before,:after一起使用,用来生成内容(img和input没有该属性),content的内容一般可以为以下四种:

none: 不生成任何值。
attr: 插入标签属性值
url : 使用指定的绝对或相对地址插入一个外部资源(图像,声频,视频或浏览器支持的其他任何资源)
string: 插入字符串

例如:

    <style>
        div:after{
            content:attr(mydata);
            opacity:0;
        }
        div:hover:after{
            opacity:1;
        }
    </style>
    <div mydata="user_define_attribute"></div>

这个例子中:after伪类里定义了div的内容使用mydata属性的值,在鼠标经过div的时候,显示div(注意伪类的先后顺序)

伪元素选择器

伪元素可以选择不在Document结构中的资讯。
属性 描述
:after 或 ::after 元素之后
:before 或 ::before 元素之前
:first-letter 或 ::first-letter 文本第一个字母
:first-line 或 ::first-line 文本首行
::selection 鼠标已选择(CSS3)

虚拟类别选择器

虚拟类别选择器指的是为不同的状态、性质的元素。
代码 描述
:link 超链接未被访问
:visited 超链接被访问过
:hover 滑鼠在元素上面
:active 滑鼠在元素上按着
:focus 焦点在元素上
:target 元素被URL标记(CSS 3新增的类别)
:lang 向带有指定lang属性的元素添加样式。

組合選擇符

CSS里现在共有4种组合选择符(Combinators):
代码 描述
A > B 选择A下一层的元素B
A ~ B 选择与A同父层的元素B
A + B 选择与A相邻的元素B(不能被任何元素相隔)
A B 包含选择符

属性选择器

属性选择器允许用户自定义属性名称,而不仅仅限于id,class属性,参见。属性选择器共有7种
代码 描述
[attribute] 元素有attribute的属性。
[attribute=“value”] 属性attribute里是value
[attribute~=“value”] 属性attribute里使用空白分开的字串裡其中一个是value
[attribute|=“value”] 属性attribute里是value或者以value-开头的字符串
[attribute^=“value”] 属性attribute里最前的是value
[attribute$=“value”] 属性attribute里最后的是value
[attribute*=“value”] 属性attribute里有value出现过至少一次
:not([attr=value]) 属性不等于某个值

例如
筛选功能,可以针对元素的某个属性的值进行筛选
a[href$=’.doc’]:hover{
content:url(icon_doc.gif);
}
筛选 href属性以.doc结尾的a元素,在属性经过时,修改内容引用指定的外部资源

counter 计数器

    <style>
        body
        {
        counter-reset:section;
        }
        
        h1
        {
        counter-reset:subsection;
        }
        
        h1:before
        {
        content:"Section " counter(section) ". ";
        counter-increment:section;
        }
        
        h2:before
        {
        counter-increment:subsection;
        content:counter(section) "." counter(subsection) " ";
        }
    </style>
    
    <h1>HTML tutorials</h1>
    <h2>HTML Tutorial</h2>
    <h2>XHTML Tutorial</h2>
    <h2>CSS Tutorial</h2>
    
    <h1>Scripting tutorials</h1>
    <h2>JavaScript</h2>
    <h2>VBScript</h2>
    
    <h1>XML tutorials</h1>
    <h2>XML</h2>
    <h2>XSL</h2>

另外一个例子

<style>
    h1 {counter-increment: headers;counter-reset: subsections;}
    h1:before {content: counter(headers, upper-roman);}
    h2 {counter-increment:subsections;}
    h2:before {content: counter(headers, upper-roman) "." counter(subsections, lower-roman) ":";}
</style>

css4

以下的内容还未得到支持

目标选择器

    <style>
        ul > $p > .a1{
            color:#fff;
        }
    </style>

CSS4里其中一项新功能就是能够定义于Selection Chain裡哪一个是目标。于上例里,p前面加了一个$号,代表它就是要改变的目标,即「把里面带有a1样式的p的颜色转为白色。
这已被证实是谣言

:matches()

CSS4里其中另一项新功能就是能够使用:matches()来简化选择器。下面两个样式渲染的结果是一样的

    <style>
        :matches(div, p, nav) span{
          font-size: 18px;
        }
        div span, p span, nav span{
          font-size: 18px;
        }
    </style>

jquery 滚动到锚点

    <script>
        $("html,body").animate({scrollTop: $("#box").offset().top}, 1000);
    </script>

相关链接

http://www.w3cplus.com
http://www.w3school.com.cn/

jquery 截图
https://github.com/fengyuanchen/cropper