zoukankan      html  css  js  c++  java
  • CSS

    CSS的概述

    什么是CSS:
        Cascading Style Sheets 层叠样式表.
    CSS的作用:
        CSS主要用来修饰HTML的显示.代码复用.将页面元素与样式进行分离.

    HTML的DIV标签

    HTML中有两个块标记:

        <div></div>
        <span></span>
    “div+css”,div标签负责布局,负责结构,负责分块。css负责样式。
    ## CSS的使用 ##
    语法:
        选择器{属性1:属性值;属性2:属性值;..}
            <style>
                h2{
                    color:red;
                    font-size:100px;
                }
            </style>

    CSS的引入方法

    行内样式:
          直接在html的元素上使用style的属性编写CSS:
          <span style="color:#00FF00 ;font-size: 100px;">黑马训练营</span>
    内部样式:
          在html的<head>标签中使用<style>标签来定义CSS
            <style>
                span{
                    color:blue;
                    font-size: 200px;
                }
            </style>
    外部样式:
          将CSS定义成一个.css的文件,在html中将该文件引入到html中
          <link href="style.css" rel="stylesheet" type="text/css"/>

    选择器

         使用内部样式,外部样式来修饰,需要使用选择器,选择元素。
          - 元素选择器         div{}
          - id选择器            #id属性值{}
          - 类选择器           .class属性值{}
          - *                       *{}   选择所有的元素
    其他的选择器建议查询此网址

    css的盒子模型

         ![css盒子模型][2]
    设置盒子的外边距:margin
     - Margin-top         //上
     - Margin-right       //右
     - Margin-bottom  //下
     - Margin-left         //左
    设置盒子的内边距:padding
     - Padding-top          //上
     - Padding-right        //右
     - Padding-bottom   //下
     - Padding-left          //左
    代码演示:
          选择器{
                    border:1px solid blue;                           //边框
                    height: 600px;                                       //高度
                    background: url(../img/regist_bg.jpg);  //如何在一个声明中设置所有背景属性:
                    margin: 10px 0px;                                //外边框
                    padding: 10px 10px 10px 10px           //内边框
                }
  • 相关阅读:
    JS 利用数组拼接html字符串
    IE浏览器下读取客户端上传的文件大小
    PrintWriter out = response.getWriter() 输出中文乱码问题
    非常有用的Java程序片段
    sql之left join、right join、inner join的区别
    JAVA 数组常用技巧
    java 图片文件格式转换(多页tif转jpg 、jpg转tif)
    SQL Server 字段状态判断语句
    sql server 2008中id如何设为自增
    java基于xml配置的通用excel单表数据导入组件(五、Action处理类)
  • 原文地址:https://www.cnblogs.com/sybk/p/10004742.html
Copyright © 2011-2022 走看看