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

 以上是目标样式,第一个字母大概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 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

linq to sql取出随机记录/多表查询/将查询出的结果生成xml

在手写sql的年代,如果想从sqlserver数据库随机取几条数据,可以利用order by NewId()轻松实现,要实现多表查询也可以用select * f...

2196
来自专栏一个会写诗的程序员的博客

java.base.jmod

/Library/Java/JavaVirtualMachines/jdk-9.jdk/Contents/Home/jmods$ jmod list java....

1112
来自专栏Petrichor的专栏

Dataset 列表:机器学习研究

In computer vision, face images have been used extensively to develop face recog...

1471
来自专栏Pulsar-V

Save Camera Document

#pragma once #include "HCCamera.h" #include <time.h> #include <cstdio> #incl...

2828
来自专栏WOLFRAM

向日葵中的数学之美

1823
来自专栏MelonTeam专栏

Bitmap 源码阅读笔记

导语: Android 系统上的图片的处理,跟Bitmap 这个类脱不了关系,我们有必要去深入阅读里面的源码,以便在工作中能更好的处理Bitmap相关的问题...

2478
来自专栏搞前端的李蚊子

Html5模拟通讯录人员排序(sen.js)

// JavaScript Document  var PY_Json_Str = ""; var PY_Str_1 = ""; var PY_Str_...

5886
来自专栏专知

2018年SCI期刊最新影响因子排行,最高244,人工智能TPAMI9.455

2018年6月26日,最新的SCI影响因子正式发布,涵盖1万2千篇期刊。CA-Cancer J Clin 依然拔得头筹,其影响因子今年再创新高,达244.585...

1272
来自专栏增长技术

App Guide相关

##TourGuide https://github.com/worker8/TourGuide

702
来自专栏一个会写诗的程序员的博客

java.sql.SQLException: connection holder is null

java.sql.SQLException: connection holder is null

1341

扫码关注云+社区