• CSS----学习2


    CSS2属性

    文本

    1 水平对齐方式

    text-align:left/right/center
    也可以让img、input等有水平方向的对齐方式

    2 垂直对齐方式

    vertical-align:top(居顶部)/bottom(居底部)/middle(居中)
    多用于table

    3 设置行高

    line-height:50px/10%;
    如果让文本垂直居中与容器,将line-height的值设置跟容器的高度一样。只适用于单行文本

    4 首行缩进

    text-indent:50px;

    5 内容自动换行(css3)

    word-break:break-all;---允许在单词内部进行换行
    word-break:keep-all;只在空格处或连字符(-)处换行

    6 词间距

    word-spacing:10px;单词与单词之间的间隙为10px,只要有空格出现就认为是一个词的开始

    7 字间距

    letter-spacing:5px;设置字(字符)之间的间隙5px

    8 设置字体颜色

    color:颜色;

    9 设置大小字母的转换

    text-transform:none/capitalize/uppercase/lowercase;
    capitalize:将每个单词的第一个字母大写
    uppercase:将单词所有的字母都转换成大写
    lowercase:将单词所有的字母都转换成小写

    10 文本修饰

    text-decoration:none/underline/line-through/overline;
    none:不添加或者去掉文本修饰
    underline:添加下划线
    line-through:添加删除线
    overline:添加上划线

    11 如果要去掉a标签默认的下划线,设置

    text-decoration:none;

    字体的属性

    1 设置字体大小

    font-size:50px;

    2 字体风格

    font-style:italic(斜体)

    3 字体加粗

    font-weight:bold;

    4 设置字体类型

    font-family:"黑体"

    5 设置小型的大写字母

    font-variant:small-caps;

    边框属性(border)

    border-5px;设置边框的粗细
    border-color:red;设置边框的颜色
    border-style:solid(实线)/dotted(点状线)/dashed(块状线);设置边框样式

      缩写:

    border: 粗细 样式 颜色;
    如果给某一边加边框:top right bottom left
    border-top-5px;
    border-top-color:red;
    border-top-style:solid;
    缩写:
    border-top: 粗细 样式 颜色;
    
    

    容器宽高属性(width/height)

    300px/20%;
    height:300px/20%;

    -----补充----

    常见的块级元素:div ul li ol dt dd hn p table form...
    块级元素的特点:可以自动换行、可以直接设置宽高
    常见的行内(内联)元素:span a b i s u select option...
    内联元素的特点:对宽高没有直接作用、不会自动换行
    常见的空元素:link meta br hr input img...
    空元素的特点:没有内容 在开始标签中闭合,input、img、hr等可以直接设置宽高
    max-500px/50%;设置容器的最大宽度
    min-500px/50%;设置容器的最小宽度
    max-height:100px/10%;设置容器的最大高度
    min-height:100px/10%;设置容器的最小高度
    五 显示(display)
    display:none/block/inline/inline-block/line-table/table
    none:设置元素隐藏
    block:以块级元素显示,设置行内元素以块级元素显示
    inline:以行内元素显示,设置块级元素以行内元素显示
    inline-block:行内元素的宽高都起作用,但是不会换行显示
    table:以表格的方式来显示
    inline-table:将行内元素作为表格的方式来显示,而且不会换行---多用于表格(table)同行显示

    六 CSS的注释

    /* 注释内容 */

    七 背景(background)

    background-color:颜色;设置容器的背景色
    background-image:url("相对路径");设置容器的背景图
    background-repeat:repeat/no-repeat/repeat-x/repeat-y;设置背景以那冲方式重复显示
    repeat:重复显示,默认值
    no-repeat:不重复显示
    repeat-x:横向重复显示
    repeat-y:纵向重复显示
    background-position:水平方向的值 垂直方向的值;如果只写一个方向,另外一个方向默认为center
    水平方向的值:left right center 50px 10%
    垂直方向的值:top bottom center 50px 10%
    默认的为background-position: left top;起始位置为容器的左上角。
    background-attachment:设置图片是否随着滚动条滚动,一般都用于body
    scroll:滚动
    fixed:固定
    默认为scroll
    缩写:background: color url("") repeat attachment postion;
  • 相关阅读:
    在SQLite中使用索引优化查询速度
    SQLite支持的SQL数据操作
    left (outer) join , right (outer) join, full (outer) join, (inner) join, cross join 区别
    深入理解Android内存管理原理(六)
    Merge Sorted Array
    Sort Colors
    Construct Binary Tree from Preorder and Inorder Traversal
    Binary Tree Postorder Traversal
    Symmetric Tree
    Rotate Image
  • 原文地址:https://www.cnblogs.com/liaohongwei/p/7018730.html
Copyright © 2020-2023  润新知