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                 拉伸填充
     
     
     
  • 相关阅读:
    Token ,Cookie和Session的区别
    极致Web性能 —— SPA性能指南
    关于前端数据&逻辑的思考
    移动端Retina屏boder 1px显示为2px或3px的解决方法
    Java连载8-基本数据类型2
    HTML连载25-通配符选择器&选择器综合练习
    Python连载25-函数tell&write&writeline$&持久化
    Python连载24-函数list&read&seek
    Java连载7-变量&数据类型
    HTML连载24-属性选择器(下)
  • 原文地址:https://www.cnblogs.com/Equilibrium/p/12106180.html
Copyright © 2011-2022 走看看