• 技术文章 >web前端 >css教程

    必看的css权威指南笔记

    高洛峰高洛峰2017-03-09 17:53:15原创636
    下面小编就为大家带来一篇必看的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)。

    <p>
        <p>helooo</p>
        <ul>
            <li>111</li>
            <li><strong>222</strong></li>
        </ul>
        <p>
            <em>333</em>
        </p>
    </p>

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

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

    第一行:first-line;

    之前和之后:before :after。

    以上就是必看的css权威指南笔记的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:css
    上一篇:总结CSS浮动所差生的内容溢出问题及清除浮动的方法 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 带你吃透Flex布局的三个属性:flex-grow、flex-shrink、flex-basis• 实例详解CSS渐变锯齿问题如何解决!• 另辟蹊径!看看使用CSS滤镜怎么构建圆角和波浪效果• 聊聊怎么利用 CSS 构建花式透视背景• 详解css中的比较函数(示例介绍)
    1/1

    PHP中文网