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. 07_RHEL7配置yum源

    redhat 默认自带的 yum 源需要注册才能更新.想不花钱也可以更新,就需要替换掉redhat的yum源. 检查是否安装yum包 查看RHEL是否安装了yum,若是安装了,那么又有哪些yum包: ...

  2. 导出页面文档（只在IE8下测试过）

    之前说过一篇关于打印的方法,就顺便也看了一下导出,但是该方法需要用户更改浏览器的安全级别设置,因此并不十分推荐,大家如真有需要可以参考一下ZeroClipboard这款插件,我有时间也会去学习一下并贴 ...

  3. js在html中的加载执行顺序

    1.加载顺序:引入标记<script />的出现顺序,依次加载 页面上的Javascript代码是HTML文档的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记< ...

  4. centos 下搭建 php环境（1）

    3.PHP的安装 安装GD库(让PHP支持GIF,PNG,JPEG) 首先下载 jpeg6,libpng,freetype 并安装模块 wget http://www.ijg.org/files/jp ...

  5. python之路——爬虫实例

    urlController.py import bsController from urllib import request class SpiderMain(object): def __init ...

  6. 禁用ios7 手势滑动返回功能

    禁用ios7 手势滑动返回功能 版权声明:本文为博主原创文章,未经博主允许不得转载. 在有的时候,我们不需要手势返回功能,那么可以在页面中添加以下代码: - (void)viewDidAppear:( ...

  7. hdu Co-prime

    题意:求出在一个区间[A,B]内与N互质的个数 . 思路: 先求出n的质因子,然后求出与N的质因子不互质的个数然后总个数减去就是.用位运算二进制表示那个因子用到过,实现容斥原理.在1到n之间是c倍数的 ...

  8. Keil使用中的若干问题

    一.混合编程 1.模块内接口: 使用如下标志符: #pragma asm 汇编语句 #pragma endasm 注意:如果在c51程序中使用了汇编语言,注意在keil编译器中需要激活Properti ...

  9. 未能找到类型或命名空间名称“XXXX”(是否缺少 using 指令或程序集引用?) 转

    未能找到类型或命名空间名称“XXXX”(是否缺少 using 指令或程序集引用?)   项目中 App_Code 文件夹中的类的命名空间,在添加的页面的  using XXXX  时,提示 未能找到类 ...

  10. Domain Shutdown Error(JBAS010850)

    In a manged domain, the shutdown operation is not located in the root resource (i.e. address []). A ...