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           //内边框
                }
  • 相关阅读:
    vue脚手架引入MD5加密函数
    mysql 使用 MD5函数 校验账号密码
    iview引用自定义的图标
    vue 生命周期钩子
    mysql: show processlist 详解
    vue脚手架中动态引用图片的办法
    jsp 获取后端配置文件.properties的某个配置内容
    mybatis update 返回值
    python_判断缩写
    python_深拷贝与浅拷贝
  • 原文地址:https://www.cnblogs.com/sybk/p/10004742.html
Copyright © 2011-2022 走看看