1.创建一个html页面

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        @import "css/css04.css";

    </style>

</head>

<body>

<div>

    <h1>京东商城——全部商品分类</h1>

    <h2>图书、音像、电子书刊</h2>

    <p>

        <span>电子书刊</span> 电子书 网络原创 数字杂志 多媒体图书目<br/>

        <span>音像</span>音乐 影视 教育音像<br/>

        <span>经管励志</span> 经济 金融与投资 管理 励志与成功

    </p>

    <h2>家用电器</h2>

    <p><span>大家电</span> 平板电视 空调 冰箱 DVD播放机<br/>

        <span>生活电器</span> 净化器 电风扇 饮水机 电话机</p>

    <h2>个护化妆</h2>

    <p><span>面部护理</span> 洁面乳 精华露 眼部护理 T区护理<br/>

        <span>身体护理</span> 洗发护发 沐浴 手工/香皂 手足护理<br/>

        <span>香水SPA</span> 女士香水 男士香水 组合套装 迷你香水</p>

    <h2>钟表</h2>

    <p><span>瑞士品牌</span> 江诗丹顿 卡地亚Cartier 帝舵TUDOR 真利时ZENITH 雷蒙威Raymond Well<br/>

        <span>时尚品牌</span> 巴宝莉BURBERRY  雅克利曼Jacques Lemans  苏菲玛索Sophie Marceau<br/>

        <span>国产品牌</span> 聚利时Julius 北京beijing 依宝诺EBONO 劳士顿</p>

    <h2>服饰鞋帽</h2>

    <p><span>女装</span> T恤 衬衫 针织衫 卫衣 连衣裙 风衣 大衣 休闲裤<br/>

        <span>男装</span> 衬衫 POLO衫 针织衫 皮衣 外套 棉服 大衣<br/>

        <span>运动</span> 休闲鞋 跑步鞋 足球鞋 运动裤 运动包</p>

</div>

</body>

</html>

2.创建对应的css文件夹 下面的css04.css文件

h1{

    text-align: center;  /*一级标题居中显示*/

}

span{

    color: blue;     /* 字体颜色  蓝色*/

  /*  font-style: italic;  /!*斜体*!/

    font-weight: bold; /!*粗体*!/

    font-size:16px ;   /!*字体大小*!/

    font-family: "楷体";  /!*字体样式*!/*/

    font: italic bold 16px "楷体";

    text-decoration: underline; /*下划线*/

}

p{

    line-height: 30px; /* 行高*/

}

3.运行查看效果

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>字体样式</title>

    <style type="text/css">

   .show{

       font-size: 24px; /*字体的大小*/

       font-weight: bold; /*字体的粗细*/

       font-family:"楷体"; /*字体的类型*/

       font-style:italic; /*字体的风格*/

       color: red;

   }

    #dream{

        font:italic  bold  24px "楷体"; /*顺序不能改变*/

        color: rgb(200,2,2);  /*三原色的设置*/

        /* color: rgba(2,2,2,0.9);  设置颜色以及透明度*/

    }

   .bird{

       font-style: oblique;

        }

    </style>

</head>

<body>

<p>享受<span class="show">“北大式”</span>教育服务</p>

<p>在北大青鸟，有一群人默默支持你成就

    <span id="dream">IT梦想</span></p>

<p class="bird">选择<span>北大青鸟</span>，成就你的梦想</p>

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>文本装饰</title>

    <style type="text/css">

   div:nth-of-type(1){

       text-decoration: underline; /*下划线*/

   }

   div:nth-of-type(3){

       text-decoration: overline;/*上划线*/

   }

   div:nth-of-type(2){

       text-decoration: none; /*默认没有*/

   }

   div:nth-of-type(4){

       text-decoration: line-through; /*删除线*/

   }

    </style>

</head>

<body>

<div>文本内容1</div>

<div>文本内容2</div>

<div>文本内容3</div>

<div>文本内容4</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>垂直居中</title>

    <style type="text/css">

        span,img{   //图片与文字的垂直居中

            vertical-align: middle;

        }

    </style>

</head>

<body>

<img src="data:images/icon.gif">

  <span>这是几本值得拥有的Books</span>

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>文本阴影</title>

    <style type="text/css">

        h1{

            text-shadow: pink 10px 10px 2px;

        }

    </style>

</head>

<body>

<h1>文本阴影</h1>

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>超链接样式</title>

    <style type="text/css">

        /* 超链接伪类  必须按照下面的顺序进行设置

         01.a:link:未访问的链接

         02.a:visited:点击已经访问后的链接

         03.a:hover:鼠标悬停的链接

         04.a:active:鼠标单击未释放的链接

        */

        a:visited{

            color: yellowgreen;

        }

        a:hover{

            color: orange;

        }

        a:active{

            color: deeppink;

        }

        #haha:hover{

            text-decoration: none;

        }

    </style>

</head>

<body>

<a href="#" id="haha">超链接1</a>

<a href="#">超链接2</a>

</body>

</html>

css05文本,文字属性的更多相关文章

  1. html5文本框提示文字属性为placeholder

    html5文本框提示文字属性为placeholder 例子:  <textarea id="comment" class="commentCont"  n ...

  2. css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景

    什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...

  3. css中的字体及文本相关属性

    css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...

  4. CSS3：文字属性

    文字属性注意的细节: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. CSS: CSS常用的文本样式属性

    介绍:CSS常用的文本样式属性 color:  颜色 font-size:  字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...

  6. iOS-文本段落样式NSMutableParagraphStyle与NSParagraphStyle的使用和一些富文本处理属性

    开发过程中,经常会遇到动态计算行高的问题, - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)op ...

  7. 前端之CSS字体和文本类属性

    一.字体类属性: 1.字体类型: font-family:字体1,字体2,字体3; 常用写法: font-family:"微软雅黑",Arial; 注:a) 多个字体之间用逗号分隔 ...

  8. CSS(2)---css字体、文本样式属性

    css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...

  9. day67-CSS字体属性、文字属性、背景属性、css盒子模型

    1. 字体属性 1.1 文字字体:font-family可以把多个字体名称作为一个“回退”系统来保存.如果浏览器不支持第一个字体,则会尝试下一个.浏览器会使用它可识别的第一个值. * {font-fa ...

随机推荐

  1. 由问题引出的fsck命令

    博客停了两天,今天打开linux虚拟机,突然间报错了,顿时心中一喜(是吗?),当时看了下错误说明,好像有关于时间的问题(某个时间是未来时间)..然后我就去兴匆匆的修改系统时间,重启...唉,没作用.只 ...

  2. Win7-IIS7下运行PHP网站（以配置好的drupal网站为例）

    0.前提:IIS7已启用. drupal网站配置文件web.config中用到了“简洁链接”(URL重写),所以,还需要事先安装URL重写模块. URL重写模块(url rewrite)下载地址: r ...

  3. D题（贪心）

    D - D Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u     Descripti ...

  4. MVC中的区域

    authour: chenboyi updatetime: 2015-05-03 08:26:30 friendly link:   目录: 1,思维导图 2,AreaRegistration类的Re ...

  5. 习题二：string数组应用

    说明: 读字符串char buf[100]="xxx:yyy:zzz:aaa:bbb" 按“:”进行分解到string数组中去 逻辑: 通过指针遍历整个字符串 遇到'\0'表示字符 ...

  6. Maven插件开发

    Maven为我们提供了丰富的插件资源,使得开发调试过程中非常方便,可以满足大多数场景下的需求.当然有时候,我们也需要根据需求定制自己的插件.下面是在开发Maven插件时的一点备忘录,具体的开发流程请G ...

  7. Asteroids

    http://poj.org/problem?id=3041 #include<cstdio> #include<cstring> #include<algorithm& ...

  8. Java中匿名类的两种实现方式（转）

    使用匿名内部类课使代码更加简洁.紧凑,模块化程度更高.内部类能够访问外部内的一切成员变量和方法,包括私有的,而实现接口或继承类做不到.然而这个不是我说的重点,我说的很简单,就是匿名内部类的两种实现方式 ...

  9. Struts2 文件的上传与下载

    1. Struts2的文件上传需要Apache的commons-io-Version.jar和commons-fileupload-Version.jar两个jar包.2. 页面中的<s:fil ...

  10. Linux&shell之结构化命令进阶

    写在前面:案例.常用.归类.解释说明.(By Jim) for命令重复一系列的命令是一种常见的编程实践. #!/bin/bash # basic for command for test in A B ...