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家公司交过社保 ...
随机推荐
- 无法获取指向控制台的文件描述符 (couldn't get a file descriptor referring to the console)
背景 最近收拾东西,从一堆杂物里翻出来尘封四年多的树莓派 3B 主机来,打扫打扫灰尘,接上电源,居然还能通过之前设置好的 VNC 连上.欣慰之余,开始 clone 我的 git 项目,为它们拓展一个新 ...
- TStor-OneCOS ，主打专一海量对象场景
谁能与你厮守终身 生活在21世纪,最常见的事莫过于更新换代了,找一款能长久适用的产品,是很多人都希望拥有的,特别是针对于云服务产品,而对象·混合云存储新增 TStor-OneCOS 就是这样一款可以 ...
- 保护模式篇——TLB与CPU缓存
写在前面 此系列是本人一个字一个字码出来的,包括示例和实验截图.由于系统内核的复杂性,故可能有错误或者不全面的地方,如有错误,欢迎批评指正,本教程将会长期更新. 如有好的建议,欢迎反馈.码字不易, ...
- SharkCTF2021 Babyhttp && get_or_lose
两道web. Babyhttp: 直接dirsearch,发现同时存在git和bak泄露:经验证,git的没用. 访问index.php.bak, 下载源码: 抓包,改包,发包即可. get_or_l ...
- 【UE4 设计模式】策略模式 Strategy Pattern
概述 描述 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换.策略模式让算法的变化不会影响到使用算法的客户. 套路 Context(环境类) 负责使用算法策略,其中维持了一 ...
- 关于ORBSLAM的发展脉络
ORBSLAM系列存在随机性的原因:RANSAC中随机数生成器的使用:跟踪.映射和回环闭合线程的不可预测的交织,这取决于操作系统调度程序,这种不可预测性使得在不同的执行中估计的关键帧的姿势可能不同,甚 ...
- 手把手教你学Dapr - 2. 必须知道的概念
Sidecar 边车 Dapr API提供Http和gRPC两种通讯方式. 运行方式则可以是容器也可以是进程(Windows开发推荐使用Self Hosted,后续会解释). 这样的好处是与运行环境无 ...
- js模板引擎laytpl的使用
在我们实际的开发过程中,可能会遇到使用ajax去后台获取一堆的数据,然后动态的渲染到页面上.比如:去后台获取一个list集合,然后将数据以表格的形式展示在页面上.另外一种可能发生的情况就是页面上需要批 ...
- 单片机stm32的5个时钟源的详细分析
众所周知STM32有5个时钟源HSI.HSE.LSI.LSE.PLL,其实他只有四个,因为从上图中可以看到PLL都是由HSI或HSE提供的. 其中,高速时钟(HSE和HSI)提供给芯片主体的主时钟.低 ...
- 『学了就忘』Linux基础 — 15、了解Linux系统的目录结构
目录 1.一级目录说明 (1)一级目录列表 (2)/bin/和/sbin/目录说明 (3)/boot/目录说明 (4)/lib/和/lib64/目录说明 (5)/lost+found/目录说明 (6) ...