html+css第一篇
行间样式表
<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>
如图：
html+css第一篇的更多相关文章
- css第一篇：元素选择器
1:多个选择器 h1, h2 {} ——h1或h2标签的所有元素 2:通配选择器 * {} ——所有元素 3:元素选择器 div {} ——所有div元素 4:类选择器 .te ...
- 第一篇 css导入方式 及选择器
一 推荐资料 推荐书籍 css Zen Garden 中文(css禅意花园) 二.css样式 1.css样式表特征 继承性 大多数css的样式规则可以被继承 层叠性 1)可以定义 多个样式 2)不冲 ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- 【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- 前端工程师技能之photoshop巧用系列第一篇——准备篇
× 目录 [1]作用 [2]初始化 [3]常用工具[4]快捷键 前面的话 photoshop是前端工程师无法回避的一个软件,这个软件本身很强大,但我们仅仅需要通过这个工具来完成基本的切图工作即可.本文 ...
- Python开发【第一篇】：目录
本系列博文包含 Python基础.前端开发.Web框架.缓存以及队列等,希望可以给正在学习编程的童鞋提供一点帮助!!! Python开发[第一篇]:目录 Python开发[第二篇]:初识Python ...
- 深入css布局篇(3)完结 — margin问题与格式化上下文
深入css布局(3) - margin问题与格式化上下文 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...
- 深入css布局篇(2) — 定位与浮动
深入css布局(2) - 定位与浮动 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...
- 从.Net到Java学习第一篇——开篇
以前我常说,公司用什么技术我就学什么.可是对于java,我曾经一度以为“学java是不可能的,这辈子不可能学java的.”结果,一遇到公司转java,我就不得不跑路了,于是乎,回头一看N家公司交过社保 ...
随机推荐
- 题解 Beautiful Pair
题目传送门 题目大意 给出一个 \(n\) 个点的序列 \(a_{1,2,...,n}\) ,问有多少对点对 \((i,j)\) 满足 \(a_i\times a_j\le a_k(i\le k\le ...
- MS office设置夜间模式
点击文件 帐户 -> office主题
- Python技法3：匿名函数、回调函数和高阶函数
1.定义匿名或内联函数 如果我们想提供一个短小的回调函数供sort()这样的函数用,但不想用def这样的语句编写一个单行的函数,我们可以借助lambda表达式来编写"内联"式的函数 ...
- 联赛膜你测试20 T1 Simple 题解 && NOIP2017 小凯的疑惑 题解（赛瓦维斯特定理）
前言: 数学题,对于我这种菜B还是需要多磨啊 Simple 首先它问不是好数的数量,可以转化为用总数量减去是好数的数量. 求"好数"的数量: 由裴蜀定理得,如果某个数\(i\)不能 ...
- 前端面试手写代码——JS数组去重
目录 1 测试用例 2 JS 数组去重4大类型 2.1 元素比较型 2.1.1 双层 for 循环逐一比较(es5常用) 2.1.2 排序相邻比较 2.2 查找元素位置型 2.2.1 indexOf ...
- eclipse配置Tomcat和Tomcat出现无效端口解决办法
一.eclipse配置Tomcat 1. 按图选择window-preferences 2在server处选择runtime environment . 3.点击右侧add,选择自己的Tomcat版本 ...
- Can't open PID file /run/zabbix/zabbix_agentd.pid
神奇的事情,重启主机(reboot)后查看状态是正常的没有报错,重启zabbix-agent后,报无法打开zabbix_agentd.pid,zabbix-web正常监控 1.首先,/etc/zabb ...
- 使用silky脚手架构建微服务应用
目录 模板简介 构建独立应用的模板Silky.App.Template 构建模块化应用的模板Silky.Module.Template 开源地址 在线文档 模板简介 使用 dotnet new 命令可 ...
- Fiddler抓包工具简介：（一）认识Fiddler
认识Fiddler Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的"进出"Fiddler的数据(指coo ...
- url的hash和HTML5的history
url的hash和HTML5的history 第一种方法是改变url的hash值. **显示当前路径 : **location.href http://localhost:8080/# 切换路径: l ...