使用css文本样式的6种方法

很多web前端初学者 http://www.maiziedu.com/course/web/在学习css样式时,对文本内容的修饰需要用到css文本样式进行修饰。由于在层叠关系中,内容要高于背景。所以文本样式相对而言更加重要。有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个内容。本文将详细介绍文本相关样式。

首行缩进

定义

首行缩进是将段落的第一行缩进,这是常用的文本格式化效果。一般地,中文写作时开头空两格,类似于此。

[注意]该属性可以为负值

text-indent

值: <length> | <percentage> | inherit

初始值: 0

应用于: 块级元素(包括block和inline-block)

继承性: 有

百分数: 相对于包含块的宽度

应用

【悬挂缩进】

div{

width: 200px;

border: 1px solid black;

text-indent: -1em;//关键代码

padding-left: 1em;//关键代码

}

【首字下沉】

div{

width: 200px;

border: 1px solid black;

text-indent: 0.5em;

}

div:first-letter{

font-size: 30px;

float: left;

}

水平对齐

定义

水平对齐是影响一个元素中的文本的水平对齐方式。

text-align

值: left | center | right | justify | inherit

初始值: left

应用于: 块级元素(包括block和inline-block)

继承性: 有

两端对齐

当水平对齐方式为两端对齐时,word-spacing可能会调整,以便文本在整行中正好放下。如果为letter-spacing指定一个长度值,则letter-spacing不会两端对齐影响,除非letter-spacing值为normal。

IE兼容

对于IE7-浏览器来说,使用text-align不仅会改变文本的水平对齐方式,也会改变后代块级元素的水平对齐方式

.box{

width: 200px;

height: 200px;

background-color: pink;

border: 1px solid black;

text-align: right;

}

.in{

height: 100px;

width: 100px;

background-color: lightgreen;

}

<div class="box">

<div class="in">测试文字</div></div>

字间隔

字间隔是指单词间距,用来设置文字或单词之间的间距。实际上,"字"表示的是任何非空白符字符组成的串,并由某种空白符包围

[注意]单词之间用空格分开,单词之间的间距 = word-spacing + 空格大小

[注意]字间隔可为负值

word-spacing

值: <length> | normal | inherit

初始值: normal(默认为0)

应用于: 所有元素

继承性: 有

字母间隔

字母间隔是指字符间距

[注意]字母间隔可为负值

letter-spacing

值: <length> | normal | inherit

初始值: normal(默认为0)

应用于: 所有元素

继承性: 有

文本转换

文本转换用于处理英文的大小写转换

text-transform

值: uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit

初始值: none

应用于: 所有元素

继承性: 有

文本修饰

定义

文本修饰用于为文本提供修饰线

[注意]文本修饰线的颜色与文本颜色相同

text-decoration

值: none | [underline(下划线) || overline(上划线) || line-through(中划线)] | inherit

初始值: none

应用于: 所有元素

继承性: 无

继承

文本修饰属性无法继承,意味着子元素文本上的任何修饰线与父元素的颜色相同。子元素文本上的修饰线实际上是父元素的,只是正好"经过"而已。

互不冲突的文本修饰线可出现多条

时间: 2024-10-26 21:08:14

使用css文本样式的6种方法的相关文章

19.CSS文本样式【下】

第十五章 CSS文本样是[下] 一.文本总汇 二.文本样式 :CSS文本样式分为三种:文本装饰,英文大小写转换,文本阴影. 1.text-decoration (1)none :让本身有划线的文本取消掉: (2)underline :让文本的底部出现一条下划线: (3)overline :让文本的顶部出现一条下划线: (4)line-through :让文本的中部出现一条产出划线: (5)bline :让文本出现闪烁,基本不支持了: 例.@charset="utf-8" p{ font

页面中插入CSS样式的三种方法

页面中插入css样式的三种方法总结 1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表. <link>标签在(文档的)头部: <head> <link rel="stylesheet" type="text/css" href="path/myCss.css"/> <

第 15 章 CSS 文本样式[上]

学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.字体总汇 本节课,我们重点了解一下 CSS 文本样式中字体的一些设置方法,样式表如下: 属性名 说明 CSS 版本 font-size 设置字体的大小 1 font-variant 设置英文字体是否转换为小型大写 1 font-style 设置字体是否倾斜 1 font-weight 设置字体是否加粗 1 fon

第 15 章 CSS 文本样式[下]

学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.文本总汇 本节课,我们重点了解一下 CSS 文本样式中文本内容的一些设置方法,样式表如下: 属性名 说明 CSS 版本 text-decoration 装饰文本出现各种划线. 1 text-transform 将英文文本转换大小写. 1 text-shadow 给文本添加阴影 3 text-align 设置文本对齐方

css清除浮动的几种方法以及对应规范说明

css清除浮动的几种方法以及对应规范说明 1.{clear:both;}设置了clear 属性的元素,其上边框位置会紧贴浮动元素的 margin-bottom 边界位置渲染,使包含浮动元素的容器高度正常.所以适用于浮动元素后面容器之内有个非浮动元素,或是额外添加一个新的空元素. 2..after- clear-float :after{content:""; display:block; clear:both;}利用伪类添加新元素,原理同上,所以只适用于父容器最后一级子元素是浮动的,即

web前端入门到实战:css选择器和css文本样式相关

[文章来源微信公众号:每天学编程]---关注,后台领取编程资源 css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url("*.css");使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>

Android中设置文本颜色的三种方法及颜色大全

原文:Android中设置文本颜色的三种方法及颜色大全 源代码下载地址:http://www.zuidaima.com/share/1550463694572544.htm 1.利于系统自带的颜色类 如TextView1.setTextColor(Android.graphics.Color.RED); 2.数字颜色表示法 TextView1.setTextColor(0xffff00ff); 3.自定义颜色 TextView1.setTextColor(this.getResources().

CSS 清除浮动的四种方法

在实际项目中,我们经常会用到float属性来对页面进行布局.当使用float时,意味着该元素已经脱离了文档流,相当于浮于文档之上,不占据空间.但是针对兄弟元素为文字内容时,会占据一定空间,从而产生文字环绕的效果.如果不清除浮动,会导致父元素的高度撑不开等一系列问题. 那如何清除浮动呢?给出以下几种方法,一些不常用的就不说明了. 1.对浮动元素的父容器添加after伪类,并给伪类设置clear属性(给浮动元素的周围元素添加clear属性,清除该浮动元素)在浮动元素的后面增加一个块元素,对块元素设置

css清除浮动的几种方法整理

此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景. <style type="text/css"> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}