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. 理解线程的挂起，sleep还有阻塞

    线程是靠cpu来运行的,cpu要运行一个线程(不说别的)最起码就是要占用cpu时间,象Windows这样的多任务操作系统,可以允许多个线程同时运行,所谓的同时运行并不是真正的同时运行,而是轮流运行不同 ...

  2. bash shell学习-shell script基础 (笔记)

    A chain no stronger than its weakest link. "一着不慎,满盘皆输" 参考资料:鸟哥的Linux私房菜 基础学习篇(第三版)  Linux ...

  3. underscorejs-pluck学习

    2.14 pluck 2.14.1 语法: _.pluck(list, key) 2.14.2 说明: pluck方法根据key对list数组中的每个对象进行检索,返回检索成功的属性值,否则返回und ...

  4. js删除选中的复选框中的父辈。

    function scsx(){ var cb=document.getElementsByName('checkbox') if(confirm('删除?')){ for (var i=0;i< ...

  5. Sql 格式化工具

    SQL Pretty Printer:目前提供4种使用方式,桌面版本,SSMS(SQL Server Management Studio)插件,VS插件,和提供API接口. SQL Pretty Pr ...

  6. FFT快速傅立叶

    Description 给出两个n位10进制整数x和y,你需要计算x*y. Input 第一行一个正整数n.第二行描述一个位数为n的正整数x.第三行描述一个位数为n的正整数y. Output 输出一行 ...

  7. MySQL笔记--查询语句实践

    有一个用户表,属性为 id,age,buytime 创建表以及插入数据的语句 CREATE TABLE USER( id INT, age INT, buytime INT ) ,,); ,,); , ...

  8. PostBack与IsPostBack区别

    这涉及到aspx的页面回传机制的基础知识 postback是回传 即页面在首次加载后向服务器提交数据,然后服务器把处理好的数据传递到客户端并显示出来,就叫postback, ispostback只是一 ...

  9. 7.1 Backup and Recovery Types 备份和恢复类型

    7.1 Backup and Recovery Types 备份和恢复类型 这个章节描述 不同备份类型的特点: 物理(raw)与逻辑备份 物理备份有raw 副本组成,存储数据库内容,这种类型的备份是适 ...

  10. 跨站脚本（XSS）

    跨站脚本: cross-site scripting或者XSS, 即攻击者向目标Web站点注入HTML标签或者脚本 如果网站没有通过移除任何嵌入的HTML标签来消毒,那么web页面很容易受到跨站脚本攻 ...