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家公司交过社保 ...
随机推荐
- NOI2016区间bzoj4653（线段树，尺取法，区间离散化）
题目描述 在数轴上有 \(N\) 个闭区间 \([l_1,r_1],[l_2,r_2],...,[l_n,r_n]\) .现在要从中选出 \(M\) 个区间,使得这 \(M\) 个区间共同包含至少一个 ...
- 在python中实现BASE64编码
什么是Base64编码 BASE64是用于传输8Bit字节的编码方式之一,是一种基于64个可打印字符来表示二进制数据的方法. 如下是转换表:The Base64 Alphabet Base64编码可以 ...
- 剑指offer：JZ8 二叉树的下一个结点
JZ8 二叉树的下一个结点 描述 给定一个二叉树其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的next指针.下图为一棵有9个节点的二叉 ...
- Spring Security 多过滤链的使用
Spring Security 多过滤链的使用 一.背景 二.需求 1.给客户端使用的api 2.给网站使用的api 三.实现方案 方案一: 方案二 四.实现 1.app 端 Spring Secur ...
- Noip模拟36 2021.8.11
刚题的习惯还是改不了,怎么办??? T1 Dove打扑克 考场上打的动态开点线段树+并查集,考后发现自己像一个傻子,并查集就行.. 这几天恶补数据结构疯了 用树状数组维护后缀和,$siz_i$表示编号 ...
- gdal3.1.0+VS2017+geos+kml编译总结
1.简介 gdal3.1.0编译过程中必须依赖proj,编译gdal必须要编译proj,proj的编译需要sqlite3,因此想要编译gdal3.1.0需要先编译proj和sqlite3 2.关于sq ...
- 疯狂Java基础Day1
--每过一遍基础,都是一次提升! 太多遗忘了,慢慢补... 推一个Java学习教程--->b站搜:狂神说Java系列(排序完毕) 推荐原因:讲的不错,会涉及到底层,也会讲讲面试. 一.注释 主要 ...
- (转载)gcc -l参数和-L参数
-l参数就是用来指定程序要链接的库,-l参数紧接着就是库名,那么库名跟真正的库文件名有什么关系呢?就拿数学库来说,他的库名是m,他的库文件名是libm.so,很容易看出,把库文件名的头lib和尾.so ...
- hdu 1848 Fibonacci again and again （SG）
题意: 3堆石头,个数分别是m,n,p. 两个轮流走,每走一步可以选择任意一堆石子,然后取走f个.f只能是菲波那契中的数(即1,2,3,5,8.....) 取光所有石子的人胜. 判断先手胜还是后手胜. ...
- cesium制作自己的骑行轨迹
制作自己的骑行轨迹 马上国庆节了,计划骑车回家,突然想到把所有的骑行线路汇总一下,无奈码表和APP不支持这样的操作,出于职业病,在此操作一下. 我用的是黑鸟码表,可以导出fit运动轨迹,但是fit还需 ...