css段落首字母下沉
摘要：
段落首字母放大是指放大段落开头的字母或者汉字，主要使用了css的first-letter伪类选择器。
单行放大：
在第一行内放大，效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background-color: #FFFFFF;
color: #595959;
}
.contain {
width: 150px;
}
.contain p {
font: 80%/1.6 Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.contain p:first-letter {
font-size: 2em;
padding: 0.1em;
color: #000000;
vertical-align: middle;
}
.contain p:first-line {
color: red;
}
.contain p:first-child:first-letter {
color: red;
}
.contain p:first-child:first-line {
color: inherit;
}
</style>
</head>
<body>
<div class="contain">
<p>This is a test article. This is a test article.</p>
<p>This is a test article. This is a test article.</p>
<p>这是一个测试</p>
</div>
</body>
</html>
注意：first-letter支持IE7+，first-line支持IE8+
多行放大：
效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title> </head>
<body>
<style>
* {
margin:0;
padding:0;
}
body {
font-size:12px;
font-family: Tahoma, Geneva, sans-serif;
padding:200px;
}
p {
width:150px;
color:#000;
font-size:1em;
margin-bottom: 20px;
}
p:first-letter{
float: left;
font-size:2.5em;
padding-right:5px;
text-transform:uppercase;
}
p:first-line{
color:#f00;
}
</style>
<p>This is a test article. This is a test article.This is a test article. This is a test article.This is a test article. This is a test article.</p>
<p>这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。</p>
</body>
</html>
css段落首字母下沉的更多相关文章
- css系列-段落首字符下沉、缩进及特殊显示
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS： 首字母字体变大时下划线不对齐的解决方法
昨天在写2017年百度ife任务六的时候遇到了一个排版问题,需要首字母字体变大的同时,下划线对齐. 首先使用了 ::first-letter伪元素的选择器,将字体变大后,发现下划线没法对齐,代码如下: ...
- css first-letter实现首字(字母)下沉效果
css 首字下沉效果原理 首字下沉主要使用到css的first-letter伪元素,然后配合使用font-size和float来设置文字的样式即可实现. first-letter选择器选取指定元素文本 ...
- CSS中使用text-transform实现首字母大写
CSS中首字母大写怎么实现?日常生活中需求方对英文的要求比较多,有的时候需要让英文单词或拼音首个字母大写;有的时候需要让全文中英文单词全大写或小写.这时候我们就需要text-transform属性了. ...
- div+CSS实现段落首行缩进两个字符
段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...
- CSS实现英文或拼音单词首字母大写
CSS实现英文或拼音单词首字母大写,只需要在css样式中加入: text-transform: capitalize 即可. 测试代码如下: <!doctype html> <htm ...
- Css中如何使英文和拼音变成全大写、全小写和首字母大写？
想要实现英文和中文拼音变成全大写.全小写和首个字母大写,需要用到 css中text-transform样式属性,接下来介绍一下 1.text-transform的值 1)Capitalize:英文拼音 ...
- Div+Css实现段落首行缩进两个字符（text-indent标签）
段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...
- 小tips：JS/CSS实现字符串单词首字母大写
css实现: text-transform:capitalize; JS代码一: String.prototype.firstUpperCase = function(){ return this.r ...
随机推荐
- 键盘 Input子系统
应用层测试代码 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <li ...
- Java编程的逻辑 (47) - 堆和PriorityQueue的应用
本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...
- boot cd_rom struct
资料: 1.introduction_to_iso9660.pdf 2.boot-cdrom.pdf Normal ISO9600:offset: 16*2048[0x8000] The Primar ...
- rsa.FromXmlString 系统找不到指定的文件
rsa做加密解密的时候,发布到IIS7 Windows2008上出现异常,提示rsa.FromXmlString找不到指定的文件. 原因是系统安全性问题,做了变更,修改为如下代码即可: System. ...
- 【javascript】js 检验密码强度
最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高).今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求. html 代码如下: <!DOCTYP ...
- js 获取地址栏最后一个文件名称
var JsRequest={ //这就是一个静态类,类里面有2个静态方法 //方法一:获取url的文件名 例如 index.html getUrlname:function(url){ //假如传进 ...
- Java线程状态及 wait、sleep、join、interrupt、yield等的区别
Java中的线程状态(详见Java线程状态及转换-MarchOn): wait:Object类的实例方法,释放CPU执行权,进入等待状态,直到 被中断.被拥有该对象锁的线程唤醒(notify或not ...
- Sword pcre库函数学习二
9.pcre_free_substring_list 原型: #include <pcre.h> void pcre_free_substring_list(const char **st ...
- 机器学习 demo分西瓜
周老师的书,对神经网络写了一个小的Demo 是最简单的神经网络,只有一层的隐藏层. 这次练习依旧是对西瓜的好坏进行预测. 主要分了以下几个步骤 1.数据预处理 对西瓜的不同特性进行数学编码表示(0~1 ...
- 自然语言交流系统 phxnet团队 创新实训 项目博客 （九）
项目技术总结: VoiceToText的具体使用方法: 语音转文本部分是调用的科大讯飞的在线语音,它的激发方式是按键,通过按钮触发开启安卓设备的录音,此部分需要在源码中写入关于安卓权限的要求,来调用安 ...