CSS文字控制与文本控制

一、CSS控制文字属性:

1、font-size:18px;:设置字号(默认是16px=1em),一般在制作网页的时候,先在body里同一设置下字体大小
2、color:#093:设置字色
3、font-family:‘宋体‘;:设置字体(可以有多种字体,两个字体之间有,分隔开,表示如果系统中有第一个字体则显示效果是第一个字体,如果没有则显示的是第二个字体的效果,以此类推)
4、line-height:150%;:设置行与行之间的距离(单位可用px或者em或者百分比)
5、font-weight:bold:设置字体的粗细(粗:bold 正常:normal)

6、font-variant : normal正常 | small-caps小型的大写字母字体
7、font—style:设置字体样式(normal正常,italic,oblique斜体)
8、text-decoration:修饰文字(none正常,underline下划线,overline上划线,line-through删除线 blink闪烁(只支持IE6,7,搜狐))
9、letter-spacing:5px:字符间距(normal默认,length长度单位)
10、word-spacing:5px:单词间距(normal默认,length长度单位  单词之间加上一个空格之后才能看的到效果)

font属性简化的写法:是否斜体 是否同宽 是否粗体 大小 字体

<style type="text/css">
body{font-size:18px; color:#093; font-family:Arial, ‘汉仪行楷简‘; line-height:300%; font-weight:bold}
div{width:400; height:50; background:#999; word-spacing:5em;}
h1{font-weight:normal;font-style:italic; text-decoration:underline; letter-spacing:5px; word-spacing:60px;}
</style>
</head>
<body>
    <h1>李克强主持召开<span>国务院</span>常务会 IAmLOME</h1>
    <h2> 听取最低生活保障政策落实督查情况汇报</h2>
            部署进一步加强和改进低保工作<br />
    <div>决定将《社会救助暂行办法(草案)》向社会公开 i am LOME</div>
</body>

注意:设置字体要尽量使用通用的字体,就是用大家电脑上一般都有的字体,常用的是中文字体是宋体,英文字体是Arial)设置字体的时候将英文字体设置在前,中文设置在后 。如果想用比较特殊的字体,可以将其转换为图片

小技巧:

1.   如果是12px或14px的字体,行高一般1.5em-1.8em之间   字号越大行高设置的越小一点

2.设置区块中的内容,垂直方向上居中,将区块的行高设置与区块的高度相同,前提是只能一行

<style type="text/css">
h1{width:600px; height:150px; line-height:150px; border:1px solid #0F0;}
</style>
</head>
<body>
    <h1>fsadkfhkasdhfasfasdfdsafjk</h1>
</body>

 

二、CSS控制文本属性:

1、设置文本缩进:text-indent:length(长度单位)可以负值
2、文本水平对齐方式:text-align:left左,center居中,right右
3、空白处理:white-space:nowrap(nowrap强制在一行中显示,pre换行和空格保留,normal自动换行)
4、大小写控制:text-transform:(capitalize每个单词的第一个字母大写,uppercase每个字母都大写,loowercase每个字母都小写,none正常大小)
5、文本垂直对齐方式:vertical-align:(sub设置文本为下标,super设置文本为上标 , top与顶端对齐 ,text-bottom与低端对齐)

 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>CSS控制文本</title>
 6 </head>
 7 <style type="text/css">
 8     #one{text-indent:2em;}
 9     #two{text-align:center; white-space:pre; text-transform:uppercase;}
10     span{vertical-align:super;}
11     #t2{width:100px; vertical-align:middle;}
12 </style>
13 <body>
14         <p id="one">0.5秒三分绝杀!波特兰上演波什时刻 第N次拯救热火</p>
15         <h1 id="two">玩命暴扣扳平+助攻绝杀三分 <span>热火</span>太幸运有这fkasfjklas    fklasdj颗队魂</h1>
16         <p>热火今夜还一功臣必须赞 11分不多但却分分是金!</p>
17         <p>詹波为小弟恶犯叫屈 当事人他都起飞了!肯定假摔</p>
18         <p>斯帅称客战开拓者奥登不打 波什:他很快就可复出</p>
19         <p>
20             <img src="../../imgs/95160924ab18972ba7fd1de8e7cd7b899f510ac8.jpg" id="t2"/>
21             斯帅称客战开拓者奥登不打 波什:他很快就可复出
22         </p>
23 </body>
24 </html>
时间: 2024-10-16 04:43:55

CSS文字控制与文本控制的相关文章

CSS控制长文本内容显示(截取的地方用省略号代替)

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行显示,并且截取一定的长度,截取的地方用省略号代替.虽然用动态语言可以对其控制,但是这样做是不利于搜索引擎收录的,活用CSS可以巧妙地解决这个问题,请看下面的代码:代码一:用于非表格LI或span等都可以 www.169it.com .text-overflow { display:block;/*内

用javascript实现控制一个文本框的输入字数限制,超出字数限制文本框飘红显示-面试题

用javascript实现控制一个文本框的输入字数限制,超出字数限制文本框飘红显示. html <textarea name="" id="text" cols="30" rows="10" maxLength=10></textarea><br> <span id="span"></span> javascript var str = docum

div css鼠标悬停锚文本超链接文字背景颜色或图片变化

div css鼠标悬停锚文本超链接文字背景颜色或图片变化(体感音乐) css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色). 鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇.(体感音乐) 此DIV CSS布局技巧其实是对a标签做鼠标经过CSS样式.利用以下代码: a{...} 原始超链接默认样式设置a:hover{...}鼠标悬停经过时超链接锚文本CSS样式(扩展阅读:ie6 hover)一.链接文字无背景鼠标经过悬停

css中的几种控制页面布局的定位机制(相对定位与绝对定位)

  CSS中几种控制页面布局的定位机制 对于web的初学者来说,CSS中的几种定位方式经常让人摸不着头脑,从而达不到想要的页面布局效果,趁有时间就好好总结一下CSS中的几种定位方式,也当自己再巩固一下. CSS中包含三种控制页面布局的定位机制:普通流.相对定位.绝对定位.在CSS中通过position属性表明定位机制.此外还可以使用float属性来让元素浮动 普通流 相应语法(默认) position:static; 所谓的普通流就是根据块级元素以及内联元素自身的属性来进行布局,而不人为的进行控

css文字属性

font-family- css字体:设定时,需考虑浏览器中有无该字体. font-size -css字体大小:注意度量html单位. font-weight - css字体粗细-css加粗样式:除了normal(正常).bold(粗体).bolder(特粗).lighter(细体)外,还有9种以像素为度量为单位的设置方式. css font-style-样式:css字型. css line-height - css行高:行距.注意,行距只能以是字体大小值为 font-variant - css

5.1 CSS文字样式

文字和图像是传达信息的基础,是网页设计永远不可缺少的元素,各种各样的文字和图像效果在整个互联网中无处不在.本章从基础的文字设置开始,详细讲解CSS设置各种文字效果的方法,然后再进一步讲解关于图像的几个重要的应用领域. 使用过任何文字处理软件的用户对文字排版都不会陌生.例如在Word软件中可以对文字的字体.大小和颜色等各种属性进行设置.CSS同样可以对HTML页面中的文字进行全面的设置. 一.准备网页 为了便于讲解和实践,首先准备一个非常简单的页面,HTML代码如下. <!DOCTYPE html

05使用CSS设置字体和文本样式

使用CSS设置字体和文本样式: 1.定义字体类型font-family 用法: font-family:name; font-family:ncursive|fantasy|monospace|serif|sans-serif name表示字体名称,可指定多种字体,用空格隔开.按优先顺序排列.如果字体名称包含空格,则应该使用括号()括起来. font是一个复合属性,所谓复合属性是指该属性能够设置多种字体属性,用法如下: font:font-style||font-variant||font-we

【IOS 开发】IOS 开发 简介 (IOS项目文件 | MVC 模式 | 事件响应机制 | Storyboard 控制界面 | 代码控制界面 | Retina 屏幕图片适配)

一. IOS 项目简介 1. IOS 文件简介 创建一个 HelloWorld 项目, 在这个 IOS 项目中有四个目录 : 如下图; -- HelloWorldTests 目录 : 单元测试相关的类和资源; (1) HelloWorld 目录 HelloWorld 目录介绍 : -- 命名规则 : 该目录名称与 IOS 项目名称相同, 是主目录; -- 存放内容 : IOS 项目的 源码文件, 界面设计文件, 资源文件都存放在该目录下; -- 源文件 : Objective C 的 .m 和

&lt;转载&gt;使CSS文字图片div元素居中方法之水平居中的几个方法

文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决的时候相对来说通过css比较容易设置,垂直居中相对比较棘手. 先来说一下水平居中的不同情况与不同解决方法吧. 1文本,图片等行内元素的水平居中方法呢比较简单.直接给父元素设置一个text-align:centent属性就可以实现元素的水平居中了. 2 确定宽度的块级元素水平居中怎么设置呢?设置方法也