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家公司交过社保 ...
随机推荐
- 2021.3.3--vj补题
题目 C - C CodeForces - 1166C The legend of the foundation of Vectorland talks of two integers xx and ...
- 使用.NET（C#或VB.NET）开发NX外部程序
1.如何不用将exe程序拷贝到UGII目录下运行? 答:在调用NX Open命令函数前,将当前目录移动到NX安装目录\UGII\,NX安装目录必须和环境变量UGII_BASE_DIR的值一致,否则报错 ...
- NXOpen.CAM.CAMSetup.CopyObjects的使用
复制CAM对象 Public Function CopyObjects(ByVal view As NXOpen.CAM.CAMSetup.View, ByVal objectsToBeMoved() ...
- CSP-J 2021 复赛游记
Day-1 啥也没干 晚上看了看洛谷的讨论,据说freopen在打开的最后要加 fclose(stdin);fclose(stdout); 不加也可.不过据说Linux在return 0之前不会自动关 ...
- 【UE4 C++】DateTime、Timespan 相关函数
基于UKismetMathLibrary DateTime 相关函数 Timespan 运算操作相关函数见尾部附录 /** Returns the date component of A */ UFU ...
- 为什么阿里巴巴开发手册中强制要求 POJO 类使用包装类型？NPE问题防范
封面:学校内的秋天 背景:写这个的原因,也是我这两天凑巧看到的,虽然我一直有 alibaba Java 开发手册,也看过不少次,但是一直没有注意过这个问题 属于那种看过,但又没完全看过 一起来看看吧冲 ...
- 微信小程序添加外部地图服务数据
先上效果: 缘起 使用微信小程序做地图相关功能的时候,有个需求是需要接入自己发布的地图服务.查看微信小程序地图组件文档,发现它对地图相关的支持很少,只有一些基础功能,比如添加点.线.面.气泡和一些常规 ...
- AIApe问答机器人Scrum Meeting 4.27
Scrum Meeting 3 日期:2021年4月27日 会议主要内容概述:汇报两日工作. 一.进度情况 组员 负责 两日内已完成的工作 后两日计划完成的工作 工作中遇到的困难 李明昕 后端 Tas ...
- Noip模拟12 2021.7.12
T1 interval 亏得昨天晚上改掉了T3并且理解了单调栈,今天一扫这题目就知道要用啥了. 先预处理出以a[i]为最大值的最大左右区间.然后再将a[i]取%!!!是的,要不然会影响单调栈的使用.. ...
- 链式A+B 牛客网 程序员面试金典 C++ Python
链式A+B 牛客网 程序员面试金典 C++ Python 题目描述 有两个用链表表示的整数,每个结点包含一个数位.这些数位是反向存放的,也就是个位排在链表的首部.编写函数对这两个整数求和,并用链表形式 ...