码迷,mamicode.com
首页 > Web开发 > 详细

css美化网页元素

时间:2020-06-27 11:25:24      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:css   body   责任   水平   site   中文   元素   一起   并发   

span标签

作用:能让某几个文字或词语凸显出来

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>影视简介</title>
        <link rel="stylesheet" type="text/css" href="css/YSJJ.css"/>
    </head>
    <body>
        <h2>花千骨</h2>
        <p>《花千骨》是由 <a href="#">慈文传媒集团</a>制作并发行,<span id="ZhuYan">林玉芬、高林豹、梁胜权联合执导,霍建华、赵丽颖</span>领衔主<br />
            演,<span class="cor1">蒋欣、杨烁</span>特别出演,<span id="ZY">张丹峰、李纯、马可、鲍天琦、安悦溪、徐海乔</span>等主演的古装玄幻仙侠剧。<br />
             该剧改编自fresh果果同名小说,讲述少女花千骨与长留上仙白子画之间关于责任、成长、取舍的纯爱虐<br />
             恋[1] 。该剧于2014年5月6日开机,9月15日杀青,8月12日发布中文及英文版的预告片[2] 。 该剧于<br />
             2015年6月9日起每周二、周三晚10点在 <span class="cor1">湖南卫视</span>的钻石独播剧场播出。[3] 2015年7月5日起,该剧播放<br />
             时间已经改为每周日、周一晚10点。当天零点在爱奇艺同步更新。[4]</p>
             <img class="img1" src="img/img/1.jpg" />
        <h2>主要演员</h2>
        <img class="img2" src="img/img/2.jpg" />
        <img class="img2" src="img/img/3.jpg" />
    </body>
</html>

 

字体样式(font)的书写

  • color: 设置字体颜色

    • color:red;
  • font-size:设置文字的大小

    • font-size:14px;
  • font-family:设置文字的字体

    • font-family: 宋体;
  • font-style:设置字体是否斜体

    • font-style: italic; 斜体
    • font-style: normal; 不斜体
  • font-weight:设置字体是否加粗

    • font-weight: bold; 加粗
    • font-weight: normal; 不加粗
  • line-height::设置字体的行高

    • line-height: 40px;
  • font: 字体的样式属性一起设置

    • 顺序
      • font-style
      • font-weight
      • font-size/line-height
      • font-family
    • 案例
      • font: italic bold 28px/40px "微软雅黑";
      • font: 28px/40px "微软雅黑";
  • text-indent:设置首行缩进

    • text-indent: 50px; 缩进50个像素
  • text-align:设置文字水平对齐方式

    • text-align: center; 水平居中

 

使用CSS的超链接样式设置伪类超链接在不同状态下的样式:

a:link 未单击访问时超链接样式

 

 

a:visited 单击访问后超链接样式

a:hover 鼠标悬浮其上的超链接样式

a:active 鼠标单击未释放的超链接样式

设置伪类的顺序:a:link->a:visited->a:hover->a:active

 

列表样式list-style:

none 无标记符号 list-style-type:none;

disc 实心圆,默认类型 list-style-type:disc;

circle 空心圆 list-style-type:circle;

square 实心正方形 list-style-type:square;

decimal 数字 list-style-type:decimal

 

背景属性

背景颜色background-color

背景图像background-image--语法:background-image:url(图片路径);

背景定位 background-position

背景重复方式(background-repeat)

css美化网页元素

标签:css   body   责任   水平   site   中文   元素   一起   并发   

原文地址:https://www.cnblogs.com/zl225/p/13197487.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!