CSS文本

概念：CSS文本属性可定义文本外观

　　　通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进

属性 描述
color 文本颜色
direction 文本方向
line-height 行高
letter-spacing 字符间距
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-transform 元素中的字母
unicode-bidi 设置文本方向
white-space 元素中空白的处理方式
word-spacing 字间距 
<!--index.html-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

    <p id="p_hello">hello CSS</p>

    <div>

        <h3>静夜思</h3>

        <p>窗前明月光，</p>

        <p>窗前明月光。</p>

        <p>窗前明月光，</p>

        <p>窗前明月光。</p>

    </div>

    <div>

        <p id="p_transform1">This Is A Test</p>

        <p id="p_transform2">this is a test</p>

        <p id="p_transform3">this is a test</p>

    </div>

    <div>

        <h1>test shadow!</h1>

        <p id="wrap">test wrap!test wrap!test wrap!test wrap!test wrap!test wrap!test wrap!test wrap!</p>

    </div>

</body>

</html>
/*style.css*/

#p_hello{

    color: brown;

    text-align: center;

}

h3{

    text-indent: 0.5em;

}

#p_transform1{

    text-transform:lowercase ;  /*全部小写*/

}

#p_transform2{

    text-transform: uppercase;  /*全部大写*/

}

#p_transform3{

    text-transform: capitalize;  /*首字母大写*/

}

h1{

    text-shadow: 5px 5px 5px #ff0000;

}

#wrap{

    width: 100px;

    text-wrap:normal ;

}

/*

 h-shadow   必需。水平阴影的位置。允许负值。

 v-shadow   必需。垂直阴影的位置。允许负值。

 blur       可选。模糊的距离。

 color      可选。阴影的颜色。

 */

运行结果：

三、CSS样式——文本的更多相关文章

  1. jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  2. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  3. 3月22日 html(三)css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...

  4. 前端学习笔记--CSS样式--文本

    1.文本与文字样式主要的属性: 子标签可以继承父标签的样式: 关于颜色: 文本属性: letter-spacing: line-height: text-align: 字体:

  5. CSS样式，语法，添加方法，文本，字体

    总结一些css的基础知识 ㈠css样式 css:cascading style sheets  层叠样式表 css内容和样式相分离,便于修改样式. ㈡css语法 ㈢css添加方法 ⑴行内添加:放在&l ...

  6. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  7. CSS样式表（三）

    前端人员在学习开发过程中常用的CSS样式总结: [margin] margin 检索或设置对象四边的外延边距 margin-top 检索或设置对象顶边的外延边距 margin-right 检索或设置对 ...

  8. PHP.9-HTML+CSS（三）-CSS样式

    CSS样式 CSS是Cascading Style Sheets的简写,它除了可以轻松设置网页元素的显示位置和格式处,甚至还能产生滤镜,图像淡化,网页淡入淡出的渐变效果.CSS就是要对网页的显示效果实 ...

  9. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

随机推荐

  1. 锦囊9-if语句

    [程序描述] 编写程序,通过使用 if...elif...else 语句判断数字是正数.负数或零: [程序分析] 正数.负数或零的判断非常简单,只需要判断这个数是否大于零,小于零或者等于零.由于判断的 ...

  2. Vue.js devtool插件安装后无法使用的解决办法【最简单有效的解决方法】

    在开发vue相关的项目时,使用vue devtools工具是一件极其有趣的事,你所有的操作都马上给你实时反馈. 然而有时候安装好的工具,在chrome中不显示. 在网上找过多次,一直没有找到有效解决方 ...

  3. js数组操作-最佳图解

    js数组操作-最佳图解

  4. 关于Spring中的<context:annotation-config/>配置(开启注解)

    当我们需要使用BeanPostProcessor时,直接在Spring配置文件中定义这些Bean显得比较笨拙,例如: 使用@Autowired注解,必须事先在Spring容器中声明AutowiredA ...

  5. java中next()和nextLine()的区别

    首先,next()一定要读取到有效字符后才可以结束输入,对输入有效字符之前遇到的空格键.Tab键或Enter键等结束符,next()方法会自动将其去掉,只有在输入有效字符之后,next()方法才将其后 ...

  6. python 一些方法的时间测试

    尝试一些方法的不同实现,比较一下时间,电脑比较渣,不过只是做个比较 虽然用python主要是方便,肯定是不快的,不过能快一点还是快一点好 numpy中大量使用同样 shape 的全 0 array,可 ...

  7. 17. Debuggers （调试器 5个）

    反编译是安全研究的重要组成部分. 它将帮助您解剖Microsoft补丁,以发现他们无法告诉您的默认修复的错误,或更仔细地检查服务器二进制文件以确定为什么您的漏洞利用不起作用. 许多调试器都可用,但ID ...

  8. jQuery事件合成

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  9. PythonStudy——装饰器 Decorator

    def outer(func): def inner(): print("新增功能1") func() print("新增功能2") return inner ...

  10. zabbix使用客户端和不使用客户端监控指定端口

    监控指定端口也很简单,以监控181主机的22端口为例 点击已成功监控的181主机的监控项 点击创建监控项 使用客户端监控端口:选择键值net.tcp.listen[port],需要自己把port改成2 ...