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           //内边框
                }
  • 相关阅读:
    重打技术征集系统第七稿开发第1、2天
    关于centos7右上角网络图标消失的解决办法
    记录一下hbase踩的坑
    在jsp中,单选按钮的点击事件(点击隐藏或显示输入框)
    input中禁止输入特殊字符
    《软件方法》阅读笔记——1
    随手快递app开发第十七天
    Codeforces Round #284 (Div. 1) B. Name That Tune(最大流)
    hihocoder 1310岛屿(dfs,一个搜索技巧)
    Codeforces Round #294 (Div. 2) E. A and B and Lecture Rooms(lca+思维,树上寻找与给定两个点距离相等的点的个数)
  • 原文地址:https://www.cnblogs.com/sybk/p/10004742.html
Copyright © 2011-2022 走看看