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定义遮罩图像,该图像将覆盖投影区域。如果省略该参数值,则默认为无遮罩图像。

  • 相关阅读:
    一致Hash算法
    Ubuntu14.04上深度学习Caffe库安装指南(CUDA7.5 + opencv3.1)
    springcloud 服务调用的两种方式
    Spring Boot学习记录(二)–thymeleaf模板
    Springmvc构造RESTful详细讲解
    pring MVC过滤器-HttpPutFormContentFilter
    Spring MVC中各个filter的用法
    Spring MVC 使用拦截器 HiddenHttpMethodFilter配置Rest风格的URL
    springmvc 入门(1)
    oracle sql语言模糊查询--通配符like的使用教程
  • 原文地址:https://www.cnblogs.com/wannian/p/8249827.html
Copyright © 2011-2022 走看看