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

    CSS文本样式

    • text-align:设置文本的对齐方式

    取值:

    left 向左对齐

    right:向右对齐

    center:居中对齐

    • text-indent:设置文本的首行缩进

        例如,字体设为12px,首行缩进另个字,24px。

    • text-decoration:设置文本的装饰线

            取值:

            none 不设置文本装饰线

            underline:设置下划线

            overline:上划线

            line-through:中划线

    • text-transform:(主要应用于英文文本)

        取值:

    capitalize:将首字母转换大写

    uppercase:将所有的字母转换大写

    lowercase:将所有的字母转化小写

    • letter-spacing:如果是汉字,设置字与字之间的间距

                    如果是英文文本,设置,字母与字母的间距

    • word-spacing:设置词间距(主要应用英文)
    • line-height:设置文本的行高

    结构代码:

    示例2:

    样式代码:

    结构代码:

    CSS列表样式

    list-style:设置列表的符号类型

    取值:

    不设置符号

    none

    无序列表的项目符号:

    square:实心方块

    circle:空心原点

    disc 实心原点

    有序列表的项目符号

    decimal                阿拉伯数字

    lower-alpha            小写字母

    upper-alpha            大写字母

    lower-roman        小写罗马数字

    upper-roman        大写罗马数字

    list-style-position:项目符号的位置

            inside(在li标签的内部)

            outside(在li标签的外部)

    list-style-image:将项目符号用背景图片表示

            书写规则:list-style-image:url(背景图片的路径URL)

    简写形式:list-style:square inside url(arrow.gif);

    示例1:

    样式代码:

    结构代码:

    CSS背景样式

    background-color:设置背景颜色:red #ff0000,rgb(100,120,200)

    background-image:url(背景图片的路径url)

    background-repeat:

    no-repeat:不平铺

    repeat:x轴和y轴平铺

    repeat-x:在x轴上平铺

    repeat-y:在y轴上平铺

    background-position:设置图片的位置;

        数值表示法,x px,ypx 只写其中一种,表示另外一个方向上未设置的值,跟这已经设置的这个相同。

    单词表示法:

        x方向:left center right,

        y轴方向:top(顶部对齐) center(居中) bottom(底部)

        百分比表示法:50%,50%

    background-position:left center;

    设置图片x轴向左对齐

    设置图片y轴向居中对齐

    代码:

  • 相关阅读:
    Mac之雕虫小技
    Python 合并两个字典(Dictionary)中相同key的value的方法
    linux只保留最新n个文件
    自动化测试笔记
    python实现一个判断时间的装饰,并抛出自定义异常
    python在字典列表中计算具有特定键的元素
    canvas游戏
    教为学:Oracle 11g OCP之路(七):数据结构
    教为学:Oracle 11g OCP之路(八):用户权限管理
    ADO.NET入门教程(六) 谈谈Command对象与数据检索
  • 原文地址:https://www.cnblogs.com/nyxd/p/5353390.html
Copyright © 2011-2022 走看看