zoukankan      html  css  js  c++  java
  • CSS样式学习-2

    一、大小

    ①width宽;height高。

    !注释:<a><span>无法使用该方法调整大小

    控制元素的大小:宽高。下例是宽高分别100像素的div标签。

    <div style="100px; height:200px;">
    </div>

    二背景

    background-color背景色

    background-image背景图

    background-size大小(auto自动。在repeat-no情况下over宽高比不变,超出部分隐藏。contain宽高比不变,缩小至容器放下,可能留有空白)

    background-repeat图片平铺方式(x轴平铺repeat-x;y轴平铺repeat-y;repeat-no不平铺。)

    background-position图片位置(上top右right下bottom左left居中center)

    background-attachment设置图片是否滚动

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>

    <style type="text/css">

    #a{ height: 1000px;

        1000px;

        background-image:url(1.jpg);

        background-repeat: no-repeat;

        background-size:contain;

        background-position:center;}

    </style>

    </head>

    <body>
        <div id="a"></div>
    </body>
    </html>

     三、字体

    font-family设置字体

    font-size字体大小12px;16px;

    font-style(normal正常的,italic斜体,oblique倾斜)

    font-weight:bold加粗

    text-decoration(underline下划线,overline上划线,line-through删除线,none没有,作用删除超链接线)

    color颜色

    四、对齐方式

    text-align水平对齐(center把文本排到中间,left靠左对齐,right靠右对齐)

    line-height行高

    vertiacl-align垂直对齐方式(需要配合行高使用)

    text-indent缩进(单位像素,默认情况下15px为一个汉字字符大小,需按照字体大小设置)

    五、边界边框

    margin外边距

    padding内边距

    border边框。属性:大小、实虚线、颜色。例如border: 1px solid #fff;

    可以使用单独方向,例如maigin-top:0;

    六、列表方块

    list-style:none不使用前面的点,inside点在里面,outside点在外面。

    list-style-image将序号变更为图片。

    七、格式布局

    ①position位置定位

       fixed固定位置,相对浏览器

       absolute绝对定位,相对父级

       relative相对定位,对于原来的位置

    ②top、right、bottom、left距离上右下左的位置

    ③float流、流动,left向左流动,right向右流动

    ④clear:both清流、

    ⑤z-index分层

    八、其他

    ①display隐藏属性。none隐藏、block显示。不占位置。可以使用display:inline-block改变span、a标签的大小

    ②visibility隐藏hidden。隐藏后占位置

    ③overflow超出隐藏hidden。

    ④透明opacity:0.5;-moz-opacity:0.5;filter:alpha(opcaity=50)

    ⑤圆角border-radius:5px;

    ⑥box-shadow:20px 20px 10px white;(左、下、隐约的大小、颜色)

    ⑦box-reflect:文字图片倒影

    1、方向above上方,below下方,left左侧,right右侧

    2、offset偏移距离,百分比定义。默认值为0

    3、mask-box-image定义遮罩图像,该图像将覆盖投影区域。如果省略该参数值,则默认为无遮罩图像。

  • 相关阅读:
    QT学习——dialog、widget、mainwindow的区别和选择
    剑指offer——二叉树的深度
    位运算实现加减乘除四则运算
    剑指offer——求两个整数和
    C++常用设计模式
    从编程实现角度学习 Faster R-CNN(附极简实现)
    剑指offer——最小的k个数
    剑指offer——对称二叉树
    java 定时器
    rocketmq consumer接收到的MessageExt中各个字段的说明
  • 原文地址:https://www.cnblogs.com/wannian/p/8249827.html
Copyright © 2011-2022 走看看