1、DIV相关的技术

　　（1）DIV是一个html标签，一个块级元素（单独显示一行）。它单独使用没有任何意义，必须结合CSS来使用，主要用于页面的布局；

　　（2）Span是一个html标签，一个内联元素（显示一行）。它单独使用没有任何意义，必须结合CSS来使用，主要用于对括起来的内容进行样式的修饰；

2、CSS的作用

　　（1）HTML：它是整个网站的骨架；

　　（2）CSS：它是对整个网站的骨架的内容进行美化（修饰）。

3、CSS如何使用

　　（1）语法和规范

　　（2）选择器{

　　　　属性名1:属性值1;

　　　　属性名2:属性值2;

　　　　属性名3:属性值3;

　　　　}

　　（3）CSS基本选择器

　　　　①元素选择器：所有相同

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.      <head>
  5.          <meta charset="UTF-8">
  6.          <title>元素选择器</title>
  7.          <style>
  8.              div{
  9.                  font-size: 30px;
  10.                  color: pink;
  11.              }
  12.          </style>
  13.      </head>
  14.      <div>元</div>
  15.      <div>素</div>
  16.      <div>选</div>
  17.      <div>择</div>
  18.      <div>器</div>
  19.  
  20.      <body>
  21.      </body>
  22.  
  23.  </html>

　　运行结果：

　　

　　　　②类选择器：部分相同

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.      <head>
  5.          <meta charset="UTF-8">
  6.          <title>类选择器</title>
  7.          <style>
  8.              .div2 {
  9.                  font-size: 30px;
  10.                  color: pink;
  11.              }
  12.          </style>
  13.      </head>
  14.      <div class="div2">类</div>
  15.      <div>选</div>
  16.      <div class="div2">择</div>
  17.      <div>器</div>
  18.  
  19.      <body>
  20.      </body>
  21.  
  22.  </html>

　　运行结果：

　　

　　　　③id选择器：单个

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.      <head>
  5.          <meta charset="UTF-8">
  6.          <title>id选择器</title>
  7.          <style>
  8.              #div5 {
  9.                  font-size: 30px;
  10.                  color: pink;
  11.              }
  12.          </style>
  13.      </head>
  14.  
  15.      <body>
  16.          <div>id</div>
  17.          <div>选</div>
  18.          <div>择</div>
  19.          <div id="div5">器</div>
  20.      </body>
  21.  
  22.  </html>

　　运行结果：

　　

　　（4）CSS其他选择器

　　　　①层级选择器

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.      <head>
  5.          <meta charset="UTF-8">
  6.          <title>层级选择器</title>
  7.          <style>
  8.              div p {
  9.                  font-size: 30px;
  10.                  color: pink;
  11.              }
  12.          </style>
  13.      </head>
  14.  
  15.      <body>
  16.          <div>层</div>
  17.          <div>级</div>
  18.          <div>
  19.              <p>选</p>
  20.          </div>
  21.          <div>择</div>
  22.          <div>器</div>
  23.      </body>
  24.  
  25.  </html>

　　运行结果：

　　

　　　　②属性选择器

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.      <head>
  5.          <meta charset="UTF-8">
  6.          <title>属性选择器</title>
  7.          <style>
  8.              input[type='text']{
  9.                  background: red;
  10.              }
  11.  
  12.              input[type='password']{
  13.                  background: blue;
  14.              }
  15.          </style>
  16.      </head>
  17.  
  18.      <body>
  19.          用户名：<input type="text" name="username" /><br />
  20.           密码：<input type="password" name="password" />
  21.      </body>
  22.  
  23.  </html>

　　运行结果：

　　

4、CSS引入方式

　　（1）内部引入

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.      <head>
  5.          <meta charset="UTF-8">
  6.          <title>内部引入元素选择器</title>
  7.          <style type="text/css">
  8.              div {
  9.                  font-size: 30px;
  10.                  color: pink;
  11.              }
  12.          </style>
  13.      </head>
  14.      <div>元</div>
  15.      <div>素</div>
  16.      <div>选</div>
  17.      <div>择</div>
  18.      <div>器</div>
  19.  
  20.      <body>
  21.      </body>
  22.  
  23.  </html>

　　运行结果：

　　

　　（2）行内引入

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.      <head>
  5.          <meta charset="UTF-8">
  6.          <title>行内引入元素选择器</title>
  7.          <style type="text/css">
  8.              div {
  9.                  font-size: 30px;
  10.                  color: pink;
  11.              }
  12.          </style>
  13.      </head>
  14.      <div>元</div>
  15.      <div>素</div>
  16.      <div>选</div>
  17.      <div>择</div>
  18.      <!--就近原则，谁近谁生效-->
  19.      <div style="font-size: 20px;color: blue;">器</div>
  20.  
  21.      <body>
  22.      </body>
  23.  
  24.  </html>

　　运行结果：

　　

　　（3）外部引入　

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.      <head>
  5.          <meta charset="UTF-8">
  6.          <title>外部引入元素选择器</title>
  7.          <link rel="stylesheet" href="style.css" type="text/css">
  8.  
  9.          <body>
  10.              <div>元</div>
  11.              <div>素</div>
  12.              <div>选</div>
  13.              <div>择</div>
  14.              <div>器</div>
  15.          </body>
  16.  
  17.  </html>

　　在同一目录，新建style.css

  1.  div {
  2.      font-size: 30px;
  3.      color: pink;
  4.  }

　　运行结果：

　　

5、CSS浮动

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.      <head>
  5.          <meta charset="UTF-8">
  6.          <title>CSS浮动</title>
  7.          <style>
  8.              #one {
  9.                  border: 1px solid red;
  10.                  width: 300px;
  11.                  height: 150px;
  12.                  float: left;
  13.              }
  14.  
  15.              #two {
  16.                  border: 1px solid black;
  17.                  width: 300px;
  18.                  height: 150px;
  19.              }
  20.  
  21.              #three {
  22.                  border: 1px solid blue;
  23.                  width: 300px;
  24.                  height: 150px;
  25.              }
  26.              /*清除浮动*/
  27.  
  28.              #clear {
  29.                  clear: both;
  30.              }
  31.          </style>
  32.      </head>
  33.  
  34.      <body>
  35.          <div id="one"></div>
  36.          <div id="clear"></div>
  37.          <div id="two"></div>
  38.          <div id="three"></div>
  39.      </body>
  40.  
  41.  </html>

　　运行结果：

　　

　　

　　

6、CSS盒子模型

　　（1）手机---内容（content）；

　　（2）泡沫---padding；

　　（3）手机与包装盒的间距---boder；

　　（4）与其他盒子的间距--margin；

　　

04003_CSS的更多相关文章

随机推荐

  1. [Usaco2005]Part Acquisition

    Description The cows have been sent on a mission through space to acquire a new milking machine for ...

  2. VK Cup 2018 - Round 1 A. Primal Sport

    A. Primal Sport time limit per test 1.5 seconds memory limit per test 256 megabytes input standard i ...

  3. 51nod 1134最长递增子序列

    1134 最长递增子序列 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 给出长度为N的数组,找出这个数组的最长递增子序列.(递增子序列是指,子序列的元素 ...

  4. TSP+Floyd BestCoder Round #52 (div.2) 1002 Victor and Machine

    题目传送门 题意:有中文版的 分析:(出题人的解题报告)我们首先需要预处理出任意两个国家之间的最短距离,因为数据范围很小,所以直接用Floyd就行了.之后,我们用f[S][i]表示访问国家的情况为S, ...

  5. 对数组随机赋值，并输出（Arrays.toString(arr)）

    import java.util.Arrays; public class Demo { public static void main(String[] args) { int[] arr = ne ...

  6. 未找到框架“.NETFramework,Version=v4.5”的引用程序集

    问题描述 一般是在编译的时候会出现这样子的问题, 问题原因: C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETF ...

  7. PostgreSQL执行机制的初步学习

    作为开源数据库的新手,近日有兴对比了Pg和MySQL的查询计划. 通过Pg源码目录下的src\backend\executor\README文件,加上一些简单调试,就能对Pg的执行机制产生一个初步印象 ...

  8. Cygwin, MinGW/MSYS, MinGW-W64/MSYS2

    1. Cygwin http://www.cygwin.com/ Cygwin is a large collection of GNU and Open Source tools which pro ...

  9. zend studio汉化离线语言包安装方法

  10. 类unix系统 递归删除指定文件

    递归删除当前目录下所有以 ._开头的文件 find . -name "._*" | xargs rm -f 或者: find . -name "._*" -ex ...