zoukankan      html  css  js  c++  java
  • css核心属性<文本声明、列表声明、背景声明>

    CSS核心属性

    一、CSS属性组成和作用

    属性:属性值

    1)每个css样式都必须由两部分组成:选择符(Selector)和声明(Decleration)

    注:声明又包括属性(Properyt)和属性值(Value)

    2)css属性:属性是指定选择符具有的属性,他是css的核心,css2共有150多个属性;

    3)css属性值:属性值包括法定属性值和常规的数值加单位或颜色值(colorValue);如(25px)。

    div{400px;}

    二、CSS核心属性

    A、关于文本的css声明

    1、文本大小:{font-size:value;}

      例:div{font-size:12px/14px;}


    说明:

    1) 属性值为数值型时,必须给属性值加单位,属性值为0时除外。
    2)单位还可以是pt, 9pt=12px;

    3)为了减小系统间的字体显示差异,IE Netscape Mozilla的浏览器制作商于1999年召开会议,共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下,1em=16px,0.75em=12px;

    4)使用绝对大小关键字
    xx-small   =9px
    x-small    =11px
    small      =13px
    medium     =16px
    large      =19px
    x-large    =23px
    xx-large   =27px

     

    2、文本颜色:{color:颜色值;}

    说明:

    用十六进制表示颜色值:

    0  1  2  3  4   5  6  7  8  9

    0  1  2  3  4   5  6  7  8  9  A  B  C  D  E  F

    颜色模式:光色模式

      R      G      B

    FF      00     00

    颜色值的缩写:

    当表示三原色的三组数字同时相同时,可以缩写为三位;

    当用十六进制表示颜色值时,需要在颜色值前加“#”

    #  fa   00    00

     

    3、文本字体:{font-family:字体1,字体2,字体3;}

    说明:浏览器首先会寻找字体1、如存在就使用改字体来显示内容,如在字体1不存在的情况下,则会寻找字体2,如字体2也不存在,按字体3显示内容,如果字体3 也不存在;则按系统默认字体显示;

    当字体是中文字体时,需加双引号;

    当英文字体中有空格时,需加双引号如(“Times New Roman”)

    当英文字体只有一个单词组成是不加双引号;如:(Arial);

    Windows中文版本操作系统下,中文默认字体为宋体或者新宋体,英文字体默认为Arial.

    4、加粗:{font-weight:bolder(更粗的)/bold(加粗)/normal(常规)/100—900;}

    说明:在css规范中,把字体的粗细分为9个等级,分别为100——900,其中100对应最轻的字体变形,而900对应最重的字体变形,

    一般

    500常规字体

    600-900加粗字体

    5、倾斜:font-style:italic(倾斜度小)/oblique(倾斜度大)/normal(取消倾斜,常规显示);

    说明:

     1)italic和oblique都表示倾斜,不过oblique的幅度要大一点。但一般浏览器对它们的区分不是很明显。


    6、水平对齐方式{text-align:left/right/center/justify(两端对齐中文不起作用);}

     

    7、垂直对齐方式{vertical-align:top/bottom/middle;}

    8、行高{line-height:normal/value;}

    说明:

    1)当单行文本的行高等于容器高时,可实现单行文本在容器中垂直方向居中对齐;

    2)   当单行文本的行高小于容器高时,可实现单行文本在容器中垂直中齐以上任意位置的定位;

    3)   当单行文本的行高大于容器高时,可实现单行文本在容器中垂直中齐以下任意位置的定位。(IE6及以下版本存在浏览器兼容问题)

    倍行高:{line-height:2;} 2倍 ,{line-height:1.5;}1.5倍;

    注:当使用倍行高为单位时,不加PX;

     

    *文字属性简写:font:12px/1.5em "宋体";

    font属性的简写:

    说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)

    顺序: font-style | font-variant(小体大写字母) | font-weight | font-size / line-height | font-family

    (1)简写时 , font-size和line-height只能通过斜杠/组成一个值,不能分开写。

    (2) 顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight , font-style , 以及font-varient , 他们会使用缺省值。

     

    9、文本修饰:text-decoration:none/underline/overline/line-through/blink.(高版本浏览器不支持blink属性)

    说明:

    none:没有修饰

    underline:添加下划线

    overline:添加上划线

    line-through:添加删除线

    blink:闪烁

    10、border:3px solid red;

          边框border:线型(solid/dashed/dotted/double)   粗细(数值+单位) 颜色;

            右边框border-right:线形(solid/dashed/dotted/double)     粗细(数值+单位)         颜色;

            左边框 border-left:线形(solid/dashed/dotted/double)     粗细(数值+单位)         颜色;

           上边框 border-top:线形(solid/dashed/dotted/double)     粗细(数值+单位)         颜色;

           下边框 border-bottom:线形(solid/dashed/dotted/double)     粗细(数值+单位)         颜色;

    solid:实线,dashed:虚线,dotted:点状线,double:双线,

    11、首行缩进:{text-indent:value;}
    说明:

    1)text-indent可以取负值;

    2)text-indent属性只对第一行起作用。

     

    12、字间距{letter-spacing:value;}控制英文字母和汉字的字距。(英文字母和字母)


    13、词间距{word-spacing:value;}控制英文单词词距。(通用于英文词和词之间的间距)

    14、文本流控制{layout-flow:horizontal/vertical-ideographic;}(只支持IE浏览器) 
    说明:

    1)horizontal:自左向右
    2)vertical-ideographic:自上而下

     

    B、关于列表的css声明

    1、定义列表符号样式:

    list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号);

    2、使用图片作为列表符号:

    list-style-image:url(所使用图片的路径及全称);

    3、定义列表符号的位置:

    list-style-position:outside(外边)/inside(里边);

    list-style:none;去掉列表符号

    C、关于背景的css声明

    1、背景颜色

    语法:选择符{}

     

    2、背景图片的设置

    语法:background-image:url(背景图片的路径及全称);

    说明:

    网页上有两种图片形式:插入图片、背景图;

    插入图片:属于网页内容,也就是结构。

    背景图:属于网页的表现,背景图上可以显示文字、插入图片、表格等。

    3、背景图片的显示原则

            1)容器尺寸等于图片尺寸,背景图片正好显示在容器中;

            2)容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满元素;

            3)容器尺寸小于图片尺寸,只显示元素范围以内的背景图。

     

    4、背景图片平铺属性

    语法:选择符{background-repeat:no-repeat/repeat/repeat-x/repeat-y }

    no-repeat:不平铺

    repeat:平铺

    repeat-x:横向平铺

    repeat-y :纵向平铺

     

    5、背景图的固定
    语法:选择符{background-attachment:scroll(滚动)/fixed(固定);}


    6、背景图片的位置
    语法:选择符{background-position:left/center/right/数值     top/center/bottom/数值;}

    水平方向上的对齐方式(left/center/right)或值    垂直方向上的对齐方式(top/center/bottom)或值

    background-position:值1    值2;

    两个值 :第一个值表示水平位置的值,第二个值:表示垂直的位置。

    当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。

    说明:向右方向,向下方向是负值

     

    7、背景属性的缩写语法:background:属性值1   属性值2   属性值3;

    背景缩写:background:url(背景图片的路径及全称) no-repeat center top;

    6、网页上常用的图片格式(压缩图片)

    1)jpg:有损压缩格式,靠损失图片本身的质量来减小图片的体积,适用于颜色丰富的图像;(像素点组成的,像素点越多会越清晰 )

    2)gif:有损压缩格式,靠损失图片的色彩数量来减小图片的体积,支持透明,支持动画,适用于颜色数量较少的图像;

    3)png:有损压缩格式,损失图片的色彩数量来减小图片的体积,支持透明,不支持动画,是fireworks的 源文件格式,适用于颜色数量较少的图像;

     

    三、浮动属性

    语法:float:none/left/right;

     

  • 相关阅读:
    9.11 eventbus
    9.10,,,实现new instanceof apply call 高阶函数,偏函数,柯里化
    9.9 promise实现 写完了传到gitee上面了,这里这个不完整
    9.5cors配置代码
    9.5 jsonp 实现
    9.5 http tcp https总结
    9.3 es6 class一部分 and es5 class 发布订阅
    8.30 cookie session token jwt
    8.30vue响应式原理
    warning: LF will be replaced by CRLF in renard-wx/project.config.json. The file will have its original line endings in your working directory
  • 原文地址:https://www.cnblogs.com/liubeiblog/p/5318012.html
Copyright © 2011-2022 走看看