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基本选择器

    ①元素选择器:所有相同

 <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
div{
font-size: 30px;
color: pink;
}
</style>
</head>
<div>元</div>
<div>素</div>
<div>选</div>
<div>择</div>
<div>器</div> <body>
</body> </html>

  运行结果:

  

    ②类选择器:部分相同

 <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.div2 {
font-size: 30px;
color: pink;
}
</style>
</head>
<div class="div2">类</div>
<div>选</div>
<div class="div2">择</div>
<div>器</div> <body>
</body> </html>

  运行结果:

  

    ③id选择器:单个

 <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#div5 {
font-size: 30px;
color: pink;
}
</style>
</head> <body>
<div>id</div>
<div>选</div>
<div>择</div>
<div id="div5">器</div>
</body> </html>

  运行结果:

  

  (4)CSS其他选择器

    ①层级选择器

 <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style>
div p {
font-size: 30px;
color: pink;
}
</style>
</head> <body>
<div>层</div>
<div>级</div>
<div>
<p>选</p>
</div>
<div>择</div>
<div>器</div>
</body> </html>

  运行结果:

  

    ②属性选择器

 <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
input[type='text']{
background: red;
} input[type='password']{
background: blue;
}
</style>
</head> <body>
用户名:<input type="text" name="username" /><br />
密码:<input type="password" name="password" />
</body> </html>

  运行结果:

  

4、CSS引入方式

  (1)内部引入

 <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>内部引入元素选择器</title>
<style type="text/css">
div {
font-size: 30px;
color: pink;
}
</style>
</head>
<div>元</div>
<div>素</div>
<div>选</div>
<div>择</div>
<div>器</div> <body>
</body> </html>

  运行结果:

  

  (2)行内引入

 <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>行内引入元素选择器</title>
<style type="text/css">
div {
font-size: 30px;
color: pink;
}
</style>
</head>
<div>元</div>
<div>素</div>
<div>选</div>
<div>择</div>
<!--就近原则,谁近谁生效-->
<div style="font-size: 20px;color: blue;">器</div> <body>
</body> </html>

  运行结果:

  

  (3)外部引入 

 <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>外部引入元素选择器</title>
<link rel="stylesheet" href="style.css" type="text/css"> <body>
<div>元</div>
<div>素</div>
<div>选</div>
<div>择</div>
<div>器</div>
</body> </html>

  在同一目录,新建style.css

 div {
font-size: 30px;
color: pink;
}

  运行结果:

  

5、CSS浮动

 <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>CSS浮动</title>
<style>
#one {
border: 1px solid red;
width: 300px;
height: 150px;
float: left;
} #two {
border: 1px solid black;
width: 300px;
height: 150px;
} #three {
border: 1px solid blue;
width: 300px;
height: 150px;
}
/*清除浮动*/ #clear {
clear: both;
}
</style>
</head> <body>
<div id="one"></div>
<div id="clear"></div>
<div id="two"></div>
<div id="three"></div>
</body> </html>

  运行结果:

  

  

  

6、CSS盒子模型

  (1)手机---内容(content);

  (2)泡沫---padding;

  (3)手机与包装盒的间距---boder;

  (4)与其他盒子的间距--margin;

  

04003_CSS的更多相关文章

随机推荐

  1. SQL 初级教程学习(二)

    1.SQL 语句从 "Websites" 表中选取头两条记录: SELECT * FROM Websites LIMIT 2; SELECT TOP 50 PERCENT * FR ...

  2. 官方XmlPullParser和网络解析xml示例及详述

    Parsing XML Data This lesson teaches you to Choose a Parser Analyze the Feed Instantiate the Parser ...

  3. UML 顺序图(转载)

    顺序图精确表达用户与系统的复杂交互过程. 顺序图用于描述进出系统的信息流. 顺序图与协作图是同构的,可以互相转换!!! 顺序图:着重体现对象间消息传递的时间顺序.顺序图允许直观的表示出对象的生存期,生 ...

  4. 416 Partition Equal Subset Sum 分割相同子集和

    详见:https://leetcode.com/problems/partition-equal-subset-sum/description/ C++: class Solution { publi ...

  5. 纯css实现的三级水平导航菜单

    vscode练习使用开发纯css的三级水平导航菜单.先上图: 1.html5布局 <html> <head> <meta charset="UTF-8" ...

  6. Collection接口框架图

    Java集合大致可分为Set.List和Map三种体系,其中Set代表无序.不可重复的集合:List代表有序.重复的集合:而Map则代表具有映射关系的集合.Java 5之后,增加了Queue体系集合, ...

  7. SQL SERVER的数据类型

    1.SQL SERVER的数据类型 数据类弄是数据的一种属性,表示数据所表示信息的类型.任何一种计算机语言都定义了自己的数据类型.当然,不同的程序语言都具有不同的特点,所定义的数据类型的各类和名称都或 ...

  8. 解决重置PostgreSQL 9.6密码的问题

    一.PostgreSql9.6重置密码的方法: 1.打开windows服务管理器,找到“postgresql-x64-9.6”服务,停止服务. 2.找到PostgreSQL9.6的安装目录(以我的E盘 ...

  9. [Windows Server 2008] PHP安装Memcached

    ★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频.★ 本节我们将带领大家:Windows ...

  10. node.js入门之二

    NPM 1.NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM ...