前端开发HTML&css入门——CSS的文本格式化
长度单位
| 像素 px | 百分比 % | em |
|
- 像素是我们在网页中使用的最多的一个单位， |
- 也可以将单位设置为一个百分比的形式， |
- em和百分比类似，它是相对于当前元素的字体大小来计算的 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: red;
} .box1{
font-size: 20px;
/*em数值根据当前元素字体大小变化而变化*/
width: 2em;
/*百分比随着父元素变化而变化*/
height: 50%;
background-color: yellow;
} </style>
</head>
<body> <div class="box"> <div class="box1"></div> </div> </body>
</html>
颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> .box1{
width: 100px;
height: 100px; /*
* 颜色单位：
* 在CSS可以直接使用颜色的单词来表示不同的颜色
* 红色：red
* 蓝色：blue
* 绿色：green
* 也可以使用RGB值来表示不同的颜色
* - 所谓的RGB值指的是通过Red Green Blue三元色，
* 通过这三种颜色的不同的浓度，来表示出不同的颜色
* - 例子：rgb(红色的浓度,绿色的浓度,蓝色的浓度);
* - 颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有
* - 浓度也可以采用一个百分数来设置，需要一个0% - 100%之间的数字
* 使用百分数最终也会转换为0-255之间的数
* 0%表示0
* 100%表示255
* 也可以使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样，
* 只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色
* 每组表示一个颜色 ,第一组表示红色的浓度，范围00-ff
* 第二组表示绿色的浓度，范围是00-ff
* 第三组表示蓝色的浓度，范围00-ff
* 语法：#红色绿色蓝色
* 十六进制：
* 0 1 2 3 4 5 6 7 8 9 a b c d e f
* 00 - ff
* 00表示没有，相当于rgb中的0
* ff表示最大，相当于rgb中255
* 红色：
* #ff0000
* 像这种两位两位重复的颜色，可以简写
* 比如：#ff0000 可以写成 #f00
* #abc #aabbcc
*
*/
/*background-color: rgb(161,187,215);*/ /*background-color: rgb(100%,50%,50%);*/ /*background-color: #00f;*/ /*background-color: #abc;*/ /*#aabbcc*/ background-color: #084098;
} </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
上面的代码如果懒得看的话，想知道颜色的RGB值直接用QQ自带的截图工具就能点两下就知道了。或者用更高级的screen color picker。
文本的大小以及颜色
| color | font-size | font-family |
| 设置字体颜色,使用color来设置文字的颜色 |
设置文字的大小,浏览器中一般默认的文字大小都是16px |
通过font-family可以指定文字的字体 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> .p1{
/*设置字体颜色,使用color来设置文字的颜色*/
color: red;
font-size: 30px;
/*
* 该样式可以同时指定多个字体，多个字体之间使用,分开
* 当采用多个字体时，浏览器会优先使用前边的字体，
* 如果前边没有在尝试下一个
*/
font-family: arial , 微软雅黑
</style>
</head>
<body>
<p class="p1">
我是一个p标签，ABCDEFGabcdefg
</p>
</body>
</html>
文字的字体
| 衬线字体 | 非衬线字体 | 等宽字体 | 草书字体 | fantasy |
| serif | sans-serif | monospace | cursive | 虚幻字体 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
一般会将字体的大分类，指定为font-family中的最后一个字体
*/
p{
font-family: arial , 微软雅黑 , 华文彩云 , serif;
}
</style>
</head>
<body> <p style="font-size: 50px; font-family: serif;">衬线字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: sans-serif;">非衬线字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: monospace;">等宽字体：我是一段文字，IHABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: cursive;">草书字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: fantasy;">虚幻字体：我是一段文字，ABCDEFGabcdefg</p>
</body>
</html>
效果：
文字的字体样式
| font-style | font-weight | font-variant |
|
设置文字的斜体 - 可选值： |
设置文本的加粗效果 可选值： |
设置小型大写字母 可选值： |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> .p1{
color: red;
font-size: 30px;
font-family: "微软雅黑";
font-style: italic;
font-weight: bold;
font-variant: small-caps ;
}
.p2{
/*设置一个文字大小*/
font-size: 50px;
/*设置一个字体*/
font-family: 华文彩云;
/*设置文字斜体*/
font-style: italic;
/*设置文字的加粗*/
font-weight: bold;
/*设置一个小型大写字母*/
font-variant: small-caps;
}
.p3{
/*
* 在CSS中还为我们提供了一个样式叫font，
* 使用该样式可以同时设置字体相关的所有样式,
* 可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开
*
* 使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，
* 如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式
* 大小必须是倒数第二个样式
*
* 实际上使用简写属性也会有一个比较好的性能
*/
font: small-caps bold italic 60px "微软雅黑";
}
</style>
</head>
<body> <p class="p3">我是一段文字，ABCDEFGabcdefg</p> <p class="p1">我是一段文字，ABCDEFGabcdefg</p> <p class="p2">我是一段文字，ABCDEFGabcdefg</p>
</body>
</html>
推荐使用p3的写法。
行间距
在CSS并没有为我们提供一个直接设置行间距的方式，
* 我们只能通过设置行高来间接的设置行间距，行高越大行间距越大
* 使用line-height来设置行高
* 网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示
行间距 = 行高 - 字体大小
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
- * 行间距 = 行高 - 字体大小
*/
.p1{
font-size: 20px; /*
* 通过设置line-height可以间接的设置行高，
* 可以接收的值：
* 1.直接就收一个大小
* 2.可以指定一个百分数，则会相对于字体去计算行高
* 3.可以直接传一个数值，则行高会设置字体大小相应的倍数
*/
/*line-height: 200%;*/ line-height: 2;
}
.p2{
/*
* 在font中也可以指定行高
在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值
*/
font: 30px/50px "微软雅黑";
line-height: 50px;
/*以上为两种行高设置方法，*/
}
.box{
width: 200px;
height: 200px;
background-color: #bfa;
/*
* 对于单行文本来说，可以将行高设置为和父元素的高度一致，
* 这样可以是单行文本在父元素中垂直居中
*/
line-height: 200px;
}
</style>
</head> <body> <p class="p2">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。
</p> <div class="box"> <a href="#">我是一个超链接</a> </div> <p class="p1">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。。
</p> </body> </html>
文本的样式
| text-transform | text-decoration | text-decoration | word-spacing 和letter-spacing | text-align | text-indent |
|
设置文本的大小写 可选值： |
设置文本的修饰 可选值： |
去除下划线 超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline |
letter-spacing可以指定字符间距（字母和字母之间的距离） word-spacing可以设置单词之间的距离（单词和单词之间的距离） |
设置文本的对齐方式 可选值： |
设置首行缩进 当给它指定一个正值时，会自动向右侧缩进指定的像素 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1 {
/*
* text-transform可以用来设置文本的大小写
*/
text-transform: lowercase;
}
.p2 {
/*
* text-decoration可以用来设置文本的修饰
line-through 为文本添加删除线
*/
text-decoration: line-through;
}
a {
/*超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline
如果需要去除超链接的下划线则需要将该样式设置为none
* */
text-decoration: none;
}
.p3 {
/**
* letter-spacing可以指定字符间距
*/
etter-spacing: 10px;
/*
* word-spacing可以设置单词之间的距离
*/
word-spacing: 120px;
}
.p4{
/*
* text-align用于设置文本的对齐方式
*/
text-align: justify ;
}
.p5{ font-size: 20px; /*
* text-indent用来设置首行缩进
*/
text-indent: -99999px;
} </style>
</head>
<body>
<p class="p5">
粉房旁边的那小偏房里，还住着一家赶车的，那家喜欢跳大神，常常就打起鼓来，喝喝咧咧唱起来了。鼓声往往打到半夜才止，那说仙道鬼的，大神和二神的一对一答。苍凉，幽渺，真不知今世何世。
</p>
<p class="p4">
粉房旁边的那小偏房里，还住着一家赶车的，那家喜欢跳大神，常常就打起鼓来，喝喝咧咧唱起来了。鼓声往往打到半夜才止，那说仙道鬼的，大神和二神的一对一答。苍凉，幽渺，真不知今世何世。
</p>
<p class="p3">
粉房旁边的那小偏房里，还住着一家赶车的，那家喜欢跳大神，常常就打起鼓来，喝喝咧咧唱起来了。鼓声往往打到半夜才止，那说仙道鬼的，大神和二神的一对一答。苍凉，幽渺，真不知今世何世。
</p>
<a href="#">我是超链接</a>
<p class="p2">
Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?
</p>
<p class="p1">
Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?
</p>
</body>
</html>
样式的继承
在CSS中，祖先元素上的样式，也会被他的后代元素所继承,
利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
div中的 span和p元素都会继承font-size大小。
-->
<div style="font-size: 30px;">
<p>
我是p标签中的文字
<span>我是span中的文字</span>
</p>
</div>
<span>我是p元素外的span</span>
</body>
</html>
或者直接设置给祖先元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*将样式设置为祖先元素，所有后代元素都会应用*/
body{
font-size: 30px;
}
</style>
</head>
<body>
<div style="background-color: yellow;">
<p>
我是p标签中的文字
<span>我是span中的文字</span>
</p>
</div> <span>我是p元素外的span</span> </body>
</html>
但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承 边框相关的样式 定位相关的
前端开发HTML&css入门——CSS的文本格式化的更多相关文章
- 要web开发精品教程吗？免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放
要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放 大师主讲 经验难得 由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...
- Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...
- [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...
- Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换
前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...
- 前端开发【第二篇: css】
css概述 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS ...
- 前端开发HTML&css入门——CSS&选择器练习
CSS 层叠样式表 (Cascading Style Sheets)css可以用来为网页创建样式表,通过样式表可以对网页进行装饰.所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低 ...
- Web前端开发中的各种CSS规范
Reference: http://yusi123.com/2866.html 一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和 ...
- 前端开发之-------------合理利用CSS的权重----------------
什么是CSS的权重?对于前端工程师来说,这是一个很基础的问题,如果前端工程师没有深刻理解这个概念,则很难写出高质量的CSS代码. 那么到底什么是CSS的权重呢?我们又怎么来进行判定CSS的权重呢? 讨 ...
- 前端开发中常用的CSS选择器解析(一）
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的介绍css中最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略cs ...
随机推荐
- qt学习（一）qt三个文件函数的框架
学到点什么, 而不是复制着什么, 每天敲着别人给的代码,苦涩得改完bug, 就这样一天天的过去, 实质上并没有学到什么, 别人的思想只是拿来借鉴, 你的思想是好是坏都是你的, 不用急着抛弃自己. 从q ...
- 死锁（deadlocks）
1.定义 所谓死锁<DeadLock>: 是指两个或两个以上的进程在执行过程中,因争夺资源而造成的一种互相等待的现象.若无外力作用,它们都将无法推进下去,此时称系统处于死锁状态或系统产生了 ...
- Seata简单介绍及其原理(一)
Seata 是什么? Seata 是一款开源的分布式事务解决方案,致力于提供高性能和简单易用的分布式事务服务.Seata 将为用户提供了 AT.TCC.SAGA 和 XA 事务模式,为用户打造一站式的 ...
- 【PowerOJ1741&网络流24题】最长递增子序列问题（最大流）
题意: 思路: [问题分析] 第一问时LIS,动态规划求解,第二问和第三问用网络最大流解决. [建模方法] 首先动态规划求出F[i],表示以第i位为开头的最长上升序列的长度,求出最长上升序列长度K. ...
- 企业级技术解决方案：hbase+es
1:需求: 解决海量数据的存储,并且能够实现海量数据的秒级查询 Hbase是典型的nosql,是一种构建在HDFS之上的分布式.面向列的存储系统,在需要的时候可以进行实时的大规模数据集的读写操作:但是 ...
- [codeforces743C]:Vladik and fractions（数学）
题目传送门 题目描述 请找出一组合法解使得$\frac{1}{x}+\frac{1}{y}+\frac{1}{z}=\frac{2}{n}$成立. 其中$x,y,z$为正整数且互不相同. 输入格式 一 ...
- 通过Hadoop jmx收集Namenode，Jobtracker相关信息
经常会有一些Hadoop监控的需求,例如datanode节点掉线,Tasktracker blacklist的数量,以及Namenode,Jobtracker的内存GC信息等. 之前采用Hadoop ...
- 自动化运维工具之Zabbix
一.部署zabbix 1.配置master节点 准备LAMP环境和zabbix的yum源 # yum install httpd php mariadb-server -y # vim /etc/my ...
- Apache2.4常用编译参数
转载文章,亲试 Apache2.4以后的版本编译依赖apr,所以,编译之前需要先安装apr及apr-util. 编译参数只是一个参考作用,这个参数是我平常使用的,具体工作中的需求还是要区别对待的 一些 ...
- Delphi XE2 之 FireMonkey 入门(10) - 常用结构 TPoint、TPointF、TSmallPoint、TSize、TRect、TRectF 及相关方法
它们都是结构, TPointF.TRectF 属新增, 其它也都有升级; 现在都拥有丰富的方法和方便的运算符重载; 且有一组相关的公共函数. 这组内容重要的是它们都来自 System.Types 单元 ...