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的功能真的很强大好用(完)

  • 相关阅读:
    LeetCode OJ 107. Binary Tree Level Order Traversal II
    LeetCode OJ 116. Populating Next Right Pointers in Each Node
    LeetCode OJ 108. Convert Sorted Array to Binary Search Tree
    LeetCode OJ 105. Construct Binary Tree from Preorder and Inorder Traversal
    LeetCode OJ 98. Validate Binary Search Tree
    老程序员解Bug的通用套路
    转载 四年努力,梦归阿里,和大家聊聊成长感悟
    转载面试感悟----一名3年工作经验的程序员应该具备的技能
    Web Service和Servlet的区别
    关于spring xml文件中的xmlns,xsi:schemaLocation
  • 原文地址:https://www.cnblogs.com/pyspang/p/7241428.html
Copyright © 2011-2022 走看看