CSS文本、字体、颜色

文本样式

文本常用的样式

文本缩进：text-indent

设置段落元素的第一行缩进方式，属性值可为绝对值（px）,也可为相对值（百分比，em）

p{
  text-indent:2em;/* text-index:-3em;*/
}

水平对齐：text-align

影响元素的文本行的对齐方式，常用属性值有三种：left、center、right

p{
  text-align:left;
}

文本修饰：text-decoration

设置文本的修饰效果 text-decoration：none; a元素默认有下划线，其他元素默认值为none

属性值 效果
none 无
overline 上划线
underline 下划线
line-through 删除线
blink 文本闪烁

文本颜色：color

设置文本的颜色 color：#eeeeee;

color

行高：line-height

  • 设置行与行之间的距离。
  • 属性值表示方式：– 固定值（如：line-height:36px;） – 相对值（如：line-height:1.5em;）
文本阴影：text-shadow

默认值为none，所有主流浏览器都支持该属性。

语法：text-shadow : h-shadow v-shadow blur color;

值 描述
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊的距离
color 可选。阴影的颜色

可以使用 text-shadow 属性来给文字指定多个阴影，并且针对每个阴影使用不同颜色，多个阴影使用逗号分隔。

练习一：修改文字阴影的位移距离、模糊半径、阴影颜色和霓虹灯效果

文本阴影
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>text-shadow属性的使用示例</title>
    <style type="text/css">
        body{
            color: navy;
            font-size: 20px;
            font-weight: bold;
            font-family: 宋体;
        }
        #div1{text-shadow: 5px 5px 2px #F39800;}
        #div2{text-shadow: 15px 15px 3px #F39800;}
        #div3{text-shadow: -5px -5px 1px #F39800;}
        #div4{text-shadow: 5px 5px 15px #008000;}
        p{text-shadow: 0px 0px 3px red;}
    </style>
</head>
<body>
    <div id="div1">文本阴影</div>
    <div id="div2">文本阴影</div>
    <div id="div3">文本阴影</div>
    <div id="div4">文本阴影</div>
    <!--设计阴影不发生位移，同时定义阴影模糊显示。-->
    <p>霓虹灯效果</p>
</body>
</html>

练习二：定义火焰字

借助阴影效果列表机制，可以使用阴影叠加出燃烧文字特效。

火焰字
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>火焰字</title>
        <style type="text/css">
            body {background:#000;}
            p {
                text-align: center;
                font:bold 60px helvetica, arial, sans-serif;
                color: red;
                text-shadow: 0 0 4px white, 
                0 -5px 4px #ff3,
                2px -10px 6px #fd3,
                -2px -15px 11px #f80,
                2px -25px 18px #f20;
            }
        </style>
    </head>
    <body>
        <p>HTML5+CSS3</p>
    </body>
</html>

练习三：定义立体文字和描边文字

通过左上和右下各添加一个1像素错位的补色阴影，营造出淡淡的立体效果。包括立体和凹体。

立体文字和描边文字
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>text-shadow</title>
    <style type="text/css">
        body { background: #ccc; }
        p {
            text-align: center;
            padding: 24px;
            margin: 0;
            font-family: helvetica, arial, sans-serif;
            font-size: 80px;
            font-weight: bold;
            color: #D1D1D1;
            background: #CCC;
            /*text-shadow: 1px 1px white,-1px -1px #333;*/
            /*text-shadow: -1px -1px white,1px 1px #333;*/
           text-shadow: -1px 0 #333,1px 0 #333,0 1px #333,0 -1px #333;
        }
    </style>
</head>
<body>
    <p>HTML5+CSS3</p>
</body>
</html>
文本自动换行:word-wrap
  • 可以让浏览器实现半角空格或连字符后面的换行，而且可以实现任意位置的换行。默认值为normal。
  • 语法：word-wrap: normal | break-word;
值 描述
normal 只在允许的断字点换行（浏览器保持默认处理）
break-word 在长单词或URL地址内部进行换行
文本自动换行：word-break
  • 可以让浏览器实现半角空格或连字符后面的换行，而且可以实现任意位置的换行。默认值为normal。
  • 语法：word-break: normal | break-all | keep-all;
值 描述
normal 使用浏览器默认的换行顺序
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行
文本换行
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style> 
        p.test1{width:11em; border:1px solid #000000;}
        p.test2{width:11em; border:1px solid #000000;word-wrap:break-word;}
        p.test3{width:11em; border:1px solid #000000;word-break:break-all;}
      /*
      word-wrap设置break-word属性会将长单词换行 但是仍然会有留白
      word-break设置break-all回达到一个好的效果，并且不会有留白
      */
    </style>
</head>
<body>
    <p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
    <p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
    <p class="test3">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
</body>
</html>

字体样式

关于字体的常用属性

字体样式：font-family

font-family:'宋体','微软雅黑',Arial,Verdana,arial,serif;

字号：font-size

  • 设置字体大小为绝对值：font-size:20px; 不允许用户在浏览器中改变文本大小
  • 设置字体大小为相对值：font-size:2em（或font-size:200%）相对于周围的元素来设置大小.允许用户在浏览器中改变文本大小（浏览器默认的字体大小为16px）

字体风格：font-style

设置字体斜体显示：font-style:italic

此属性的属性值有：normal、italic、oblique

字体加粗：font-weight

  • 设置字体加粗（固定值）：font-weight:900; 属性值取值范围为100~900
  • 使用关键字加粗字体：font-weight:bolder 属性值：lighter、normal、bold、bolder
  • 提示：400等同于normal，而700等同于bold

在一个声明中设置所有属性：font-style、font-weight、font-size、font-family

  • 未设置的属性会使用默认值
  • 至少要设置font-size、font-family两个属性
显示服务器端字体

@font - face规则和兼容性

@font-face

实现网页中插入特殊字体的过程

  1. 获取特殊字体：http://www.dafont.com/single-malta.font
  2. 获取@font-face所需字体格式：http://www.fontsquirrel.com/tools/webfont-generator
  3. 应用@font-face到项目中
@font-face{font-family: WebFont;src: url('webfontkit/singlemalta-webfont.ttf'); }
h1{ font-family: WebFont; }

颜色样式

CSS3 增加了3种颜色值定义模式：RGBA颜色值、HSL颜色值和HSLA颜色值。兼容：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

RGBA 颜色

RGBA 颜色值是 RGB 颜色值的扩展，带有一个透明度通道。

rgba(red, green, blue, <opacity>)
# opacity 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。
HSL 颜色

HSL色彩模式是工业界的一种颜色标准，通过对色相（Hue）、饱和度（ Saturation ）和亮度（ Lightness ）3个颜色通道的变化以及它们相互之间的叠加来获得各种颜色。

hsl (hue, saturation, lightness)
  • 色相（Hue）是：色盘上的度数（从 0 到 360） - 0 (或 360) 是红色，120 是绿色，240 是蓝色。
  • 饱和度（ Saturation ）：表示色彩被使用了多少，或者说颜色的深浅程度、鲜艳程度。取值为0%-100%，其中0% 意味着灰度，即没有使用该颜色；100% 饱和度最高，即颜色最艳。
  • 亮度（ Lightness ）：取值为0%-100%， 其中0% 是最暗，显示为黑色，100% 最亮，显示为白色。
HSL

练习：设计颜色表。选中一个色值，利用调整颜色的饱和度与亮度比重，设计配色方案。

颜色表
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table {
            border:solid 1px hsl(90,50%,50%);
            background:#eee;
            padding:6px;
        }
        th {
            color:hsl(90,50%,50%);
            font-size:12px;
            font-weight:normal;   
        }
        td {
            width:80px;
            height:30px;   
        }
        tr:nth-child(4) td:nth-of-type(1) { background:hsl(90,100%,100%);}
        tr:nth-child(4) td:nth-of-type(2) { background:hsl(90,75%,100%);}
        tr:nth-child(4) td:nth-of-type(3) { background:hsl(90,50%,100%);}
        tr:nth-child(4) td:nth-of-type(4) { background:hsl(90,25%,100%);}
        tr:nth-child(4) td:nth-of-type(5) { background:hsl(90,0%,100%);}
        
        tr:nth-child(5) td:nth-of-type(1) { background:hsl(90,100%,88%);}
        tr:nth-child(5) td:nth-of-type(2) { background:hsl(90,75%,88%);}
        tr:nth-child(5) td:nth-of-type(3) { background:hsl(90,50%,88%);}
        tr:nth-child(5) td:nth-of-type(4) { background:hsl(90,25%,88%);}
        tr:nth-child(5) td:nth-of-type(5) { background:hsl(90,0%,88%);}
        
        tr:nth-child(6) td:nth-of-type(1) { background:hsl(90,100%,75%);}
        tr:nth-child(6) td:nth-of-type(2) { background:hsl(90,75%,75%);}
        tr:nth-child(6) td:nth-of-type(3) { background:hsl(90,50%,75%);}
        tr:nth-child(6) td:nth-of-type(4) { background:hsl(90,25%,75%);}
        tr:nth-child(6) td:nth-of-type(5) { background:hsl(90,0%,75%);}
        
        tr:nth-child(7) td:nth-of-type(1) { background:hsl(90,100%,63%);}
        tr:nth-child(7) td:nth-of-type(2) { background:hsl(90,75%,63%);}
        tr:nth-child(7) td:nth-of-type(3) { background:hsl(90,50%,63%);}
        tr:nth-child(7) td:nth-of-type(4) { background:hsl(90,25%,63%);}
        tr:nth-child(7) td:nth-of-type(5) { background:hsl(90,0%,63%);}
        
        tr:nth-child(8) td:nth-of-type(1) { background:hsl(90,100%,50%);}
        tr:nth-child(8) td:nth-of-type(2) { background:hsl(90,75%,50%);}
        tr:nth-child(8) td:nth-of-type(3) { background:hsl(90,50%,50%);}
        tr:nth-child(8) td:nth-of-type(4) { background:hsl(90,25%,50%);}
        tr:nth-child(8) td:nth-of-type(5) { background:hsl(90,0%,50%);}
        
        tr:nth-child(9) td:nth-of-type(1) { background:hsl(90,100%,38%);}
        tr:nth-child(9) td:nth-of-type(2) { background:hsl(90,75%,38%);}
        tr:nth-child(9) td:nth-of-type(3) { background:hsl(90,50%,38%);}
        tr:nth-child(9) td:nth-of-type(4) { background:hsl(90,25%,38%);}
        tr:nth-child(9) td:nth-of-type(5) { background:hsl(90,0%,38%);}
        
        tr:nth-child(10) td:nth-of-type(1) { background:hsl(90,100%,25%);}
        tr:nth-child(10) td:nth-of-type(2) { background:hsl(90,75%,25%);}
        tr:nth-child(10) td:nth-of-type(3) { background:hsl(90,50%,25%);}
        tr:nth-child(10) td:nth-of-type(4) { background:hsl(90,25%,25%);}
        tr:nth-child(10) td:nth-of-type(5) { background:hsl(90,0%,25%);}
        
        tr:nth-child(11) td:nth-of-type(1) { background:hsl(90,100%,13%);}
        tr:nth-child(11) td:nth-of-type(2) { background:hsl(90,75%,13%);}
        tr:nth-child(11) td:nth-of-type(3) { background:hsl(90,50%,13%);}
        tr:nth-child(11) td:nth-of-type(4) { background:hsl(90,25%,13%);}
        tr:nth-child(11) td:nth-of-type(5) { background:hsl(90,0%,13%);}
        
        tr:nth-child(12) td:nth-of-type(1) { background:hsl(90,100%,0%);}
        tr:nth-child(12) td:nth-of-type(2) { background:hsl(90,75%,0%);}
        tr:nth-child(12) td:nth-of-type(3) { background:hsl(90,50%,0%);}
        tr:nth-child(12) td:nth-of-type(4) { background:hsl(90,25%,0%);}
        tr:nth-child(12) td:nth-of-type(5) { background:hsl(90,0%,0%);}
    </style>
</head>

<body>
<table class="hslexample">
    <tbody>
        <tr>
            <th>&nbsp;</th>
            <th colspan="5">色相：H=90 Yellow-Green</th>
        </tr>
        <tr>
            <th>&nbsp;</th>
            <th colspan="5">饱和度 (&rarr;)</th>
        </tr>
        <tr>
            <th>亮度 (&darr;)</th>
            <th>100% </th>
            <th>75% </th>
            <th>50% </th>
            <th>25% </th>
            <th>0% </th>
        </tr>
        <tr>
            <th>100 </th>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th>88 </th>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th>75 </th>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th>63 </th>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th>50 </th>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th>38 </th>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th>25 </th>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th>13 </th>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th>0 </th>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>
</body>
</html>
HSLA 颜色

HSLA 颜色值是 HSL 颜色值的扩展，带有一个透明度通道

hsla(hue, saturation, lightness, opacity)
# opacity参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,009评论 5赞 474
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,808评论 2赞 378
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,891评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,283评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,285评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,409评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,809评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,487评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,680评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,499评论 2赞 318
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,548评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,268评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,815评论 3赞 304
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,872评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,102评论 1赞 258
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,683评论 2赞 348
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,253评论 2赞 341

推荐阅读更多精彩内容

  • 6_CSS样式_颜色_字体_文本
    关于颜色的小知识 颜色是通过对红、绿和蓝光的组合来显示的。早期的电脑只支持最多 256 种颜色时，但是现在大多数电...
    Zd_silent阅读 587评论 0赞 0
  • 网络技术与应用
    HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的，因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,815评论 0赞 0
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 2,300评论 0赞 11
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    wzhiq896阅读 1,725评论 0赞 2
  • CSS要点记录
    CSS要点记录 CSS 指层叠样式表 (Cascading Style Sheets) 多种样式时的优先级问题 数...
    Tony__Hu阅读 1,091评论 0赞 0