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. Python关于File学习过程

    一.首先,认识下文件 文本文件和二进制文件的差异和区别 进行个总结: 计算机内的文件广义上来说,只有二进制文件 狭义上来讲分为两大类:二进制文件和文本文件. 先说数据的产生(即写操作) 文本文件的所有 ...

  2. mysql zip方式安装

    下载zip文件解压到安装目录,此时是没有data文件夹和my.ini文件的. 1.首先自己新建my.ini,内容如下: [client] port=3306 default-character-set ...

  3. uni-app 的更新及碰到的问题

    uni-app 的更新 我这个是针对 app 的测试,没有考虑 小程序 及 h5,如需考虑请参考 uni-app 的条件编译 当我们将文件打包好之后,我们在手机上就可以下载 apk 文件,安装到我们的 ...

  4. sentinel控制台监控数据持久化【MySQL】

    根据官方wiki文档,sentinel控制台的实时监控数据,默认仅存储 5 分钟以内的数据.如需持久化,需要定制实现相关接口. https://github.com/alibaba/Sentinel/ ...

  5. C语言中函数strcpy ,strncpy ,strlcpy的用法

    strcpy ,strncpy ,strlcpy的用法 好多人已经知道利用strncpy替代strcpy来防止缓冲区越界. 但是如果还要考虑运行效率的话,也许strlcpy是一个更好的方式. 1. s ...

  6. an extra named object property

    Grunt supports the ability to split each task configuration into several separate configurations all ...

  7. 来自iSpy整理的最全海康大华IPC的RTSP连接地址

    来自iSpy整理的最全海康大华IPC的RTSP连接地址 先贴出处: 海康:http://www.ispyconnect.com/man.aspx?n=Hikvision 大华:http://www.i ...

  8. mysql RPM 包比较全的网站

    https://pkgs.org/download/mysql-devel https://pkgs.org/download/mysql-server https://pkgs.org/downlo ...

  9. 【网易微专业】图表绘制工具Matplotlib

    01 与图片的交互方式设置 这一小节简要介绍一下Matplotlib的交互方式 import pandas as pd import numpy as np import matplotlib.pyp ...

  10. Django-DRF(1)

    一. WEB应用模式 在开发Web应用中,有两种应用模式: 1. 前后端不分离 2. 前后端分离 二. API接口 为了在团队内部形成共识.防止个人习惯差异引起的混乱,我们需要找到一种大家都觉得很好的 ...