CSS

作者: 钱塘 | 来源:发表于2017-08-21 12:49 被阅读7次
    语法:
    selector { property:value}
    

    引用方式

    外部样式表
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    
    内部样式表
    <head>
    <style>
        hr {
            color:sienna;
            }
        p {
            margin-left:20px;
            }
        body {
            background-image:url("images/back40.gif"
            )
    </style>
    </head>
    
    内联样式
    <p style="color:sienna;margin-left:20px">这是一个段落。</p>
    

    常用选择器

    
    class           .
    id              #
    
    分组选择器:
    h1,h2,p
    
    嵌套选择器:
    h1 h2 p
    

    组合选择器

    后代选择器     div p
    子元素选择器   div>p
    相邻兄弟选择器 div+p
    后续兄弟选择器 div~p
    

    伪类

    a:hover 把鼠标放上时变化
    
    背景图像
    body {background-image:url('paper.gif');}
    
    文本的对齐方式
    h1 {text-align:center;}
    p.date {text-align:right;}
    p.main {text-align:justify;}
    

    盒子模型

    margin 外边距
    border 边框
    padding 内边距
    content 内容
    div {
        width: 300px;
        border: 25px solid green;
        padding: 25px;
        margin: 25px;
    }
    
    margin padding 简写
    margin: 上 右 下 左
    

    尺寸属性

    line-height   设置行高
    

    隐藏

    h1.hidden {display:none;}
    

    定位

    fixed      相对浏览器固定
    relative   相对其正常位置
    absolute   相对其父级元素
    

    浮动

    float:left  脱离文档流浮起来
    

    SHU标指针

    cursor:pointer
    

    相关文章

      网友评论

          本文标题:CSS

          本文链接:https://www.haomeiwen.com/subject/olscdxtx.html