行间样式表

<div style="……"></div>

内部样式表

<style>…………</style>

外部样式表

<link href="style.css" rel="stylesheet"/>
属性：属性值；

width 宽度

height 高度

background 背景

background-attachment: fixed; 背景是否滚动

background-color: gray; 背景颜色

background-image: url(bg.jpg);  背景图

background-repeat: no-repeat; 背景图是否重复

background-position: center 0px; 背景图位置
border 边框

border-width 边框宽度

border-style   边框样式

border-color  边框颜色

边框样式：

    solid      实线

    dashed  虚线

    dotted   点线（IE6不兼容）
padding 内边距

    padding-top         上边内边距

    padding-right         右边内边距

    padding-bottom    下边内边距

    padding-left            左边内边距

    padding: top right bottom left;

    注意：内边距相当于给一个盒子加了填充厚度会影响盒子大小。    
margin 外边距

外边距的问题：

    1、上下外边距会叠压；

    2、父子级包含的时候子级的margin-top会传递给父级；（内边距替代外边距）

外边距复合：margin: top right bottom left;

盒子大小 = border + padding + width/height

盒子宽度 = 左border+左padding+width+右padding +右border

盒子高度 = 上border+上padding+height+下padding+下border
结构样式：

    width 宽度

    height 高度

    background 背景

    border 边框

    padding 内边距

    margin 外边距

复合属性：一个属性多个属性值的命令，叫做复合属性。

font-size                  文字大小（一般均为偶数）

font-family              字体（中文默认宋体）

color                        文字颜色（英文、rgb、十六位进制色彩值）

line-height              行高

text-align                文本对齐方式

text-indent             首行缩进（em缩进字符）

font-weight            文字着重

font-style                文字倾斜

text-decoration      文本修饰

letter-spacing         字母间距

word-spacing         单词间距（以空格为解析单位）

复合属性：

background

border

padding

margin

font：font-style | font-weight | font-size/line-height | font-family；
常见样式17：

width 宽度                                  height 高度

background 背景                       border 边框

padding 内边距                          margin 外边距

font-size  文字大小                      font-family 字体

color 文字颜色                      line-height 行高

text-align 文本对齐方式               text-indent 首行缩进

font-weight 文字着重                 font-style 文字样式

text-decoration 文本修饰           letter-spacing 字母间距

word-spacing 单词间距        
前端开发环境：

Photoshop（切图、修图、测量）

Dreamweaver

浏览器（两大类）：

IE浏览器：    IETester（IE6、IE7、IE8）、IE9、IE10……

标准浏览器：firefox（fireBug）、chrome、safari、oprea…

第一个页面

<!DOCTYPE HTML>

<html>

<head>

    <title>第一个页面</title>

    <meta charset="utf-8"/>

</head>

<body>

这是我的第一个页面

</body>

</html>

第二个页面-行间样式

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

</head>

<body>

<div style="width:400px; height:200px; background:red;">块</div>

一个块，宽度300像素，高度是200像素，背景蓝色

<div style="width:300px; height:200px; background:blue;"></div>

<!-- 行间样式 -->

<!-- html 注释 -->

</body>

</html>

第三个-内部样式

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#box{width:400px; height:200px; background:red;}

/*

内部样式表

*/ 

/* css 注释 */

</style>

</head>

<body>

<div id="box">块</div>

</body>

</html>

第四个-外部样式

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<link href="style.css" rel="stylesheet"/>

</head>

<body>

<div id="box">块</div>

科技

</body>

</html>

style.css文件

#box{width:400px; height:200px; background:red;}

第五个-常见样式：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#box{

width:400px;

height:200px;

background:red;

}

/*

XX:??;

属性:属性值;

结构样式：

    width 宽度

    height 高度

    background 背景

    border 边框

    padding 内边距

    margin 外边距

*/ 

</style>

</head>

<body>

<div id="box">块</div>

</body>

</html>

第六个-border 边框

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#box{

    width:0;

    height:0;

    border-top:100px solid white;

    border-right:100px solid blue;

    border-bottom:100px solid green;

    border-left:100px solid yellow;

}

/*

border 边框

边框样式：

    solid      实线

    dashed  虚线

    dotted   点线（IE6不兼容）

*/ 

</style>

</head>

<body>

<div id="box"></div>

</body>

</html>

页面效果图：

第七个-padding 内边距

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#box{width:440px; height:240px;border:1px solid black;

/*

padding-top:30px;

padding-right:30px;

padding-bottom:30px;

padding-left:30px;

*/

padding:30px 30px 10px 30px;

}

/*

padding 内边距

padding: top right bottom left;

注意：内边距相当于给一个盒子加了填充厚度会影响盒子大小。

*/ 

</style>

</head>

<body>

<div id="box">块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块</div>

</body>

</html>

　　效果：

第八：margin 外边距

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#box1{width:500px; height:300px; background:blue;margin-bottom:30px;}

#box2{width:300px; height:100px; background:yellow; margin-top:30px;}

/*

margin 外边距

外边距的问题：

1、上下外边距会叠压；

*/ 

</style>

</head>

<body>

<div id="box1"></div>

<div id="box2"></div>

</body>

</html>

第九：margin 外边距

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#box1{width:500px; height:200px; background:blue; padding-top:100px;}

#box2{width:300px; height:100px; background:yellow;}

/*

margin 外边距

外边距的问题：

1、上下外边距会叠压；

2、父子级包含的时候子级的margin-top会传递给父级；（内边距替代外边距）

*/ 

</style>

</head>

<body>

<div id="box1">

    <div id="box2"></div>

</div>

</body>

</html>

如图：

外边距样式：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#box2{width:300px; height:100px; background:yellow;

/*

margin-right:auto;

margin-left:auto;

自动适应

*/

margin:0 auto;

}

/*

margin 外边距

外边距复合：margin: top right bottom left;

*/ 

</style>

</head>

<body>

<div id="box2"></div>

</body>

</html>

　　-常见样式文本设置

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#box{width:500px; height:300px; margin:90px auto; border:1px solid red;

font-size:18px;/* 12px 偶数 */

font-family:宋体,arial;

color:#961939;

line-height:30px;

text-align:left;

text-indent:2em;/* 1em=[font-size] 相当于1个字 */

font-weight:normal;

font-style:normal;

text-decoration:none;

word-spacing:30px;

}

/*

font-size                  文字大小（一般均为偶数）

font-family              字体（中文默认宋体）

color                        文字颜色（英文、rgb、十六位进制色彩值）

line-height              行高

text-align                文本对齐方式

text-indent             首行缩进（em缩进字符）

font-weight            文字着重

font-style                文字倾斜

text-decoration      文本修饰

letter-spacing         字母间距

word-spacing         单词间距（以空格为解析单位）

font：font-style | font-weight | font-size/line-height | font-family；

 */

</style>

</head>

<body>

<div id="box">

内容内容内容内google容内sun容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

</div>

</body>

</html>

如图：

最新文章

  1. 【Win 10 应用开发】打印UI元素
  2. NSString与奇怪的retainCount
  3. 关于android的单位dp与px
  4. [原创]AHA大会回顾
  5. java 集合（ArrayList）
  6. 过河-状压DP
  7. SqlServer:CTE函数处理递归（WITH语法）
  8. 三分钟读懂Oracle数据库容灾架之DataGuard
  9. Jvm垃圾回收堆内存变化过程
  10. 在maven仓库中查找jar
  11. Ubuntu下使用vpn连接远程服务器
  12. 【LeetCode】237. Delete Node in a Linked List
  13. DistBlockNet:A Distributed Blockchains-Based Secure SDN Architecture for IOT Network
  14. windows10无法启动承载网络
  15. hql 语法详解
  16. 201621123002《JAVA程序设计》第二周学习总结
  17. elk安装最佳实践
  18. Broadcast总结 service
  19. Zookeeper服务器集群的搭建与操作
  20. A*专题训练

热门文章

  1. 洛谷3809 SA模板 后缀数组学习笔记（复习）
  2. UnboundLocalError: local variable &#39;range&#39; referenced before assignment
  3. 【c++ Prime 学习笔记】第10章 泛型算法
  4. pycharm中的terminal和Windows命令提示符有什么区别？二者用pip安装的包是不是位于相同位置？
  5. 【技术博客】Flutter—使用网络请求的页面搭建流程、State生命周期、一些组件的应用
  6. oo第一次博客-三次表达式求导的总结与反思
  7. sonar-project.propertie分析参数
  8. 在c中使用正则表达式
  9. C++ pragma once 与 ifndef 用法区别
  10. 『学了就忘』Linux基础命令 — 32、压缩和解压缩相关命令