我的定位：中高级人才（框架熟练、Java语法精通、数据库会用、Linux会用、中间件会用、有大数据经验！）
开始，我以为自己什么都知道。后来发现，其实我什么都不知道。

css05文本,文字属性

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="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>

 

posted @ 2017-06-29 14:04  想太多先森  阅读(109)  评论(0)  编辑  收藏  举报