zoukankan      html  css  js  c++  java
  • css层叠样式表

    css的三种声明方式
        1、行内样式
            通过每个标签都有的style属性
            <div style="color:red;">黄卫星说没有内容</div>
        2、内联样式
            通过在head里写style标签,style标签里写样式
            <style>
                div {
                    color:gold;
                }
                
            </style>
        3、外联样式
            通过link标签来引入css代码
            <link rel="stylesheet" type="text/css" href="1.css" />
        优先级:
            网页加载顺序决定优先级
            就近原则

     伪类选择器(要按下面的顺序避免出错)
                a:link {
                    color:red;
                }
                a:visited {
                    color:pink;
                }
                a:hover {
                    color:black;
                }
                a:active {
                    color:blue;
                }

    属性选择器
                input [ type=text ]
      

    单位
        px            像素
        %            百分比
        em            根据父级元素的尺寸
        rem            根据html的尺寸,例:2rem;就是两个字体的大小;
        vw            窗口宽度的百分比
        vh            窗口高度的百分比

    【注】css的优先级对比,权重比精确定位更优先;

    文本修饰:
                  text-indent        文本缩进;例子: text-indent:2rem;

                 text-shadow        文本阴影
                                            text-shadow:10px 10px 10px red;
                                                  1、水平偏移量    可以为负
                                                  2、垂直偏移量    可以为负
                                                  3、阴影模糊值    不可以为负
                                                  4、阴影部分颜色

      text-overflow    文本超出的显示方式
            clip        超出部分截断
            ellipsis    超出时显示...
            【注】    要想让他生效的话需要设置
                    overflow:hidden;
                    white-space:nowrap;
                    还要给元素设置宽度

       line-height        行高   【注意】当行高与元素高度一样时会使文本垂直居中

       vertical-align    对齐方式    经常用于设置图片
            top            顶端对齐
            middle        中间对齐
            bottom        底端对齐

    背景
        background-color        背景颜色
        background-image        背景图片  background-image:url(./image/xxxx);
        background-attachment    背景图片是否跟着滚动条滚动
            fixed    相对于窗口固定 (这个功能好像经常看到)
            scroll    随滚动而滚动
        background-repeat        背景图片是否平铺
        background-position        背景图片定位
            left right top bottom 百分比

    【注】css的功能真的很强大好用(完)

  • 相关阅读:
    《梦断代码》随笔第1篇
    四则运算3
    1、软件工程结对开发之求一维数组中连续最大子数组之和
    四则运算2单元测试
    《梦断代码》随笔第0篇
    四则运算2完整版
    四则运算2设计思想
    软件工程第一个程序
    软件工程阅读计划
    电梯调度之需求分析
  • 原文地址:https://www.cnblogs.com/pyspang/p/7241428.html
Copyright © 2011-2022 走看看