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           //内边框
            }
posted @ 2018-05-27 23:47  苏亿  阅读(112)  评论(0)  编辑  收藏  举报