三、CSS样式——文本
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样式——文本的更多相关文章
- jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息
jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- 3月22日 html(三)css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...
- 前端学习笔记--CSS样式--文本
1.文本与文字样式主要的属性: 子标签可以继承父标签的样式: 关于颜色: 文本属性: letter-spacing: line-height: text-align: 字体:
- CSS样式，语法，添加方法，文本，字体
总结一些css的基础知识 ㈠css样式 css:cascading style sheets 层叠样式表 css内容和样式相分离,便于修改样式. ㈡css语法 ㈢css添加方法 ⑴行内添加:放在&l ...
- js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- CSS样式表（三）
前端人员在学习开发过程中常用的CSS样式总结: [margin] margin 检索或设置对象四边的外延边距 margin-top 检索或设置对象顶边的外延边距 margin-right 检索或设置对 ...
- PHP.9-HTML+CSS（三）-CSS样式
CSS样式 CSS是Cascading Style Sheets的简写,它除了可以轻松设置网页元素的显示位置和格式处,甚至还能产生滤镜,图像淡化,网页淡入淡出的渐变效果.CSS就是要对网页的显示效果实 ...
- CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
随机推荐
- Vue.js devtool插件安装后无法使用的解决办法【最简单有效的解决方法】
在开发vue相关的项目时,使用vue devtools工具是一件极其有趣的事,你所有的操作都马上给你实时反馈. 然而有时候安装好的工具,在chrome中不显示. 在网上找过多次,一直没有找到有效解决方 ...
- Golang微服务：Micro Trace使用opentracing jaeger
trace Micro通过Wrapper实现了三种trace接口,aswxray,opencensus,opentracing,这里主要关注opentracing,opentracing已成为行业标准 ...
- Spring Boot Logback日志配置
logback的使用: Logback的默认配置 如果配置文件 logback-test.xml 和 logback.xml 都不存在,那么 logback 默认地会调用BasicConfigurat ...
- 小妖精的完美游戏教室——东方PROJECT，同人，th12灵梦A
╮(╯▽╰)╭没办法,小妖精Balous也很讨厌学院化的教育呀,一点意义都没有. 这次就上传东方地灵殿灵梦A逻辑部分的核心代码吧,估计连老师都看不懂.动画部分的代码就不放上来了. //======== ...
- 小程序开发：canvas在画布上滑动，页面跟着滑动问题
微信小程序官方文档有说明,disable-scroll="true" 可以阻止页面下拉和滚动.这里有个坑,disable-scroll在真机上如果要生效,那么要给canvas绑定一 ...
- CSS 关于权重的另类解说
众所周知,对于CSS中权重的顺序,从大到小依次如下: !important id class 标签 在html标签中写入行内样式style,又大于link引入.相同类型的样式标记,在数量上多的大于数量 ...
- openWRT报错
1.报错内容 /usr/lib/lua/luci/dispatcher.lua:533: bad argument #1 to 'pairs' (table expected, got nil)sta ...
- Redis连接方式
连接redis 本地安装了Redis并运行在6379端口,密码设置为 foobared. 1. from redis import StrictRedis redis = StrictRedis(ho ...
- RPC概念及分类【转载】
RPC概念及分类 RPC全称为Remote Procedure Call,翻译过来为“远程过程调用”.目前,主流的平台中都支持各种远程调用技术,以满足分布式系统架构中不同的系统之间的远程通信和相互调用 ...
- GitHub Pages：静态站点托管服务（待补充）
不管是 react 还是 vue 项目路由都必须使用 hash 方式,否则页面打不开,切记!!! 如果使用的是 vue-cli 3 创建项目,那么你要在根目录创建 vue.config.js 文件,并 ...