一.引入样式    1.行内样式表   <h1 style="color: red;font-size: 18px;">10-30</h1>     2.内部样式表(在head标签里面,title标签下面)   <style type="text/css">    h2{     color: yellow;     font-size: 20px;    }   </style>   优点    方便在同页面中修改样式   缺点    不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底

3.外部样式表   嵌入式    <link href="../css/index.css" rel="stylesheet" type="text/css"/>   导入式    <style type="text/css">     @import "../css/index.css";    </style>   嵌入式和导入式的区别:    1.<link/>标签属于XHTML,@import是属于CSS2.1    2.使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示    3.使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中    4.@import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的      4.样式优先级   行内>内部>外部   就近原则

二.基本选择器    1.标签选择器(通过标签名称定位)   h2{             color: red;         }     2.类选择器(通过标签中class属性的值定位,值可以重复,不能以数字开头)   .class01{             color:yellow;         }   <h2 class="class01">10-30</h2>   <h1 class="class01">10-31</h1>     3.ID选择器(通过标签中id属性的值定位,值不可以重复,不能以数字开头)    #id01{             color: red;         }   <h2 id="id01">10-30</h2>   <h1 id="id02">10-31</h1>     4.基本选择器的优先级   不遵循就近原则,无论哪一种样式表的导入,都遵循:id选择器>类选择器>标签选择器    三.高级选择器    1.层次选择器    /*后代选择器*/         li p{             background-color: yellow;         }         /*子选择器*/         body>p{             background-color: aqua;         }         /*相邻兄弟*/         .class01+p{             background-color: red;         }         /*通用选择器*/         .class01~p{             background-color: blue;         }    2.结构伪类选择器     ul li:first-child{             background-color: yellow;         }         ul li:last-child{               background-color: red;         }         ul li:nth-child(even){             background-color: blue;         }   /*匹配元素类型*/         p:first-of-type{             background-color: pink;         }         p:last-of-type{             background-color: green;         }         p:nth-of-type(3){             background-color: aqua;         }    3.属性选择器   /*包含id属性*/   a[id]{             background-color: red;         }   /*包含target属性,并且值为_blank*/         a[target=_blank]{             background-color: yellow;         }   /*包含title属性,并且值以we开头*/         a[title^=we]{             background-color: aqua;         }   /*包含title属性,并且值以e结尾*/         a[title$=e]{             background-color: black;         }   /*包含class属性,并且值包含it*/         a[class*=it]{             background-color: blue;         }

初始CSS3小知识【99%人不知道的小技巧】的更多相关文章

  1. 12个你未必知道的CSS小知识

    虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS ...

  2. 【C#小知识】C#中一些易混淆概念总结(三)---------结构,GC,静态成员,静态类

    目录: [C#小知识]C#中一些易混淆概念总结 [C#小知识]C#中一些易混淆概念总结(二) ---------------------------------------分割线----------- ...

  3. xcode 发展史 及 做iOS 必须知道的小知识

    Xcode 3.0 是开发人员建立 Mac OS X 应用程序的最快捷方式,也是利用新的苹果电脑公司技术的最简单的途径.Xcode 3.0 将Mac OS X的轻松使用,UNIX 能量以及高性能的开发 ...

  4. 漫谈程序员(十一)老鸟程序员知道而新手不知道的小技巧之Web 前端篇

    老鸟程序员知道而新手不知道的小技巧 Web 前端篇 常充电!程序员只有一种死法:土死的. 函数不要超过50行. 不要一次性写太多来不及测的代码,而是要写一段调试一段. UI和编码要同步做. 多写注释方 ...

  5. 【C#小知识】C#中一些易混淆概念总结(五)---------继承 分类: C# 2014-02-06 22:05 1106人阅读 评论(0) 收藏

    目录: [C#小知识]C#中一些易混淆概念总结--------数据类型存储位置,方法调用,out和ref参数的使用 [C#小知识]C#中一些易混淆概念总结(二)--------构造函数,this关键字 ...

  6. 【C#小知识】C#中一些易混淆概念总结(五)---------深入解析C#继承

    目录: [C#小知识]C#中一些易混淆概念总结--------数据类型存储位置,方法调用,out和ref参数的使用 [C#小知识]C#中一些易混淆概念总结(二)--------构造函数,this关键字 ...

  7. 【C#小知识】C#中一些易混淆概念总结(四)---------解析Console.WriteLine() 分类: C# 2014-02-05 17:18 1060人阅读 评论(0) 收藏

    目录: [C#小知识]C#中一些易混淆概念总结 [C#小知识]C#中一些易混淆概念总结(二) [C#小知识]C#中一些易混淆概念总结(三) ------------------------------ ...

  8. 【C#小知识】C#中一些易混淆概念总结(二)--------构造函数,this关键字,部分类,枚举 分类: C# 2014-02-03 01:24 1576人阅读 评论(0) 收藏

    目录: [C#小知识]C#中一些易混淆概念总结--------数据类型存储位置,方法调用,out和ref参数的使用 继上篇对一些C#概念问题进行细节的剖析以后,收获颇多.以前,读书的时候,一句话一掠而 ...

  9. 【前端词典】几个有益的 CSS 小知识

    今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码:   HTML 代码:   记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) ...

随机推荐

  1. 面试官再问Redis分布式锁如何续期?这篇文章甩 他一脸

    一.真实案例 二.Redis分布式锁的正确姿势 据肥朝了解,很多同学在用分布式锁时,都是直接百度搜索找一个Redis分布式锁工具类就直接用了.关键是该工具类中还充斥着很多System.out.prin ...

  2. python学习之os模块

    1 window下的路径分隔符和mac上的一样吗 在win下用\做路径分隔符,mac里用/ 2.如何查看当前工作目录 import os os.getcwd() 3.如何切换当前工作目录 import ...

  3. python系列:二、Urllib库的高级用法

    1.设置Headers 有些网站不会同意程序直接用上面的方式进行访问,如果识别有问题,那么站点根本不会响应,所以为了完全模拟浏览器的工作,我们需要设置一些Headers 的属性. 打开我们的浏览器,调 ...

  4. Java开发环境之IntelliJ IDEA

    查看更多Java开发环境配置,请点击<Java开发环境配置大全> 贰章:IntelliJ IDEA安装教程 1)去官网下载IDEA安装包 https://www.jetbrains.com ...

  5. tar.bz2解压异常

    问题描述: [root@mvp-dd ~]# tar jxf ffmpeg-.tar.bz2 tar (child): bzip2: Cannot exec: No such file or dire ...

  6. Python并发编程-多进程

    Python并发编程-多进程 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.多进程相关概念 由于Python的GIL全局解释器锁存在,多线程未必是CPU密集型程序的好的选择. ...

  7. GTID主从与传统主从复制

    目录 1.主从复制 2.靠什么同步 3.pos与GTID的什么区别 4.GTID的工作原理 5.GTID参数配置 5.1 在主数据库里创建一个同步账号授权给从数据库使用 5.2 配置主数据库 5.3配 ...

  8. Linux必知必会--grep

    花更少的时间,去验证一件事情:你到底是富翁,还是贫民. --一位历经沧桑的炒客 转自:https://man.linuxde.net/grep grep命令 grep(global search re ...

  9. C#锐利体验2读书笔记

    匿名方法,迭代,匿名方法允许我们以一种“内联”的方法来编写方法代码;匿名方法是直接与委托实例化相关联的,使委托实例化更加直观方便.匿名方法的几个相关问题--参数列表,--返回值,--外部变量. add ...

  10. VS2012 VS2010 VTK引入设置

    1.C/C++ ---> 附加包含的目录 F:/VTK61/VTK-6.1.0/SLN/Filters/Sources F:/VTK61/VTK-6.1.0/VTK-6.1.0/Filters/ ...