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. 【MyBatis】【SQL】删除最快纪录诞生，从一千万条记录中删除八百万条仅用2分6秒

    在 https://www.cnblogs.com/xiandedanteng/p/11669629.html 里我做个一个循环按时间查ID并删除之的程序,运行时间是4分7秒. 但是这个程序走了很多次 ...

  2. 前端知识点回顾之重点篇——ES6的Promise对象

    Promise Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异 ...

  3. nginx优化后的主配置文件

    user web web; #nginx的程序账户和程序组 worker_processes auto; #worker进程数 auto设为默认 error_log /app/logs/nginx/w ...

  4. python下载服务器

    大佬们,你们还在为传输文件时利用U盘插拔而苦恼吗,还在为设置文件共享而苦恼吗?别苦恼了,教你一秒实现文件的传输. 首先我们都要有python环境,这个肯定有. 下面就是一秒,在你要传的文件的目录下输入 ...

  5. Web前端性能优化-重绘与回流

    1.什么是重绘与回流 Render tree 的重新构建就叫回流.当布局和几何属性改变时就需要回流,鼠标移动到图片 图片变大 也会触发回流.回流 能避免就避免 Render tree 改变外观.风格 ...

  6. Oracle CDC (Change Data Capture)更新数据捕获——概述

    Change Data Capture能高效识别并捕获数据的插入.修改和删除,使更新数据供个人或应用使用. CDC从oracle 9i开始引入,//TODO 在11G R2之后的版本里将取消支持,被O ...

  7. Java注解(Annotation)详解

    转: Java注解(Annotation)详解 幻海流心 2018.05.23 15:20 字数 1775 阅读 380评论 0喜欢 1 Java注解(Annotation)详解 1.Annotati ...

  8. 创建使用Spring Boot

    Spring Boot 创建项目 Spring Initializr 创建完成会自动下载 解压后 Idea导入 修改国内镜像 网络不够强的话停掉自动更新 build.gradle 加上 reposit ...

  9. Linux md5sum 命令

    Linux md5sum 命令 通过 Linux 的 md5sum 命令,可以对指定的文件,计算出唯一的一个MD5值(128bit). 通过比较文件前后的MD5值,可以判断文件是否发生变化(是否被修改 ...

  10. Unreal Engine* 4/英特尔® VTune™ Amplifier 使用指南

    借助英特尔 VTune Amplifier,可以通过单一易用的分析界面获得先进的分析功能.UE4 和英特尔 VTune Amplifier 相互配合,支持调查代码并进行分析,从而在多个内核上顺畅运行. ...