css文本样式
1、
body{
color:aqua; /*可继承的颜色*/
text-align: center; /*文本对齐方式*/ }
2、缩进:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="style2.css" type="text/css" rel="stylesheet">
</head>
<body> <div>
<h1>静夜思</h1>
<p>床前明月光,</p>
<p>床前明月光。</p>
<p>床前明月光,</p>
<p>床前明月光。</p>
</div> </body>
</html>
没有缩进的效果:
加上css样式:
h6{
text-indent: 2em;/*首行缩进2个像素*/
}
效果:
h6{
text-indent: -2em;/*首行退2个像素*/
padding-left: 2em
}
p{
padding-left: 2em
}
效果:
3、大小写:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="style2.css" type="text/css" rel="stylesheet">
</head>
<body> <p id="p1">this Is my web page</p>
<p id="p2">this Is my Web page</p>
<p id="p3">this Is my web page</p>
</body>
</html>
css:
#p1{
text-transform: capitalize;/*每个单词的第一个字母变为大写*/
}
#p2{
text-transform: lowercase;/*所有变为小写*/
}
#p3{
text-transform: uppercase;/*所有变为大写*/
}
效果:
4、设置阴影效果:
p{
text-shadow: 5px 5px 1px #FF0000;/*设置背景,参数分别为:距左 距上 清晰度 背景颜色*/
}
效果:
5、测试自动换行:
原来效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="style2.css" type="text/css" rel="stylesheet">
</head>
<body> <p>测试阴影效果测试阴影效果测试阴影效果测试阴影效果测试阴影效果测试阴影效果测试阴影效果测试阴影效果</p> </body>
</html>
加入css:
p{
width:100px;
text-wrap:normal;/*换行:正常,100px*/
}
效果:
css文本样式的更多相关文章
- 第 15 章 CSS 文本样式[下]
学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.文本总汇 本节课, ...
- 第 15 章 CSS 文本样式[上]
学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.字体总汇 本节 ...
- css基础-css选择器和css文本样式相关
css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...
- 6.css文本样式
文本样式,只要针对的是文本的效果和文本的方位,即文本样式和文本控制总结起来有一表中的属性可用: 属性名 说明 CSS 版本 text-decoration 装饰文本出现各种划线 1 text-tran ...
- (3)css文本样式
本篇学习资料主要讲解: 如何用css 的样式定义方法来介绍文字的使用. 第(1)节:用css设置文本样式. 一.弄懂文本文字的制作.利用css的样式定义版面 ...
- css文本样式及控制文本的大小写
常用文本样式如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- css文本样式text、字体样式font
文本样式text 1.文本颜色color 例如h1 {color:red;} 2.文本方向direction,不常用 默认ltr从左到右,rtl表示从右到左 3.文本水平对齐方式text-align ...
- CSS 文本样式
1. 文本样式 text <!--文本颜色color --> .text {color:red;} 2. 文本对齐方式 text-align <style> .text ...
- css文本样式-css学习之旅(4)
color:颜色derction:方向:line-height:行高:letter-spaceing:字符间距:text-align:对齐方向:text-decoration:装饰:text-inde ...
随机推荐
- Winform Textbox实现滚动条始终在最下面
在用textbox时,实现一些信息追加时,要使滚动条始终呆在最下面的实现方法. 以textbox1为例,事件TextChanged中执行以下代码即可 private void textBox1_Tex ...
- 让linux(centos)支持中文文件和文件夹
一.让linux支持中文 1.将Linux的env设置了LANG=en_US.UTF-8: 2.本地的Shell客户端编码也设置成UTF-8,这样让在windows上传到linux的文件或者目录不会出 ...
- jdbc连接数据库和jdbc-odbc桥接方式连接数据库
//这种方式为jdbc直接连接,需要添加jar文件 1 package com.howe2; import java.sql.*; public class test2 { public static ...
- HTML5和CSS3实例教程[总结一]
关于onclick的行为与内容分离 通过链接触发弹出窗口方式 (不推荐使用此方法!!!) <a href='#' onclcik = "window.open('holiday_pay ...
- ASP.NET协作应用集成到trsids身份验证服务器的开发流程
开发Actor协同模块: (参考TRSIDS4.0 协作应用集成手册[asp.net]) ASP.Net协作应用集成到IDS之前,需要开发Actor类实现协作应用回调接口中定义的本地登录.退出.用户信 ...
- 粗俗易懂的SQL存储过程在.NET中的实例运用
整理了一下存储过程在项目中的运用,防止遗忘,便记录于此!存储过程(Stored Procedure)是一组为了完成特定功能的SQL语句集,经编译后存储在数据库中.用户通过指定存储过程的名字并给出参数( ...
- Android Design Support Library: 学习CoordinatorLayout
简述 CoordinatorLayout字面意思是"协调器布局",它是Design Support Library中提供的一个超级帧布局,帮助我们实现Material Design ...
- jquery mini ui 学习
1.mini.parse(); 将html标签解析为miniui控件.解析后,才能使用mini.get获取到控件对象. 2.mini.get(id);根据id获取控件对象. 3.grid.load() ...
- JAVA为什么会空指针异常
1.所谓的指针,就是java中的对象的引用.比如String s;这个s就是指针. 2.所谓的空指针,就是指针的内容为空,比如上面的s,如果令它指向null,就是空指针. 3.所谓的空指针异常,就是一 ...
- MYSQL预处理传参不区分大小写解决办法
问题:预处理语句为:SELECT * FROM WHERE name=? 如果传送的参数为“admin” “ADmin” “ADMIN” “ADimn”等,结果处理后的语句为SELECT * FROM ...