CSS3标签

Css3概述

从2010年开始,HTML5与CSS3就一直是互联网技术中最受关注的两个话题。从前端技术的角度可以把互联网的发展分为三个阶段：第一阶段是web1.0以内容为主的网络，前端主流技术是HTML和CSS，第二阶段是web2.0的Ajax应用，热门技术是javascrip/DOM/异步数据请求。第三阶段是即将迎来的HTML5+CSS3时代，这两者相辅相成，使互联网又进入一个崭新的时代。

什么是CSS

非常简单，CSS代表“Casading Style Sheets”，就是样式表，是一种替代并为网站添加样式的标记性语言。现在所使用的CSS基本是在1998年推出的CSS2的基础上发展而来的。10年前在internet开始普及的时候，就能够使用样式表对网页进行视觉效果的统一编辑，但是在10年间CSS基本没有什么太大的变化，一直到2010年终于推出了一个全新的版本---CSS3 。CSS3只是表示下一代CSS，3只是版本号，css3在css2.1版本上加入了一些新特性。简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影等。CSS3不仅能简化前端开发工作人员的设计过程，还能加快页面载入速度。

CSS3 的一些新特性

  • 圆角效果
  • 图形化边界
  • 块阴影与文字阴影
  • 使用 RGBA 实现透明效果
  • 渐变效果
  • 使用 @Font-Face 实现定制字体
  • 多背景图
  • 文字或图像的变形处理（旋转、缩放、倾斜、移动）
  • 多栏布局
  • 媒体查询

浏览器支持

  • CSS3浏览器支持状况

  • Firefox 3.05+…部分支持

  • Google Chrome 4+…较好支持

  • Internet Explorer IE9+部分支持

  • Opera 10+…部分支持

  • Safari (3.2.1+ windows… 较好支持)。

CSS选择器

CSS选择器是个难以置信地强大的工具：它们允许我们在标签中指定特定的HTML元素而不必使用多余的 class、 ID 或JavaScripts。而且它们中的大部分并不是CSS3中新添加的，而是没有被得到应有的广泛应用。如果你在尝试实现一个干净的、轻量级的标签以及结构与表现更好的分离，高级选择器是非常有用的。它们可以减少在标签中的class和ID的数量并让设计师更方便的维护样式表。

属性选择器

  • [att=“value”] 匹配属性等于某特定值的元素
  • [att^="value"] 匹配属性包含以特定的值开头的元素
  • [att$="value"] 匹配属性包含以特定的值结尾的元素
  • [att*=“value”] 匹配属性包含含有特定的值的元素

伪类选择器

伪类选择器是css中已经定义好的选择器，不能随便起名常用的伪类选择器是使用在 a元素上的几种，如：a:link,a:visited,a:hover,a:active.

伪元素

伪元素选择器不是针对真正的元素使用的选择器，而是针对css中已定义好的伪元素 使用的选择器，css中有如下四种 first-line，first-letter，before，after 例如：p:first-line{color:red;},p:after{content：”内容”}

效果：

结构性伪类选择器

在css3中引入的结构行伪类选择器的共同特性是允许开发者根据文档树中的结构来指 定元素样式。

:root :not :empty :trget

:nth-child(n) :nth-last-child(n)

:only-child

:first-child :last-child

5.nth-child(n)和nth-last-child(n)

第一种： 简单数字序号写法（如图1）

:nth-child(number)：直接匹配第number个元素。参数number必须为大于0的整数。例如：

li:nth-child(3){background:orange;} /*把第3个LI的背景设为橙色*/

:nth-last-child(n)与上个选择器的思想同样，但是从后面匹配元素

1. root
 :root 伪类选择页面的根元素。十有八九根节点是 <html> 元素，例如：
 :root { }

2. not
 :not 想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素。例如：
 body *:not(h1) { } 
3.empty                                                                       
 :empty 当元素内容为空时被选中。例如：                     
 :empty { }                            
 <table>
 <tr><td>a</td><td>b</td></tr>
 <tr><td>c</td><td></td></tr>
 </table>

4.target
:target目标 当跳转到目标是进行改变
  例如:   :target h3{color:pink}

5.nth-child(n)和nth-last-child(n)
第一种： 简单数字序号写法
 :nth-child(number)：直接匹配第number个元素。参数number必须为大于0的整数。例如：
 li:nth-child(3){background:orange;} /*把第3个LI的背景设为橙色*/
 :nth-last-child(n)与上个选择器的思想同样，但是从后面匹配元素

第二种：倍数写法（如图2）

:nth-child(an):匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。

例子：

li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/

第三种：倍数分组匹配（如图3）

li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/

第四种：奇偶匹配

:nth-child(odd) 与 :nth-child(even) 分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)(2n)结果一样。

第五种 nth-of-tyoe（）

为了解决在同一级别出现其他标签导致找不到想要的元素。

6.last-child 用于选择父元素下的最后一个子节点。例如： li { border-bottom: 1px solid #ccc; } li:last-child { border-bottom: none; }

7.first-child 用法同last-child相同，用于选择父元素下的第一个子节

CSS3渐变效果

background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue))

渐变的类型? (linear) 
渐变起头的X Y 轴坐标(0 0 – 或者left-top) 
渐变结束的X Y 轴坐标(0 100% 或者left-bottom) 
起头的颜色? (from(red)) 
竣事的颜色? (to(blue))

background:-webkit-linear-gradient(top, red, blue);

请注重我们将渐变的类型——linear——放到了属性前缀中了 
渐变从哪里起头 ? (top – 我们也可以使费用数，好比 -45deg) 
起头的颜色? (red) 
竣事的颜色? (blue)

简单文字阴影：

CSS标签详解的更多相关文章

  1. CSS选择器详解（伪类） 转 http://blog.csdn.net/Panda_m/article/details/50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  2. html标签详解

    html标签详解   <!DOCTYPE> 标签 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE ...

  3. html标签详解（2）

    http标签详解 声明 1:这里的文字都是我从我自己csdn账号拷贝过来,是本人学习总结的结晶,所以请尊重本作品.2:如要要转载本文章,则要说明文字的出处.3:如有哪里不对欢迎指出. 在上一篇文章中主 ...

  4. html常用标签详解

    html常用标签详解 一.总结 一句话总结: 这些资料没必要自己总结,可以直接网上找,简单方便,再根据需求改一下 二.HTML常用标签详解 转自或参考:HTML常用标签详解https://blog.c ...

  5. Meta标签详解(HTML JAVASCRIPT)

    Meta标签详解,在网上转的,希望对大家有用 您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中 ...

  6. 网页设计：Meta标签详解

    很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...

  7. meta标签详解(meta标签的作用)///////////////////////////转

    meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧   ...

  8. css filter详解

    css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...

  9. 引用 struts2标签详解 - wo的的日志 - 网易博客

    引用 元元 的 struts2标签详解   引用 COLD 的 struts2标签详解 要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部加入以下的代码: <%@t ...

随机推荐

  1. 如何处理Win10电脑黑屏后出现代码0xc0000225的错误？

    有些Win10系统的用户反映电脑在开机的时候突然变成黑屏,还出现提示0xc0000225的错误代码,不知道该怎么去解决.一般来说,遇到这种情况一般是系统的注册表出现了问题.下面就为大家分享一下相应的解 ...

  2. laravel5.8 IoC 容器

    网上 对容器的解释有很多,这里只是记录,搬运! 1.简单理解: 2019-10-10 11:24:09 解析 lavarel 容器 IoC 容器 作用 就是 “解耦” .“依赖注入(DI) IoC 容 ...

  3. SQL语句复习【专题八】

    SQL语句复习[专题八] 序列 Sequence.数据库对象是 oracle 专有的.作用:可以将某一列的值使用序列,来实现自动增长的功能.访问序列的值.[序列有两个属性 nextval currva ...

  4. servlel出现404问题★ 出现不自动映射 设置XML的问题时候

    ★ 出现不自动映射 设置XML的问题时候 可能是 web.xml配置可能是复制的  错误原因来自于name的匹配 <display-name>webdemo1</display-na ...

  5. C# .NET 微信开发-------当微信服务器推送消息时如何接收处理

    最近一直在看微信,整整一个月了,看到现在说实话还有很多没看的,从前两周一点看不懂到现在单个功能的一步步实现,不知道这样的速度是否太慢了. 不过现在往下看还是有思路了,目前整个文档完成学习只有1/3左右 ...

  6. 牛客小白月赛12 I 华华和月月逛公园 （tarjian 求桥）

    链接:https://ac.nowcoder.com/acm/contest/392/I 来源:牛客网 华华和月月逛公园 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K, ...

  7. 博弈论BOSS

    基础博弈的小结:http://blog.csdn.net/acm_cxlove/article/details/7854530 经典翻硬币游戏小结:http://blog.csdn.net/acm_c ...

  8. C - Nuske vs Phantom Thnook

    题意:n*m矩阵,n,m<=2e3,矩阵中的1能走到相邻4个1上,0代表障碍,若两个1联通 则只有一条路径 q个询问,q<=2e5,每次询问一个子矩阵中有多少个连通分量? 同一个连通分量中 ...

  9. sql 180. 连续出现的数字

    编写一个 SQL 查询,查找所有至少连续出现三次的数字. +----+-----+| Id | Num |+----+-----+| 1 | 1 || 2 | 1 || 3 | 1 || 4 | 2 ...

  10. jpa @Query()参数设置，:冒号方式、？NO.问号方式、实体类对象参数设置

    一.service层事务(update/delete) @Transactional(rollbackFor = Exception.class) 二.@Query()参数设置 ?x  和:XX不能混 ...