css 如何实现 首字母有下划线
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 如何实现 首字母有下划线相关的知识，希望对你有一定的参考价值。
比如我有 abc def hij , 如何用css 实现a d h 下面有个下划线啊
用过DIV+CSS的人都知道，虽然这种布局没有用传统的table直观，但用习惯了就会感觉出DIV+CSS的优越。对于seo优化，div+css也有了明显的优势，实际应用中我搜索了DIV+CSS的常用定义项，并对其参数作了归纳和说明，与喜欢DIV+CSS的朋友共享。通用类overflow:hidden;自动隐藏超出的内容，防止撑开层和表格的范围
!important
指定样式规则的应用优先权：
文字类
color: #FF0000;文字颜色
font-family: "Arial", "Helvetica", "sans-serif";字体
font-size: 9px;字号
text-align：center; 居中(left为居左,right为居右)
line-height：28px；行高(可用150%值)
font-style: italic;斜体(oblique偏斜体)
font-weight: bold;服务粗体(bolder特粗，400粗值)
font-variant: small-caps;小型大写字母
text-transform: capitalize;首字母大写
text-decoration: underline overline line-through blink;下划线，上划线，删除线，闪烁
text-indent: 2em;文字缩进2个字体高(或15px,即15象素)
背景类
background-attachment: fixed;固定位置(scroll滚动)
background: #0066CC;背景色(transparent透明)
background: url(/image/more2.gif);背景图片
background-repeat: repeat;重复(repeat-x横向重复，repeat-y纵向重复)
background-position: center top;水平居中 垂直顶部(left center水平居左 垂直居中)
background：url(/image/dtbg.gif) #FEFEFE no-repeat right bottom(2px 5px); 背景图片、背景颜色、图片不重复、背景图片从右下角开始(图片距左2px距上5px)
框架位置类
clear: both;两边拒排浮动对象(left左边拒排浮动对象,right右边拒排浮动对象)
float: left;浮动对象位置居左(right, 最新列车时刻表位置居右)
position：relative; 相对位置，一般在上级框架中设定 极品时刻表
position：absolute; 绝对位置，配合上级框架的设定对本级框架设定，设置top、left值
top：5px; 页面绝对或相对于框架顶端绝对位置
left：10px; 页面绝对或相对于框架左边绝对位置
width: 100px;宽100px
height: 200px;高200px(可用auto和100%值)
margin 上海火车时刻表：10px 20px 10px 20px；
上右下左页边距(值相同可省写margin:10px)
单独指定用margin-top：10px; (margin-right、margin-bottom、margin-left)
padding：20px 10px 10px 20p；
上右下左内容离边框的距离(值相同可省写padding:10px)
单独指定用padding-top：10px;(padding-right、padding-bottompadding-left)
border：#ccc 1px solid 成都列车时刻表；
四边框颜色、线宽、实线(dotted虚线,dashed点画线,double双线,ridge脊线)
单独指定用border-top：#ccc 1px solid；border-right：#ccc 1px solid
等等
项目列表类 list-style-position: outside;位置为外(inside内) list-style-image: url(/yh/image/more04.gif);项目符号图像 临客时刻表 list-style-type: disc;项目符号为圆点(circle圆圈,square方块)
扩展类 cursor: e-resize;鼠标样式 filter: Blur(Add=4, Direction=8, Strength=4);滤镜 filter: FlipH;横向翻转(FlipV gprs流量费纵向翻转)
单独设置链接
#bottool a:linkcolor:#fff;未访问的颜色
#bottool a:visitedcolor:#fff;已访问的颜色 流量软件
#bottool a:hovercolor:#ff0;鼠标在链接上
这么多定义项, 其实常用也就下面几类:指定宽高值width,height;指定背景:background;指定位置:float,特殊的用position结合 top、left来定位；设定框架边距：margin；设定容器内框距：padding几项。其中在我的样式定义中取消了overflow、 clear、!important程序的定义项。
1、取消overflow:hidden是因为经反复实验，该定义项只能隐藏超出容器高度的内容而不能隐藏超出宽度的内容。而我需要的就是要能自动隐藏超出容器宽度的内容，有时反而需要容器高度能随内容的多少而撑开容器高度。
2、取消clear定义项是因为在实际应用中很真正达到理解的容器与容器的排列关系，框架或容器的位置还是用float、position、top、left等精确定位。
3、!important
指定样式规则的应用优先权。这个主要用于在IE和其它的浏览器要区别显示出的效果，我的网站就是想固定显示效果，所以不存在什么优先权。
我对DIV+CSS也还在研究之中，有不当之处请大家跟贴指正，有完善的地方也请跟贴完善。我认为用DIV+CSS来布局网站，最重要的是布局思路问题，不同的设计方案，设计的繁简大不一样。我着重框架或容器的通用性，设计出几种容器的样式，就象FS4中的标签样式，然后在需要的地方调用这个样式就行了，以达到通用性而不是专用性。、
希望 可以帮到你 参考技术A 只能在每个字母前分别给样式。 参考技术B 利用first-letter伪类可以实现。
e.g
/* html code */
<p class="article">My first attempt</p>
/* css code */
.article:first-letter
text-decoration:underline;
可以参考这里：http://www.w3school.com.cn/tiy/t.asp?f=csse_firstletter
你可以针对每个<span>做类似定义。 参考技术C <html>
<head>
<style type="text/css">
body font-size:12px;font-family:"宋体"
.box
border:1px solid #ddd;
width:200px;
height:auto;
.title
border-bottom:1px solid #ddd;
height:30px;
overflow:hidden;
background:#eee;
line-height:30px;
font-weight:bold;
padding-left:5px
.list list-style:none;margin:10px 5px;padding:0;
.list li line-height:25px;background:url(每一行的背景小图标路径) left 2px no-repeat;padding-left:12px;border-bottom:1px dashed #ddd
.list li a color:#666;text-decoration:none;
.list li a:hover color:#000
</style>
</head>
<body>
<div class="box">
<div class="title">title</div>
<ul class="list">
<li><a href="">天润发展设备之</a></li>
<li><a href="">天润发展设备之</a></li>
<li><a href="">天润发展设备之</a></li>
<li><a href="">天润发展设备之</a></li>
<li><a href="">天润发展设备之</a></li>
</ul>
</div>
</body>
</html> 参考技术D <p><span>a</span>bc <span>d</span>ef <span>h</span>ij</p>
span:text-decoration:underline;
少动脑筋的办法
首字母字号变大而不影响其下划线粗细的方法
目的样式：全部大写字母，带下划线，第一个字母24px，其余字母略小，约19px。
Html标签：
<p class="about">about</p> <p class="about">technologe</p>
css样式:
.about{
font-size: 24px;
color: #000;
font-family: "微软雅黑";
line-height: 40px;
text-decoration: underline;
font-variant: small-caps; /*关键样式*/
text-transform: capitalize; /*关键样式*/
}text-transform 属性
这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。如果值为 capitalize，则要对某些字母大写，但是并没有明确定义如何确定哪些字母要大写，这取决于用户代理如何识别出各个“词”。
| 值 | 描述 |
|---|---|
| none | 默认。定义带有小写字母和大写字母的标准的文本。 |
| capitalize | 文本中的每个单词以大写字母开头。 |
| uppercase | 定义仅有大写字母。 |
| lowercase | 定义无大写字母，仅有小写字母。 |
| inherit | 规定应该从父元素继承 text-transform 属性的值。 |
兼容性：
浏览器兼容：IE、Firefox、Chrome、Safari、Opera
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。所有浏览器都支持 text-transform 属性。
font-variant 属性
设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。(意味着已经使用大写字母的文本字体会更大)。
| 值 | 描述 |
|---|---|
| normal | 默认值。浏览器会显示一个标准的字体。 |
| small-caps | 浏览器会显示小型大写字母的字体。 |
| inherit | 规定应该从父元素继承 font-variant 属性的值。 |
兼容性:
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
所有主流浏览器都支持 font-variant 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
以上是关于css 如何实现 首字母有下划线的主要内容，如果未能解决你的问题，请参考以下文章