1.文字样式：font-family

字体：sans-serif（字体醒目）；serif（笔画的开始和结束有额外的修饰部分，易读性较强）

*页面设计最好有多个备选字体

2.文字大小：font-size

分绝对大小和相对大小，采用相对大小px,%,em（%，em相对于父标记而言，没有设定父标记则用浏览器默认值）。

不同浏览器采用相对字体大小。

3.字体颜色：color

span标记，可以针对某些具体字体来做改变，行内元素

4.文字粗细：font-weight

5.文字斜体：font-style

normal,italic,oblique

6.上下划线，删除线：text-decoration

blink闪烁，ie不支持，ff可以

7.英文字母大小写：text-transform

capitalize首字母大写；uppercase大写；lowercase小写

8.段落对齐方式

水平：text-align；垂直：vertical-align,对于文字本身而言，该属性对于块级元素不起作用，对于表格有用。

9.行间距：line-height 字间距：letter-spacing

10.首字放大：float和span，通过span标签对首字进行特殊的样式控制，然后float:left突出显示

伪类：first-letter，也可以实现类似首字放大，但该属性的文字对一些其他的CSS样式支持的不好，不推荐使用。

例子：百度搜索内容显示

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>百度搜索页面</title>

 <style type="text/css">

 body{

     margin:0px;

     padding:0px;}

 p{

     margin:0px;

     font-family:Arial, Helvetica, sans-serif;}

 p.title{

     padding-bottom:0px;

     font-size:16px;}

 p.content{

     padding-top:3px;

     font-size:13px;

     line-height:18px;}

 p.link{

     font-size:13px;

     padding-bottom:25px;

     color:#008000;}

 span.search{

     color:#c60a00;}

 span.quick{

     color:#666666;

     text-decoration:underline;}

 p.title span.search{

     text-decoration:underline;}

 </style>

 </head>

 <body>

  <p class="title"><a href="#">中国<span class="search">春节</span>网欢迎您</a></p>

  <p class="content">在中国传统的节日中,最热闹。最受人们重视的节日是<span class="search">春节</span>。<span class="search">春节</span>,是农历的元旦,是... 送压岁钱是潮汕春节习俗中重要的一项,长辈要分钱给后辈,能挣钱的后辈也要送...</p>

  <p class="link">www.chunjie.net.cn 2012-11-08  - <span class="quick">百度快照</span></p>

 </body>

 </html>

Css文字效果的更多相关文章

  1. 精通CSS+DIV网页样式与布局--CSS文字效果

    上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定 ...

  2. css文字效果（文字剪贴蒙版，text-shodow的应用，文字排版等…）

    .katex { display: inline-block; text-align: initial; } .katex { font-family: Consolas, Inconsolata, ...

  3. CSS Gradient文字效果

    你想创建的标题没有渲染和Photoshop每个标题吗?这里是一个简单的CSS技巧向您展示如何创建渐变文字效果,PNG图像(纯CSS,没有Javascript或Flash).你所需要的是一个空的< ...

  4. css鼠标滑过出现文字效果

    模仿淘宝上鼠标移动到商品图片时,出现的文字效果. 1.效果图                                鼠标移动到粉红色的区域,则出现黄色部分. 2.代码 <!DOCTYPE ...

  5. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  6. CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？

    DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

  7. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

  8. CSS文本效果

    前面的话 本文将详细介绍CSS文本效果 凸版印刷效果 这种效果尤其适用于中等亮度背景配上深色文字的场景:但它也可用于深色底.浅色字的场景,只要文字不是黑色并且背景不是纯黑或纯白就行 [浅色背景深色文本 ...

  9. CSS文字垂直居中的一些问题

    说到CSS文字垂直居中,很多初学者都喜欢用调整行高等于div高度的方式来达到效果, div { height:30px; line-height:30px; } 但其实这么做会遇到一个问题:多行文本溢 ...

随机推荐

  1. oracle口令文件在windows和linux系统下的命名和位置

      分类: Oracle 1.windows系统下 oracle口令文件在:$ORACLE_HOME/database目录下: 命名规则为:PWD$SID.ora   2.linux系统下 oracl ...

  2. 递推，求至少连续放置三个U的危险组合

    UVA580-Critical Mass 题意 有两种方块,L和U,有至少三个连续的U称为危险组合,问有多少个危险组合 solution: 至少这个概念比较难求 ,所以转化为(1ll<<n ...

  3. token的解码及 判断值不为空的方法

    token 的解码要使用插件:jwt-decode 判断值不为空的方法: function isEmpty(value){ return ( value === undefined || value ...

  4. opencv配置运行问题

    opencv是图像处理常用的一个库文件,对于一些新手来说,配置完后运行,总会有这样或者那样的错误,会挫伤其学习积极性,这里将常见的几种错误列举出来,供其参考和使用. 方法/步骤第一种错误叫no suc ...

  5. 修改vscode终端样式

    在设置中查找workbench,然后编辑setting.json: "terminal.integrated.cursorBlinking": true, "termin ...

  6. hibernate一对一映射

    package loaderman.c_one2one; // 身份证 public class IdCard { // 身份证号(主键) private String cardNum;// 对象唯一 ...

  7. python 通过 实例方法 名字的字符串调用方法

    方式1 - 反射 hasattr 方法 判断当前实例中是否有着字符串能映射到的属性或者方法, 一般会在  getattr 之前作为判断防止报错 getattr 方法 获取到当前实例中传入字符串映射到的 ...

  8. c语言实行泛型hashmap

    代码出处:A simple string hashmap in C  https://github.com/petewarden/c_hashmap main.c (main2是官方源代码,main是 ...

  9. A股委托类型

    上海交易所于2006年8月7日启用了两种类型的市价委托,分别为:“最优五档即时成交剩余撤销”.“最优五档即时成交剩余转限价”. 深圳证券交易所启用了“对手方最优价格委托”.“本方最优价格委托”.“最优 ...

  10. DISCUZ论坛各大功能模块入口文件介绍

    index.php 首页入口文件,这个文件相信大家都不陌生,小编就不具体介绍了. forum.php 论坛入口文件 portal.php 门户入口文件 group.php 群组入口文件 home.ph ...