zoukankan      html  css  js  c++  java
  • HTML第五章

    第五章 css美化网页元素

    1.使用CSS美化网页文本的意义:

             ①有效地传递页面信息。

             ②使用CSS美化过的页面文本,使页面漂亮,美观,吸引用户。

             ③可以很好地突出页面的主题内容,使用户第一眼可以看到页面主要内容。

             ④具有良好的用户体验。

    2.<span>标签:

             <span>标签是被用来组合HTML文档中的内行元素的,它没有固定的格式表示,只有对它应用CSS样式时,它才会产生视觉上的变化。

    3.字体样式:

    属性名

    含义

    举例

    备注

    font-family

    设置字体类型

    font-family:"隶书";

    当需要同时设置英文字体和中文字体时,一定要将英文字体设置在中文字体之前,中间用逗号隔开

    font-size

    设置字体大小

    font-size:12px;

    单位:px;

    font-style

    设置字体风格

    font-style:italic;

    Normal(默认值),italic ,oblique

    Italic和oblique效果非常相似

    font-weight

    设置字体的粗细

    font-weight:bold;

    Normal (400)

    默认值,定义标准的字体

    Bold(700)

    粗体字体

    bolder

    更粗的字体

    lighter

    更细的字体

    100、200、300、400、500、600、700、800、900

    定义由细到粗,400等同于normal,700等同于bold

    font(简写)

    在一个声明中设置所有字体属性

    font:italic bold 36px "宋体";

    顺序:风格,粗细,大小,类型

    (分出大类)

    4.使用CSS排版网页文本:

    属性

    含义

    举例

    备注

    color

    设置文本颜色

    color:#00C;

    text-align属性

    left

    (默认值)把文本排列到左边

    text-align

    设置元素水平对齐方式

    text-align:right;

    right

    把文本排列到右边

    center

    把文本排列到中间

    justify

    实现两端对齐文本效果

    text-indent

    设置首行文本的缩进

    text-indent:20em;

    text-decoration常用值

    line-height

    设置文本的行高

    line-height:25px;

    none

    (默认值)定义的标准文本

    underline

    设置文本的下划线

    text-decoration

    设置文本的装饰

    text-decoration:underline;

    overline

    设置文本的上划线

    Line-through

    设置文本的删除线

    blink

    设置文本闪烁(只在Firefox有效)

    5.垂直对齐方式:

    在CSS中通过vertical-align设置垂直方向对齐方式。但是在目前的浏览器中,只能对表格单元格的对象使用对齐方式属性,而对于一般的标签,如<h1>~<h6>、<p>、<div>标签都不起作用,因此vertical-align在设置文本标签中垂直对齐时并不常用,它反而用来设置图片及文本的对齐方式。

     

    6.超链接伪类:

    伪类名称

    含义

    示例

    a:link

    未单击访问时超链接样式

    a:link{color:#9ef5f9;}

    a:visited

    单击访问后超链接样式

    a:visited {color:#333;

    text-decoration:none;(无下划线)

    }

    a:hover

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

    a:hover{color:#ff7300;

    a:active

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

    a:active {color:#999;

    text-decoration:underline;(有下划线)

    }

    顺序:

    a:link –> a:visited -> a:hover -> a:active

    (前后浮释)

     

    7.Cursor属性常用值:

    说明

    图例

    default

    默认光标

     

    pointer

    超链接的指针

     

    wait

    指示程序正在忙

     

    help

    指示可用的帮助

     

    text

    指示文本

     

    crosshair

    鼠标呈现十字状

     

     

    8.<div>标签:

           < div>标签可以把HTML文档分割成独立的,不同的部分,因此<div>标签用来进行网页布局。<div>标签与<p>标签一样,也是成对出现的。在使用<div>布局页面时,它可以嵌套<div>,同时也可以嵌套列表、段落等各种网页元素。

    CSS中控制网页元素的两个属性

    width

    height

     

    9.网页背景属性:

    背景属性

    background-color

    背景颜色值:十六进制方法表示

    background-image

    repeat

    沿水平和垂直两个方向平铺

    no-repeat

    不平铺,即背景图像只显示一次

    Repeat-x

    只沿水平方向平铺

    Repeat-y

    只沿垂直方向平铺

    background-position

    Xpos  Ypos

    使用像素值表示,第一个值表示水平位置,第二个值表示垂直位置

    30px 40px正向偏移,图像向下和向右移动

    X%  Y%

    使用百分比表示背景位置

    30% 50%

    垂直方向居中,

    水平方向偏移30%

    X、Y方向关键词

    使用关键词表示背景的位置,水平方向的关键词有

    left、 center 、right

    垂直方向的关键词有

    top、center 、bottom

    使用水平和垂直方向的关键词进行自由组合,例:

    Right  top(右上角出现)

    Left bottom(左下角出现)

    top (上方水平居中位置出现)

    background(简写)

    颜色图片位置定位是否平铺

    例:backgrond:#c00 url (image/arrow.gif ) 205px 10px no-repeat

     

    10列表样式:

    List-style-type

    说明

    语法示例

    图示例

    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

    1.刷牙

    2.洗脸

    List-style-image

    List-style-position属性是使用图象来替换列表的标记,当设置了list-style-image后list-style-type属性都将不起作用,页面中仅显示图像标记

    Li{

    List-style-image:url(image/arrow.gif)

    List-style-type:circle;

    }

    List-style-position

    inside

    标示项目标记放置在文本以内,且环绕文本根据标记对齐

    outside

    是默认值,它保持标记位于文本的左侧,列表项标记放置在文本以外,且环绕文本不根据标记对齐

    list-style(简写)

    list-style:circle outsise url(image/arrow.gif);

               

     

  • 相关阅读:
    AOP在Spring Boot中如何使用
    拦截器在Spring Boot中如何使用
    跨域在Spring Boot中如何处理
    @ControllerAdvice
    文件上传之Spring Boot整合web层
    Git和GitHub
    Spring Boot 整合web层之JSON,gson,fastjson的使用
    Spring boot整合视图层
    Spring Boot中的parent是什么?
    网页自动化,验证码识别函数,深度学习训练
  • 原文地址:https://www.cnblogs.com/ppdpp/p/7635542.html
Copyright © 2011-2022 走看看