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样式支持的不好，不推荐使用。

例子：百度搜索内容显示

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  <title>百度搜索页面</title>
  6.  <style type="text/css">
  7.  body{
  8.      margin:0px;
  9.      padding:0px;}
  10.  p{
  11.      margin:0px;
  12.      font-family:Arial, Helvetica, sans-serif;}
  13.  p.title{
  14.      padding-bottom:0px;
  15.      font-size:16px;}
  16.  p.content{
  17.      padding-top:3px;
  18.      font-size:13px;
  19.      line-height:18px;}
  20.  p.link{
  21.      font-size:13px;
  22.      padding-bottom:25px;
  23.      color:#008000;}
  24.  span.search{
  25.      color:#c60a00;}
  26.  span.quick{
  27.      color:#666666;
  28.      text-decoration:underline;}
  29.  p.title span.search{
  30.      text-decoration:underline;}
  31.  
  32.  </style>
  33.  </head>
  34.  
  35.  <body>
  36.   <p class="title"><a href="#">中国<span class="search">春节</span>网欢迎您</a></p>
  37.   <p class="content">在中国传统的节日中,最热闹。最受人们重视的节日是<span class="search">春节</span>。<span class="search">春节</span>,是农历的元旦,是... 送压岁钱是潮汕春节习俗中重要的一项,长辈要分钱给后辈,能挣钱的后辈也要送...</p>
  38.   <p class="link">www.chunjie.net.cn 2012-11-08  - <span class="quick">百度快照</span></p>
  39.  </body>
  40.  </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. tp5 模型关联，多表联查实用方法

    1.模型中建立关联关系 public function goods(){ return $this->belongsTo('app\common\model\goods\Goods', 'goo ...

  2. Qt控制台输出QString

    有时候想在控制台输出我们想要的QString变量. 1.qDebug可以实现在控制台终端打印,但我们还是想使用C++中的std::cout<<variable This function ...

  3. 【MyBatis】【SQL】没有最快，只有更快，从一千万条记录中删除八百万条仅用1分9秒

    这次直接使用delete from emp where cdate<'2018-02-02',看看究竟会发生什么. Mapper里写好SQL: <?xml version="1. ...

  4. linux如何将某个用户加入到其它组?

    答: 在Ubuntu下可以使用以下命令添加: sudo usermod -a -G <group_name> <user_name> 注意: 如何生效呢?   需要重新登陆系统 ...

  5. java的JDBC驱动使用链接数据库

    1.    import java.sql.*; 2 .    导入所需要的数据库的jar包,如oracle/informix的 3. String sql = "select * from ...

  6. 问题root@localhost's password:localhost:permission denied,please try again

    转载:https://www.cnblogs.com/hmy-blog/p/6500909.html 经过试验,上述方法在我的电脑中没有成功. 1.安装 open ssh:sudo apt-get i ...

  7. 异步IO和协程

    1-1.并行:真的多任务执行(CPU核数>=任务数):即在某个时刻点上,有多个程序同时运行在多个CPU上 1-2.并发:假的多任务执行(CPU核数<任务数):即一段时间内,有多个程序在同一 ...

  8. Hive的内部表和外部表

  9. Linux 查看Tomcat版本信息

    Linux 查看Tomcat版本信息 如果我们想运行在 Linux 下的 Tomcat 版本信息,只需要在 Tomcat 的 bin/ 目录下,运行 version.sh 脚本即可. 1.使用如下命令 ...

  10. lumen怎么得到当前Uri的控制器、Action、路由规则

    <?php namespace App\Http\Controllers; class HelloController extends Controller { public function ...