讲给Android程序员看的前端教程(17)——伪元素
2017-12-01 09:33
796 查看
自定义View系列教程00–推翻自己和过往,重学自定义View
自定义View系列教程01–常用工具介绍
自定义View系列教程02–onMeasure源码详尽分析
自定义View系列教程03–onLayout源码详尽分析
自定义View系列教程04–Draw源码分析及其实践
自定义View系列教程05–示例分析
自定义View系列教程06–详解View的Touch事件处理
自定义View系列教程07–详解ViewGroup分发Touch事件
自定义View系列教程08–滑动冲突的产生及其处理
探索Android软键盘的疑难杂症
深入探讨Android异步精髓Handler
详解Android主流框架不可或缺的基石
站在源码的肩膀上全解Scroller工作机制
Android多分辨率适配框架(1)— 核心基础
Android多分辨率适配框架(2)— 原理剖析
Android多分辨率适配框架(3)— 使用指南
作者博客地址:http://blog.csdn.net/lfdfhl
本文视频教程:http://www.stay4it.com/my/course/37
在该示例中利用:first-letter为p标签中的第一个字设置了样式,效果图如下所示:
在该示例中通过:first-line为p标签中的第一行文本设置了特殊样式,效果图如下所示:
在该示例中利用:before在h1标签之前插入图片,效果图如下所示:
自定义View系列教程01–常用工具介绍
自定义View系列教程02–onMeasure源码详尽分析
自定义View系列教程03–onLayout源码详尽分析
自定义View系列教程04–Draw源码分析及其实践
自定义View系列教程05–示例分析
自定义View系列教程06–详解View的Touch事件处理
自定义View系列教程07–详解ViewGroup分发Touch事件
自定义View系列教程08–滑动冲突的产生及其处理
探索Android软键盘的疑难杂症
深入探讨Android异步精髓Handler
详解Android主流框架不可或缺的基石
站在源码的肩膀上全解Scroller工作机制
Android多分辨率适配框架(1)— 核心基础
Android多分辨率适配框架(2)— 原理剖析
Android多分辨率适配框架(3)— 使用指南
版权声明
本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl
本文视频教程:http://www.stay4it.com/my/course/37
伪元素简介
在CSS中,伪元素用于将特殊的效果添加到某些选择器。在此介绍几个CSS中常用的伪元素。:first-letter
:first-letter用于向文本中的第一个字设置特殊样式,请看如下示例:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素</title> <style type="text/css"> p:first-letter{ color: red; font-size: 40px; } </style> </head> <body> <p>谷哥的小弟</p> </body> </html>
在该示例中利用:first-letter为p标签中的第一个字设置了样式,效果图如下所示:
:first-line
:first-line用于向文本的首行设置特殊样式,请看如下示例:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素</title> <style type="text/css"> p:first-line{ color: red; font-size: 40px; font-weight: bold; } </style> </head> <body> <p>本文作者<br>谷哥的小弟</p> </body> </html>
在该示例中通过:first-line为p标签中的第一行文本设置了特殊样式,效果图如下所示:
:before
:before用于在元素的内容之前插入新内容,请看如下示例:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素</title> <style type="text/css"> h1:before{ content: url(girl.jpg); } </style> </head> <body> <h1>我爱我的女朋友</h1> </body> </html>
在该示例中利用:before在h1标签之前插入图片,效果图如下所示:
:after
:after用于在元素的内容之后插入新内容,类似于:before;不再赘述。相关文章推荐
- 讲给Android程序员看的前端教程(16)——伪类
- 讲给Android程序员看的前端教程(08)——HTML5标签(7)
- 讲给Android程序员看的前端教程(12)——CSS选择器(2)
- 讲给Android程序员看的前端教程(23)——JavaScript简介
- 讲给Android程序员看的前端教程(01)——HTML5入门
- 讲给Android程序员看的前端教程(24)——变量
- 讲给Android程序员看的前端教程(02)——HTML5标签(1)
- 讲给Android程序员看的前端教程(18)——盒子模型
- 讲给Android程序员看的前端教程(25)——基本数据类型
- 讲给Android程序员看的前端教程(38)——Web Storage
- 讲给Android程序员看的前端教程(09)——HTML5标签(8)
- 讲给Android程序员看的前端教程(13)——CSS选择器(3)
- 讲给Android程序员看的前端教程(03)——HTML5标签(2)
- 讲给Android程序员看的前端教程(19)——display属性
- 讲给Android程序员看的前端教程(26)——数组
- 讲给Android程序员看的前端教程(14)——CSS选择器(4)
- 讲给Android程序员看的前端教程(27)——运算符
- 讲给Android程序员看的前端教程(33)——Window
- 讲给Android程序员看的前端教程(39)——Web Woker
- 讲给Android程序员看的前端教程(04)——HTML5标签(3)