初始CSS3小知识【99%人不知道的小技巧】
一.引入样式 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%人不知道的小技巧】的更多相关文章
- 12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS ...
- 【C#小知识】C#中一些易混淆概念总结(三)---------结构,GC,静态成员,静态类
目录: [C#小知识]C#中一些易混淆概念总结 [C#小知识]C#中一些易混淆概念总结(二) ---------------------------------------分割线----------- ...
- xcode 发展史 及 做iOS 必须知道的小知识
Xcode 3.0 是开发人员建立 Mac OS X 应用程序的最快捷方式,也是利用新的苹果电脑公司技术的最简单的途径.Xcode 3.0 将Mac OS X的轻松使用,UNIX 能量以及高性能的开发 ...
- 漫谈程序员(十一)老鸟程序员知道而新手不知道的小技巧之Web 前端篇
老鸟程序员知道而新手不知道的小技巧 Web 前端篇 常充电!程序员只有一种死法:土死的. 函数不要超过50行. 不要一次性写太多来不及测的代码,而是要写一段调试一段. UI和编码要同步做. 多写注释方 ...
- 【C#小知识】C#中一些易混淆概念总结(五)---------继承 分类: C# 2014-02-06 22:05 1106人阅读 评论(0) 收藏
目录: [C#小知识]C#中一些易混淆概念总结--------数据类型存储位置,方法调用,out和ref参数的使用 [C#小知识]C#中一些易混淆概念总结(二)--------构造函数,this关键字 ...
- 【C#小知识】C#中一些易混淆概念总结(五)---------深入解析C#继承
目录: [C#小知识]C#中一些易混淆概念总结--------数据类型存储位置,方法调用,out和ref参数的使用 [C#小知识]C#中一些易混淆概念总结(二)--------构造函数,this关键字 ...
- 【C#小知识】C#中一些易混淆概念总结(四)---------解析Console.WriteLine() 分类: C# 2014-02-05 17:18 1060人阅读 评论(0) 收藏
目录: [C#小知识]C#中一些易混淆概念总结 [C#小知识]C#中一些易混淆概念总结(二) [C#小知识]C#中一些易混淆概念总结(三) ------------------------------ ...
- 【C#小知识】C#中一些易混淆概念总结(二)--------构造函数,this关键字,部分类,枚举 分类: C# 2014-02-03 01:24 1576人阅读 评论(0) 收藏
目录: [C#小知识]C#中一些易混淆概念总结--------数据类型存储位置,方法调用,out和ref参数的使用 继上篇对一些C#概念问题进行细节的剖析以后,收获颇多.以前,读书的时候,一句话一掠而 ...
- 【前端词典】几个有益的 CSS 小知识
今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) ...
随机推荐
- (转).NET Core中实现AOP编程
原文地址:https://www.cnblogs.com/xiandnc/p/10088159.html AOP全称Aspect Oriented Progarmming(面向切面编程),其实AOP对 ...
- java之mybatis之使用mybatis实现crud操作
目录结构: 1.封装 mybatis 的工具类: MybatisUtil.java public class MybatisUtil { private static SqlSessionFactor ...
- C# vb .net实现大小调整特效滤镜
在.net中,如何简单快捷地实现Photoshop滤镜组中的大小调整效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...
- Date类的相关方法记录
1.Date类中的时间单位是毫秒,System.currentTimeMills()方法就是获取当前时间到1970年1月1日0时0分0秒(西方时间)的毫秒数. public class Test6 { ...
- MySQL计算相邻两行某列差值的方法
简述 博主最近因工作任务缠身,都无暇顾及到我的这片自留地了.前段时间稍有空闲,花了较多的精力学习<啊哈算法>,从中学习到很多之前没有太注重的内容,收益颇丰.但是这些算法题目还没有看完,等后 ...
- 3.live555源码分析----延时队列
live555本身是一个单进程.单线程的服务器,但是它能够完美的让多个客户端同时连接,除了使用select并发编程以外,延时队列是很重要的手段. 当连接一个客户端,进行视频帧传输的时候,是不能持续进行 ...
- glfw之hello world
mac上用cocoa做imshow,资料似乎不好找,即便找到也需要和OC混编,而不是纯C.这不够纯粹.考虑用opengl做通用的.跨平台的imshow.先入门一下opengl,从glfw官方例子入手. ...
- 【Docker】iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport 8480 -j DNAT --to-destination 172.17.0.2:80 ! -i docker0: iptables: No chain/target/match by that name
启动容器的时候,出现如下错误: Error response / --dport -j DNAT --to-destination ! -i docker0: iptables: No chain/t ...
- python的推导式 —— 列表推导式、集合和字典推导式
python的推导式是用于快速处理数据的方法. 主要有:列表推导式.集合推导式和字典推导式 import time import numpy as np 列表推导式: 1. 速度快 t1 = time ...
- 【原创】STM32低功耗模式及中断唤醒(基于BMI160及RTC)的研究
预研目标 六轴静止时,终端进入低功耗模式:六轴震动时,终端正常工作模式,从而极大减少非工作时的电流消耗. 解决方案 机器静止时,依据六轴算法,CPU进入休眠(停止)模式:机器工作时,触发六轴中断唤醒C ...