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. Qt网络获取本机网络信息

    下面我们就讲解如何获取自己电脑的IP地址以及其他网络信息.这一节中,我们会涉及到网络模块(QtNetwork Module)中的QHostInfo ,QHostAddress ,QNetworkInt ...

  2. ansible-playbook的YAML语法学习

    YAML:可以将你打算对多机器的批量操作放到一个文件中,顺序执行,可以根据机器做到根据机器信息判断执行,其他命令执行结果判断执行. YAML有着严格的层级要求,稍微有个缩进问题就会无法运行,所以学习过 ...

  3. vue-cli3.0 初体验

    vue-cli3.0 自我记录 其实在2018年8月10号,vue-cli3.0就已经面世了,由于项目中应用的全是2.x版本,所以并不了解3.0的vue-cli发生了什么变化,那今天尝试了下遇见的问题 ...

  4. LC 670. Maximum Swap

    Given a non-negative integer, you could swap two digits at most once to get the maximum valued numbe ...

  5. 【Taro全实践】修改radio组件的大小

    需求是将radio选中后颜色改为橙色.大小改成合适大小. 1.改颜色 <Radio color='#FF7464'></Radio> 2.改大小 <Radio style ...

  6. 创建使用Spring Boot

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

  7. delphi 需要应用一个单元是，需要在工程里面先添加单元

    delphi 需要应用一个单元是,需要在工程里面先添加单元

  8. Scrapy框架——使用CrawlSpider爬取数据

    引言 本篇介绍Crawlspider,相比于Spider,Crawlspider更适用于批量爬取网页 Crawlspider Crawlspider适用于对网站爬取批量网页,相对比Spider类,Cr ...

  9. Jenkins - Tips

    01 - RPM包安装方式 默认路径 配置文件:/etc/sysconfig/jenkins 日志文件:/var/log/jenkins/jenkins.log 执行文件:/usr/lib/jenki ...

  10. JAVA 程序员代码生成利器

     http://www.grails.org/ 为什么要用Grails 采用groovy 开发,基于springboot+ hibernate ,groovy 语言层面运行效率稍微差点,但开发效率比j ...