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. 实时错误 '91' :对象变量或with块变量未设置

    大家这几天在做学生信息管理系统的时候,出现最多的应该就是这个问题了,“实时错误‘91’:对象变量或with块变量未设置”.如右图: 遇到这个问题,我们首先应该去参考MSDN,不过这时候MSDN似乎没有 ...

  2. 初涉JavaScript模式 (10) : 函数 【进阶用法】

    写在前面 不知不觉写到第10篇了.这篇写起来很忐忑,终于和高级搭上边了(呵呵),这篇我们 主要 说一下 JS 方法的部分高级用法(我知道的),笔者水平有限,难免有错.废话不多少,进入正文. 初始化 我 ...

  3. jQuery自带的一些常用方法总结

    jQuery自带的一些常用方法总结 这篇文章主要介绍了jQuery自带的一些常用方法总结,包括$.trim .$.contains.$.each.$.map.$.inArray.$.extend等,需 ...

  4. python中read、readline和readlines的区别

    read        读取整个文件 readline    读取下一行 readlines   读取整个文件到一个迭代器以供我们遍历(读取到一个list中,以供使用,比较方便). 123.txt内容 ...

  5. 腾讯QQ、新浪微博等知名社交网络图标素材

    腾讯QQ.新浪微博.QQ空间.淘宝.知乎.支付宝.大众点评等设计网络图标矢量素材. 注意是矢量素材,AI格式.放大缩小不变形. 社交网络图标几乎在网页制作中都会用到.一个好看的图标,完全可以提升整体网 ...

  6. C#开发学习——.net C#中页面之间传值传参的方法以及内置对象

    1.QueryString是一种非常简单的传值方式,他可以将传送的值显示在浏览器的地址栏中.如果是传递一个或多个安全性要求不高或是结构简单的数值时,可以使用这个方法.但是对于传递数组或对象的话,就不能 ...

  7. MyBatis Generator generatorConfig.xml配置详解

    所有Generator的xml详细说明见:http://mybatis.org/generator/configreference/xmlconfig.html (英文版) 引用 http://blo ...

  8. rysnc，scp与bashrc冲突问题

    问题是: scp file user@host:dst失败,user用户的bashrc文件中加入了 sudo su -,自动切换到root用户. 症状是输入密码验证失败. rsync, scp是传输文 ...

  9. TextView 设置超过几行后显示省略号

    android:lines="5" android:ellipsize="end"

  10. -_-#【乱码】URL中文参数

    JavaScript利用URL向后台传入中文参数乱码问题解决之道! encodeURIComponent(encodeURIComponent('ya呀')) http://wap.baomihua. ...