• css新起点


    一、字体属性:

    1.字体族科font-family  

    2.字体大小font-size 单位pt 表示尺寸

    3字体风格font-style属性:normal普通、italic斜体、oblique倾斜字体

    4.字体加粗font-weight属性:值100-900、normal 普通字体、bold加粗、bolder特粗、lighter加细

    二、文本属性

    1. Letter-spacing字母间隔属性 定义附加在字符之间的间隔数量  允许使用负数
    1. text-decoration文本修饰属性  属性值:underline下划线、overline上划线、line-through删除线、none无任何修饰
    1. text-align文本对齐  文本水平对齐方式 值:left左对齐、right右对齐、center居中、justify两端对齐

    4.text-indent文本首行缩进  可用于块级元素 p h1 等

    定义该元素第一行可以接受的缩进的数量 该值必须是一个长度或一个百分比

    5.line-height行高的属性 行的间距

    三、颜色背景属性

    1.color 定义颜色

    2.background-color 定义一个元素的背景颜色

    3.background-image 定义一个元素的背景图像

        格式:body{background-image:url(xx.jpg)}

    4.background-repeat决定一个指定的背景图像如何被重复

        属性值:repeat-x图像横向重复repeat-y图像纵向重复

    repeat图像横向纵向重复、no-repeat图像不重复 

    5.background-position设定水平和垂直方向上的位置

               属性   left     背景图象居左

                       right    背景图象居右

                       center   背景图象水平居中  垂直居中

                       top      背景图象上对齐

                       bottom   背景图象下对齐

    四、边框属性:用于设置一个元素边框的宽度样式和颜色

        边框属性         描述

             border         边框

             border-top     上边框

             border-left    左边框

             border-right   右边框

             border-bottom  下边框    

           边框样式属性值         描述

                  none             无边框

                  dotted           边框由点组成

                  dash             边框由短线组成

                  solid            边框是实线

                  double           边框是双实线

                  groove           边框是带有立体感的沟槽

                  ridge            边框成脊形

                  inset            边框内嵌一个立体边框

    outset           边框外嵌一个立体边框

    五、光标属性

    cursor:值

                      鼠标光标属性      描述

                      hand             手

                     cross-hair        交叉十字

                     text             文本选择符号

                     wait             WINDOWS的沙漏形状

                     default          默认的鼠标形状

                     help             带问号的鼠标

                     e-resize          向东的箭头

                     ne-resize         向东北的箭头

                     n-resize          向北的箭头

                     nw-resize         向西北的箭头

                     w-resize          向西的箭头

                     sw-resize         向西南的箭头

                     s-resize          向南的箭头

                     se-resize         向东南的箭头

    六、定位属性

    CSS提供两种定位方法:  

            相对定位:是指让操作的元素在相对其它的位置上进行偏移  

            绝对定位:是指让操作的元素参照原始文档进行偏移

    定位属性             描述

         position       absolute(绝对定位)  relative相对定位

         top            层距离定点纵坐标的距离

         left           层距离定点横坐标的距离

         width          层的宽度

         height         层的高度

         Z-index        决定层的先后顺序和覆盖关系 值高的覆盖值低的元素

         Clip           限定只显示剪切出来的区域 为矩形

                        只要设定两个点即可   top   left

                                             bottom  right

         overflow       当层的内容超出层所能容纳的范围时:

                         visible     层的 大小 内容会显示出来

                         hidden      隐藏超出层大小的内容

                         scrol      不管内容是否超出层的范围 都添加滚动条

                         auto        只在内容超出层的范围时才显示滚动条

         visibility    针对嵌套层的设置

                       inherit  子层继承父层的可见性

                              父层可见 子层也可见 父层不可见 子层也不可见

                       visible  无论父层可见与否子层都可见

                       hidden    无论父层可见与否子层都隐藏

    七.区块属性  

      在格式化页面对象时,css将所有的对象都放置在一个容器里面

             这个容器成为块

            区块属性              描述

              width        设定对象的宽度      

              height       设定对象的高度

              float        让文字环绕在一个元素的四周

              clear        指定在某一元素的某一边是否允许有环绕的文字

             padding       决定了究竟在边框与内容之间应该插入多少空间距离

                           top   bottom  left  right

                            设定上下左右的填充距离

              margin        设置一个元素在4个方向上与IE窗口边界或上一级元素的边界距离

                            top   bottom  left  right

                            设定上下左右的距离

    八.列表属性

                         列表属性              描述

                  list-style-type      设定引导列表项目的符号类型

    符号类型属性值

                   disc    实心圆

                   circle   空心圆

                   square    实心方块

                   decimal    在文本前加普通的阿拉伯数字

                   lower-roman   在文本前加小写罗马数字

                   upper-roman   在文本前加大写罗马数字

                   lower-alpha   在文本前加小写英文字母

                   upper-alpha   在文本前加大写英文字母

    none           不显示任何项目符号和编号

    九.滤镜属性(了解即可)

    滤镜属性 可以吧可视化的滤镜和转换效果添加到一个标准的html元素

    1.alpha滤镜---设置透明层次

    {filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,

      startx=startx,starty=starty,finishx=finishx,finishy=finishy)}

    alpha:属性是把一个目标元素与背景混合  就是一个元素的透明度

    opacity:   代表透明度水准

    finishopacity:设置渐变的透明效果  范围1---100

    style:指定透明区域的形状特征

            0 统一形状

            1 线形

            2 放射状

            3 长方形

    startx和starty代表渐变透明效果开始的X和Y坐标

    finishx和finishy代表渐变透明效果结束的X和Y坐标

    2. blur滤镜---模糊效果

      语法:{filter:bur(add=add,direction=direction,strength=strength)}

      add:它是一个参数值为   true  false 

           指定图象是否被改变成印象派的模糊效果

      derection:用来设置模糊的方向  0表示垂直向上  每45度为一个单位

                 默认值是向左270度

      strength   它代表有多少像素的宽度将受到模糊影响

                    即模糊的强度   默认是5

    3.  flipH   flipV滤镜----水平垂直翻转

    4.gray滤镜---灰度

              作用就是把一张图片变成灰度图

  • 相关阅读:
    [bug] MySQL: The user specified as a definer ('root'@'%') does not exist
    [java] Maven安装本地jar包
    [bug] Openresty:content_by_lua_file 404
    [bug] Failed building wheel for xxx
    [bug] TypeError : unsupported operand type(s) for += : 'NoneType' and 'int'
    [Python] Flask从0到1开发轻量级网页
    [bug]Flask:KeyError: 'A secret key is required to use CSRF.'
    [bug] sqlalchemy.exc.InternalError: (pymysql.err.InternalError) (1054, "Unknown column 'recevie_name' in 'field list'")
    mac os 解决Error: EMFILE: too many open files错误
    从零开始的react入门教程(一),让我们从hello world开始
  • 原文地址:https://www.cnblogs.com/ljxblog/p/5673389.html
Copyright © 2020-2023  润新知