设置第一个字母字体变大并且所有字母大小写 及下划线

 以上是目标样式,第一个字母大概24px,后面的大概19px,并且都是大写。

如果单纯的给A和T两个字母添加标签再设置字体大小的话,那么设置的underlin;会有所差别,效果如下:

很明显下划线不在一条水平线上。为了解决这个问题可以有两种方法;

第一种:为<p>标签设置border-bottom,可以说设置颜色等属性。

第二种:HTML标签

<p class="about">about</p>

<p class="about">technologe</p>

css样式:

.about{font-size:24px;

          color:#000;

          font-family:"微软雅黑";

          text-decoration:underline;

           text-transform:capitalize;/*关键样式*/

           font-variant:small-caps;/*关键样式*/

text-transform属性:

 这个属性会改变元素中的字母大小写,不管原文档中的字母大小写。如值为capitalize,则要对某些字母大写,但并没有明确定义什么字母大写。

font-variant属性:

设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换成大写,但是所有使用小型的大写字体的字母与其余文本相比,其字体更小。(意味着已经使用大写字母的文本字体会更大)。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

动态图表10|可选折线图(复选框)

今天要跟大家分享的是动态图表10——可选折线图(复选框)。 本篇推送主要向大家介绍如何使用复选框控制多维图表。涉及到的核心技巧主要有:复选框;if+or函数;图...

3014
来自专栏小狼的世界

CSS3 Transition介绍

CSS3提供了一种全新的方式来定义CSS属性改变时的过渡效果,通常在:hover、:focus的条件下触发。过去,为了实现这种平滑的过渡效果,我们需要借助于Fl...

792
来自专栏HTML5学堂

JS设置标签的内容和样式

上一期堡堡给大家分享了操作符与数据类型转换。掌握JS操作符的目的是为了能够灵活的操作变量,以便完成JS的各种逻辑处理;掌握数据类型转换可以让我们避免一些不该发生...

4709
来自专栏xingoo, 一个梦想做发明家的程序员

(递归版)合并排序

递归版的合并排序,时间复杂度为O(nlogn),空间复杂度为O(n+logn); 算法思想: 利用分而自治的思想,把排序分成两块,每块内部排序,再进行一次遍历...

20010
来自专栏编程思想之路

Android6.0源码分析之View(二)--measure Android6.0源码分析之View(一)

接着上一篇 Android6.0源码分析之View(一) 紧接着来学习view的measure,(注,开始写博客之后,很明显我的学习效率高多了,研究了俩星期硬是...

2609
来自专栏向治洪

android之View绘制

Android系统的视图结构的设计也采用了组合模式,即View作为所有图形的基类,Viewgroup对View继承扩展为视图容器类,由此就得到了视图部分的基本...

1579
来自专栏HTML5学堂

CSS 1.0~3.0选择器(下)

HTML5学堂:对于CSS选择器我们熟悉了CSS1.0~CSS2.0的使用,我们那么有些选择器还是无法简单获取某元素,对于CSS3的选择器的产生,让我们更加方便...

3073
来自专栏wblearn

Java小程序祝国庆快乐祝大家国庆节快乐

上面是用java的JFrame为基础实现的效果,下面用面向对象的思考分析并实现此效果:

921
来自专栏Android干货

安卓开发_浅谈Android动画(四)

1886
来自专栏hbbliyong

ES6+ 开发 React 组件

在这里简要的说一下这些语言新特性对 React 应用的开发有什么影响,这些 ES6+ 特性使得 React 开发更简单更有趣。 类 迄今为止,最能体现我们使用 ...

3568

扫码关注云+社区