• css 属性


    --------
    |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:添加上划线

    如果要去掉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;

    --------|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:添加上划线
    如果要去掉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 leftborder-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等可以直接设置宽高

  • 相关阅读:
    领域驱动设计,让程序员心中有码(五)
    Surging1.0发布在即,.NET开发者们,你们还在等什么?
    年终总结,我为什么离开舒适区?
    领域驱动设计,让程序员心中有码(四)
    领域驱动设计,让程序员心中有码(三)
    领域驱动设计,让程序员心中有码(二)
    领域驱动设计,让程序员心中有码(一)
    传统软件企业之殇
    基于.NET框架的消息通信组件ZMQ资料汇编-总目录
    长沙IT二十年
  • 原文地址:https://www.cnblogs.com/love-8023/p/7650601.html
Copyright © 2020-2023  润新知