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

    一、CSS背景

    1.背景颜色

    p {background-color: gray;}

    background-color不能继承,其默认值是transparent。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。

    2.背景图像

    (1)背景图像: body {background-image: url(/Images.02.jpg); }
    (2)背景重复: background-repeat: repeat-y;
    (3)背景定位: 可通过关键字、百分数值及长度值来进行定位。

    关键字: top right使图像放置在元素内边距区的右上角根据规范: 位置关键字可以按任何顺序出现,只要保证不超过两个关键字,一个对应水平方向,一个对应垂直方向。如果只出现一个关键字,

    则认为另一个关键字是center。

    百分数值:
    假设希望用百分数值将图像在其元素中居中:

    body
    {
    background-image: url(/Images/02.jpg);
    background-position: 50% 50%;
    }

    这会导致图像的中心与元素的中心对齐。换句话说,百分比数值同时应用于元素和图像。也就是说图像中描述为50% 50%的点与元素中描述为50% 50%的点对齐。

    假设你想把图像放在左上角的位置,可以这样声明:
    body
    {
    background-image: url(/Images/02.jpg);
    background-position: 0% 0%;
    }

    长度值: 长度值解释的是背景图像距元素内边距区左上角的偏移。比如,如果设置值为50px 100px,图像的左上角将在元素内边距区左上角向右50像素、向下100像素的位置上:

    (4)背景关联
    如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。可以通过设置background-attachment属性防止这种滚动。


    二、CSS文本

    1.缩进文本(可以继承)
    通过使用text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。

    (1)使用负值

    p{text-indent: -5em;}

    不过在为text-indent设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距。

    (2)使用百分比值

    百分相对于缩进元素父元素的宽度。

    2.水平对齐

    text-align: left 、 center 、 right 、justify

    3.字间隔

    word-spacing

    4.字母间隔

    letter-spacing

    5.字符转换

    text-transform属性处理文本的大小写。这个属性有4个值:

    none 、 uppercase 、lowercase 、capitalize

    6.文本装饰

    text-decoration: none 、 underline 、 overline 、 line-through 、 blink

    7.处理空白符

    white-space:会影响到用户代理对源文档中的空格、换行和tab字符的处理。

    从某种程度上讲,默认的XHTML处理已经完成了空白符处理:它会把所有空白符合并为一个空格。

    (1)pre

    如果white-space属性的值为pre,浏览器将注意额外的空格,甚至回车。

    (2)nowrap

    它会防止元素中的文本换行,除非使用了一个br元素。

    三、CSS字体

    1.CSS字体系列

    在CSS中,有两种不同类型的字体系列名称:
    通用字体系列:拥有相似外观的字体系统组合(Serif、Sans-serif、Monospace、Cursive、Fantasy)
    特定字体系列:具体的字体系列

    2.字体风格

    font-style属性最常用于倾斜文本。

    该属性有三个值:normal 、italic 、oblique

    3.字体变形
    font-variant属性可以设定小型大写字母。

    4.字体加粗
    font-weight设置文本的粗细
    关键字100~900为字体指定了9级加粗度。数字400等价于normal,而700等价于bold。

    5.字体大小

    如果没有规定字体大小,普通文本的默认大小是16像素(16px = 1em)。

    (1)使用em来设置字体大小

    W3C推荐使用em尺寸单位。1em等于当前的字体尺寸。如果一个元素的font-size为16像素,那么对于该元素,1em就等于16像素。在设置字体大小时,em的值会相对于父元素的字体大小改变。

    可以使用下面这个公式将像素转换为em: pixels / 16 = em
    (注:16等于父元素的默认字体大小,假设父元素的font-size为20px,那么公式需改为: pixels / 20 = em)。

    (2)结合使用百分比和em

    body{ font-size: 100%; }
    h1{ font-size: 3.75em; }


    四、CSS表格

    1.表格边框 table ,th, td
    {
    border: 1px solid blue;
    }

    请注意,上例中的表格具有两线条边框。这是由于table、th、td元素都有独立的边框。如果需要把表格显示为单线条边框,请使用border-collapse属性。

    2.折叠边框

    table
    {
    border-collapse: collapse;
    }

    3.border-spacing

    该属性指定分隔边框模型中单元格之间的距离。在指定的两个长度值中,第一个是水平间隔,第二个是垂直间隔。除非border-collapse被设置为separate,否则将忽略这个属性。

    4.caption-side 规定表格标题的放置方式

    caption
    {
    caption-side: bottom;
    }

    5.empty-cells 规定空单元格的处理方式

    table
    {
    empty-cells: hide;
    }

  • 相关阅读:
    python学习===从一个数中分解出每个数字
    python学习===复制list
    Jmeter===测试案例参考
    Jmeter==HTTP信息头管理器的作用
    python实战===使用随机的163账号发送邮件
    python实战===实现读取txt每一行的操作,账号密码
    python实战===生成随机数
    python实战===输入密码以******的形式在cmd中展示
    python实战===使用smtp发送邮件的源代码,解决554错误码的问题,更新版!
    python实战===使用smtp发送邮件的源代码,解决554错误码的问题
  • 原文地址:https://www.cnblogs.com/JustYong/p/5045998.html
Copyright © 2011-2022 走看看