CSS的文本格式化样式总汇小白攻略_样式基础知识

长度单位像素 px百分比 %em- 像素是我们在网页中使用的最多的一个单位,* 一个像素就相当于我们屏幕中的一个小点,* 我们的屏幕实际上就是由这些像素点构成的* 但是这些像素点,是不能直接看见。* – 不同显示器一个像素的大小也不相同,* 显示效果越好越清晰,像素就越小,反之像素越大。- 也可以将单位设置为一个百分比的形式,* 这样浏览器将会根据其父元素的

CSS的文本格式化样式总汇小白攻略

长度单位

CSS的文本格式化样式总汇小白攻略_样式基础知识

像素 px百分比 %em

– 像素是我们在网页中使用的最多的一个单位,
* 一个像素就相当于我们屏幕中的一个小点,
* 我们的屏幕实际上就是由这些像素点构成的
* 但是这些像素点,是不能直接看见。
* – 不同显示器一个像素的大小也不相同,
* 显示效果越好越清晰,像素就越小,反之像素越大。

– 也可以将单位设置为一个百分比的形式,
* 这样浏览器将会根据其父元素的样式来计算该值
* – 使用百分比的好处是,当父元素的属性值发生变化时,
* 子元素也会按照比例发生改变
* – 在我们创建一个自适应的页面时,经常使用百分比作为单位

– em和百分比类似,它是相对于当前元素的字体大小来计算的
* – 1em = 1font-size
* – 使用em时,当字体大小发生改变时,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。

文本的大小以及颜色

colorfont-sizefont-family
设置字体颜色,使用color来设置文字的颜色

设置文字的大小,浏览器中一般默认的文字大小都是16px
font-size设置的并不是文字本身的大小,
在页面中,每个文字都是处在一个看不见的框中的
我们设置的font-size实际上是设置格的高度,并不是字体的大小
一般情况下文字都要比这个格要小一些,也有时会比格大,
根据字体的不同,显示效果也不能

通过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 
serifsans-serifmonospacecursive 虚幻字体
<!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-stylefont-weight font-variant

设置文字的斜体

– 可选值:
* normal,默认值,文字正常显示
* italic 文字会以斜体显示
* oblique 文字会以倾斜的效果显示
* – 大部分浏览器都不会对倾斜和斜体做区分,
* 也就是说我们设置italic和oblique它们的效果往往是一样的
* – 一般我们只会使用italic

 设置文本的加粗效果

可选值:
* normal,默认值,文字正常显示
* bold,文字加粗显示

* 该样式也可以指定100-900之间的9个值,
* 但是由于用户的计算机往往没有这么多级别的字体,所以达到我们想要的效果
* 也就是200有可能比100粗,300有可能比200粗,但是也可能是一样的

 设置小型大写字母

可选值:
* normal,默认值,文字正常显示
* small-caps 文本以小型大写字母显示

* 小型大写字母:
* 将所有的字母都以大写形式显示,但是小写字母的大写,
* 要比大写字母的大小小一些。

<!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-transformtext-decorationtext-decorationword-spacing 和letter-spacing  text-aligntext-indent 

设置文本的大小写

可选值:
* none 默认值,该怎么显示就怎么显示,不做任何处理
* capitalize 单词的首字母大写,通过空格来识别单词
* uppercase 所有的字母都大写
* lowercase 所有的字母都小写

设置文本的修饰

可选值:
* none:默认值,不添加任何修饰,正常显示
* underline 为文本添加下划线
* overline 为文本添加上划线
* line-through 为文本添加删除线

去除下划线

超链接会默认添加下划线,也就是超链接的text-decoration的默认值是underline
如果需要去除超链接的下划线则需要将该样式设置为none

 letter-spacing可以指定字符间距(字母和字母之间的距离)

word-spacing可以设置单词之间的距离(单词和单词之间的距离)

 设置文本的对齐方式

可选值:
* left 默认值,文本靠左对齐
* right , 文本靠右对齐
* center , 文本居中对齐
* justify , 两端对齐
* – 通过调整文本之间的空格的大小,来达到一个两端对齐的目的

 设置首行缩进

当给它指定一个正值时,会自动向右侧缩进指定的像素
* 如果为它指定一个负值,则会向左移动指定的像素,
* 通过这种方式可以将一些不想显示的文字隐藏起来
* 这个值一般都会使用em作为单位

<!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>

 

海计划公众号
(0)
上一篇 2020/03/26 23:30
下一篇 2020/03/26 23:30

您可能感兴趣的内容

  • 启迷网使用帮助_一个分享实用技巧,挖掘产品价值的网站

    启迷网使用帮助 官方网址:http://www.iqimi.com/ 简介描述:一个分享实用技巧,挖掘产品价值的网站 一个写手机测评得积分换取现金。你可以给华为,VIVO,小米,小…

    2020/03/06
  • iframe中跨域页面访问parent的方法小白攻略_iframe入门知识

    iframe中跨域页面访问parent的方法小白攻略 跨域实例: 如上图所示,系统www.a.com/index.html页面中嵌入一个iframe,iframe中访问不同域的ww…

    2020/03/20
  • chrome书签插件使用攻略_插件入门攻略

    Pinbox 跨平台网络收藏工具Pinbox 是一款可以使得用户的Chrome书签变得更加生动的谷歌浏览器插件,用户在Chrome中安装了Pinbox插件以后,只需要点击一下扩展按钮就会自动为你把当前的网页保存到Pinbox中。在保存网页的时候,同时把当前网页中的缩略图保存在收藏中,这样用户就可以通过收藏中的缩略图快速地了解到该网页中的内容。Pinbox 插

    2020/03/29
  • HTTP之缓存 Cache-Control菜鸟教程_缓存入门知识

    通过在Response Header设置Cache-Control head 信息可以控制浏览器的缓存行为。我们先来看一下Cache-Control可以设置哪些值:一、可缓存性public: http通信的过程中,包括请求的发起方(浏览器)、代理缓存服务器都可以进行缓存。private :只允许请求的发起方(浏览器)进行缓存。no-cache:可以在请求的发

    2020/03/31
  • web开发新手应该知晓的20件事指南攻略_web基础知识教程

    在我当初刚从事 web 开发的时候,有很多重要的事我并没有事先了解。现在看来,我的很多期望都和现实有很大的差距。在这篇文章里,我会告诉你 20 件事情,这些都是在你准备开始或者刚开始 web 开发不久的时候就应该知晓的。这有助于你更好地正视自己的期望,同时少走一些弯路。1.编程和学位无关编程可以随时开始,并不需要学位。在互联网上你可以找到很多资源,尤其是一些

    2020/03/23
  • 深入JS继承入门教程_继承小白入门

    前言对于灵活的js而言,继承相比于java等语言,继承实现方式可谓百花齐放。方式的多样就意味着知识点繁多,当然也是面试时绕不开的点。撇开ES6 class不谈,传统的继承方式你知道几种?每种实现原理是什么,优劣点能谈谈吗。这里就结合具体例子,按照渐进式的思路来看看继承的发展。准备谈到js继承之前先回顾下js 实例化对象的实现方式。构造函数是指可以通过new

    2020/03/22
  • NodeJS/JWT/Vue 实现基于角色的授权基础入门_菜鸟教程下载

    在本教程中,我们将完成一个关于如何在 Node.js 中 使用 JavaScript ,并结合 JWT 认证,实现基于角色(role based)授权/访问的简单例子。作为例子的 API 只有三个路由,以演示认证和基于角色的授权:/users/authenticate – 接受 body 中包含用户名密码的 HTTP POST 请求的公开路由。若用户名和

    2020/03/23
  • vue.js 动态绑定class小白常识_class菜鸟知识

    1. 数据绑定vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下:博客园首页简写:
    博客园首页 2. 动态绑定classvue

    2020/03/29
  • vue-amap使用教程_基于 Vue 2.x 和高德地图的地图组件

    vue-amap使用教程 官方网址:https://elemefe.github.io/vue-amap/ GitHub:https://github.com/ElemeFE/vu…

    2020/03/06
  • MAC下配置ssh免密登录,以及配置Shadowsocks-libev 使用帮助 simple-obfs新手入门_vpn

    配置ssh免密登录(mac)生成密钥ssh-keygen -t rsa
    一路回车即可,然后执行:ls ~/.ssh
    会看到两个密钥文件id_rsa(私钥), id_rsa.pub(公钥)配置~/.ssh/config 在~/.ssh/config(没有就新建)里添加:Host {NAME} # 主机名, 别名HostName {IP} # 完整的主机名, I

    2020/04/06
  • 到 2050 年,人工智能收入将超过 1000 亿美元入门基础_人工智能基础知识教程

    作为当下最热门的技术创新和研究方向之一,人工智能在备受关注的同时,也被炒作和误解,行业出现了很多泡沫。不少人质疑,人工智能凭借概念炒作和出色的营销吸引了资本市场的关注。热潮褪去之后,AI 落地、商业化还有多大的空间?AI 从炒作变成现实近日,Medium 的一篇 文章 中提到,到 2050 年,人工智能收入将超过 1000 亿美元。另据 Tractica 在

    2020/03/22
  • JS合并两个有序数组菜鸟教程_数组入门基础教程

    代码如下:function merge(nums1, nums2) {var len1 = nums1.length – 1;var len2 = nums2.length – 1;var len = nums1.length + nums2.length – 1;while (len1 >= 0 && len2 >= 0) {nums1[len–] =

    2020/03/26
  • 前端性能优化入门教程css加载会造成哪些阻塞现象?_性能菜鸟教程下载

    css的加载是不会阻塞DOM的解析,但是会阻塞DOM的渲染,会阻塞link后面js语句的执行。这是由于浏览器为了防止html页面的重复渲染而降低性能,所以浏览器只会在加载的时候去解析dom树,然后等在css加载完成之后才进行dom的渲染以及执行后面的js语句。这就是造成在css下载完成之前,页面刚开始会出现白屏现象的原因。浏览器渲染流程:浏览器开始解析目标H

    2020/04/05
  • 关于export和export default你不知道的事小白入门_模块小白帮助

    网上有很多关于export和export default的文章,他们大部门都是只讲了用法,但是没有提到性能,打包等关键的东西。
    大家应该应该能理解import * from ‘xxx’会把文件中export default的内容都打包到文件中,而import {func} from ‘xxx’ 只会把文件中的func导入,这样势必export会比export

    2020/03/30
  • Nginx如何实现一个域名访问多个项目基础指南_项目基础入门

    最近在个人的多个项目部署中遇到这样一个问题,一个域名如何实现多个项目的访问。因为不想自己单独去申请域名证书和域名配置,便想到了这个方案,结合Nginx的location功能实现了自己的需求,便记录下来。示例中是以PHP的项目演示,其他的语言类似同样的方式进行部署。例如node的项目,可以在location中做一个验证,然后使用 porxy_pass 反向代理

    2020/03/23
  • 推酷入门攻略_IT人专属的个性聚合阅读社区

    推酷入门攻略 官方网址:https://www.tuicool.com/ 简介描述:IT人专属的个性聚合阅读社区 推酷网是面向IT人的个性化阅读网站,其背后的推荐引擎通过智能化的分…

    2020/03/06