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. 【USACO 3.1.5】联系

    [描述] 奶牛们开始对用射电望远镜扫描牧场外的宇宙感兴趣.最近,他们注意到了一种非常奇怪的脉冲调制微波从星系的中央发射出来.他们希望知道电波是否是被某些地外生命发射出来的,还是仅仅是普通的的星星发出的 ...

  2. sql server 利用首字母拼音排序和笔画排序的语句

    --按笔画排序 select * from Student order by Sname COLLATE Chinese_PRC_Stroke_CS_AS_KS_WS --按字母拼音排序 select ...

  3. php图片上传

    //处理图片 private function imageDeal($param){ $arrType=array('image/jpg','image/bmp','image/png','image ...

  4. error: File not found by glob???

    引发上述问题的几种情形: 1.rpm包的包名中含有“[.]”这类特殊符号; 2.执行rpm -ivh xxxx.rpm时,xxxx包名不存在; 3.rpm包顶层的目录名不存在或者存在问题:     - ...

  5. python模块中的特殊变量

    37.模块的特殊变量:      显示模块中的变量 import s1 print(vars(s1))      1.__doc__:打印注释信息. #!/usr/bin/env python # _ ...

  6. 【PRO ASP.NE MVC4 学习札记】使用Moq辅助进行单元测试

    清楚问题所在: 先开个头,当我们对A进行单元测试时,可能会发现A的实现必须要依赖B.这时,我们在写单元测试时,就必须先创建B的实例,然后把B传给A再建立A的实例进行测试. 这样就会出现一些问题: 1. ...

  7. Jackson将json字符串转换成List<JavaBean>

    Jackson处理一般的JavaBean和Json之间的转换只要使用ObjectMapper 对象的readValue和writeValueAsString两个方法就能实现.但是如果要转换复杂类型Co ...

  8. h.264 mvp求解过程

    h.264标准中由于分为宏块分割块(8x8),子宏块分割块(4x4),所以各种各样的求解过程比较繁琐 下面整理出标准中mvp的求解过程 8.4.1.3 已知条件有当前块的属性:位置.块类型需要得到当前 ...

  9. 7816的报文结构APDU

    命令APDU 包括头和主体(这可以在上面的图中看到).头包括CLA,INS,P1 和P2 域.同T0 协议一样,CLA 和INS 说明了应用的分类和指令.P1 和P2 用来详细说明具体指令,并由每一条 ...

  10. （转载）偏序集的Dilworth定理学习

    导弹拦截是一个经典问题:求一个序列的最长不上升子序列,以及求能最少划分成几组不上升子序列.第一问是经典动态规划,第二问直接的方法是最小路径覆盖, 但是二分图匹配的复杂度较高,我们可以将其转化成求最长上 ...