zoukankan      html  css  js  c++  java
  • CSS样式

    一、CSS样式的写法
    样式写法一:(写在head里面)
        <head>
                <style type="text/css">
                    div{    
                            background(1.jpg); 
                          }
                </style>
        </head>
        <body>
            <div></div>
        </body>
    样式写法二:(链接一个css文件)
        mycss.css
        内容:
        div{    
                            background(1.jpg); 
                          }
     
        调用css:
        <head>
                <link rel="stylesheet" type="text/css" href="css/mycss.css">
        </head>
        <body>
                <div></div>
        </body>
                    link   链接
                    rel    链接到styleshee
                    type    文本类型
                    href     文件路径
     
    样式写法三:(写在标签里面)
        <head>
                <style type="text/css">
                    div{     
                          }
                </style>
        </head>
        <body>
                <div ></div>
        </body>
     
    二、标签选择器
    • id
                   #id名称(对唯一一个id名字进行样式编辑)
    • class
                    .class名称(同上)
    (注:class=“ a  b”     一个标签拥有两个样式(a和b),只有class可以使用空格,id用不了)
    •  标签名直接使用  
    • .a,.b
                    两个标签使用同一个样式,样式之间用“,”隔开。
    三、样式的层叠优先级
            id>class>标签
     
     
     
     
     
    四、伪类选择器
    • a:link            超链接
    • a:visited       超链接点击后的样式
    • a:active        长按鼠标时的动作
    • a:hover         鼠标悬浮在超链接上发生的动作
     
    五、表格设置
    • 边框——border
      •  border:1 px   solid   red;
     
    • 圆弧——border-radius
      •  border-radius:50%(圆)
     
    • 表格边框间距——border-spacing
      • border-spacing:100px;==cellspacing;
     
    • 表格边框合并——border-collapse
      • border-collapse:collapse;
    • 宽和高
      • width,height(height,不能使用百分比)
    • 文字设置
      • font-size
    • 颜色
      • color
    • 字体
      • family
    • 水平方向:text-align:left,center,right
    • 垂直方向:vertical-align:bottom,top,middle
    • 背景图片:
      • 设置图片:background-image:url(img/1.jpg)
    • background-repeat
      • repeat             默认重复
      • no-repeat       不重复
      • repeat-x         横向重复
      • repeat-y         纵向重复
    • background-size
      • cover               覆盖背景区域
      • contion                 拉伸填充
     
     
     
  • 相关阅读:
    sublime text2 中Emmet常用的技巧 和快捷键
    JS 常用函数
    javascript 事件模型 及 event对象属性总结
    Plant Ecology Journal Club 分享主题和文献列表, 1-7, 2018年秋
    Perl FASTA文件拆分合并
    筛选特定ID的条目信息
    计算可塑性指数RDPI
    【文献摘抄】2018年9月
    重金属在超富集植物与作物间作系统中的植物吸收和富集
    【R统计】主成分分析2——主成分回归
  • 原文地址:https://www.cnblogs.com/Equilibrium/p/12106180.html
Copyright © 2011-2022 走看看