zoukankan      html  css  js  c++  java
  • css——样式

    0x01 文本

    1.缩进文本
    p{text-indent: 5em;}

    text-indent:表达的是文本的缩进,这里指缩进5。
    PS:该属性可以不能应用与行内元素,或者图像,但是如果图像在块级里面,那么图像就可以随整个块级元素移动。
              要使得行内元素实现缩进的效果,可以使用内边距的方式。


    若把其设置为-5em,那么可以出现悬挂缩进的效果,但要注意文字溢出边界的情况,所以通常会在设置一个边距来控制。

    关于使用百分比表示缩进的情况:
    例如:
    css:
    div{500px;}
    p{text-indent:20%;}
    
    <div>
    <p>
    look this effection
    </p>
    </div>
    注意:这个时候的百分比是相对于父元素的,也就是<div>

    下面简单介绍一下text—align:对齐方式属性

    它的属性值有:left,right和center
    PS:<CENTER>这个标签现在已经基本废除了


    2.字间隔
    使用word—spacing属性

    而letter-spacing是字母间隔的属性

    3.字符转换
    使用word-transform
    属性值有:uppercase lowrecase capitalize

    4.字符修饰
    使用text-decoration

    它的属性值有:none,underline,overline,line-through,blink

    大部分都是默认的none,但是一些超链接有下划线,需要用none处理。

    5.处理空白符

    使用white-spacing
    属性值:nomal(丢掉多余的空白),pre(空白处与输入完全相同),nowrap(不换行)
    pre-wrap:保留空白并且可以换行 



    0x02 字体

    1.css字体系列

    • 通用字体系列
    • 特定字体系列
    衬线字体与无衬线字体:
    衬线有粗细的区别,有笔锋而无衬线就是没有




    通常我们会在指定字体系列中提供一组通用字体系列,防止用户自己没有这类字体。

    这样做的语法是:
    body{ font-family:Georgia, "Times New Roman", Times, serif;}      //意思是如果用户没有Georgia这种字体,就会用 Times来代替

    或许你注意到上面的代码中有引号的出现。如果这种字体的英文是由几个单词组成(中间有空格),那么就需要用引号扩在一起(单双都可以)。

    2.css字体风格
    所谓字体风格,在css里就是规定字体是否倾斜。
    它的属性值:
    • normal - 文本正常显示
    • italic - 文本斜体显示
    • oblique - 文本倾斜显示
    其中italic和oblique是由区别的,但是在web显示上是完全一样的,具体的区别可以查看css2.0 。






    3.css字体变形
    使用font-variant
    属性值:normal和small-caps


    更多的字体功能在这里就不多说了,作为标签类语言,更多的是在需要使用的时候查找在使用即可。



    0x03 链接

    链接的属性有很多,但是链接的特殊性在于它可以在不同的状态呈现不同的显示。
    a:link(未点击时)
    a:visited(点击过后)
    a:hover(悬停在链接上)
    a:active(正在点击的过程中)

    它的语法是a:link{};
    并且它们的顺序应该像上面一样不能改变。

    0x04 列表

    在css中列表不单单指有条条框框的就是列表,凡是不是描述性的文字的,都可以叫做列表。


    它的语法是:ul{list-style-type:value};

    其中type可以是image






    2.css字体风格
    本博客基于网络课程完成,旨在学习,有错误请指正!
  • 相关阅读:
    NYOJ135 取石子(二)
    NYOJ448 寻找最大数
    NYOJ20吝啬的国度
    NYOJ47过河问题
    NYOJ199无线网络覆盖
    NYOJ92图像有用区域
    NYOJ287Radar
    NYOJ71独木舟上的旅行
    NYOJ484The Famous Clock
    NYOJ148fibonacci数列(二)
  • 原文地址:https://www.cnblogs.com/comefuture/p/8305996.html
Copyright © 2011-2022 走看看