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. WinPEter制作U盘启动盘

    一.图说WinPE启动U盘的制作 1.首先将U盘插入电脑的USB接口(重要提示:制作过程U盘会被格式化,注意备份资料): 2.解压下载的WinPEU.rar文件: 3.在WinPEU.rar解压目录打 ...

  2. 使用策略模式减少if else

    首先要明确的说出策略模式会不可避免导致你的代码类变得很多,如果对应方法逻辑很复杂时可采用,如果逻辑不是很复杂就有点大材小用了. package com.zihexin.application.stra ...

  3. 【软件工程】Alpha冲刺（4/6）

    链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 学习调用中国天气网API,接近实现天气推送功能 对天气推送的形式进行讨论及重确 ...

  4. LeetCode 简化路径（探索字节跳动）

    题目描述 给定一个文档 (Unix-style) 的完全路径,请进行路径简化. 例如, path = "/home/", => "/home" path ...

  5. ccf 2017-9-1 打酱油(dfs)

    ccf 2017-9-1 打酱油(dfs) 问题描述 小明带着N元钱去买酱油.酱油10块钱一瓶,商家进行促销,每买3瓶送1瓶,或者每买5瓶送2瓶.请问小明最多可以得到多少瓶酱油. 输入格式 输入的第一 ...

  6. POJ 2109 -- Power of Cryptography

    Power of Cryptography Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 26622   Accepted: ...

  7. vue 动态组件，传递参数

    <template> <div class="top"> <div class='nav'> <ul class='navHader'&g ...

  8. Matlab获取文件夹下所有文件名并将数据按矩阵赋值给变量

    一.获取一个文件夹下所有文件名: fileFolder=fullfile('D:\MATLAB\bin\trc'); dirOutput=dir(fullfile(fileFolder,'*.trc' ...

  9. 03 MySQL之数据类型和运算符

    01-数据类型 MySQL支持多种数据类型,主要有 数值类型.日期/时间类型和字符串类型. 1.1 整数类型 1.2 浮点数类型和定点数类型 单精度浮点类型(FLOAT)和双精度浮点类型 (DOUBL ...

  10. [转]SQL server 2008R2 中 C#Winfoirm 使用 SqlDependency 机制实现 数据库中某一张表的监视

    转自:https://blog.csdn.net/u012183487/article/details/77776930 System.Data.SqlClient命名空间下的 sqlDependen ...