妙味课堂——HTML+CSS(第一课)

一句话，还记忆不如烂笔头，何况还这么笨，记下笔记，也是记录这一路学习的过程。

妙味课堂第一课并未一味地先讲HTML，而是穿插着CSS讲解，这一点不同于一些其他视频，这一点挺特别的！所以这一课涉及到HTML的知识，也并未多讲，倒是CSS中的内容讲的比较多。记录如下：

HTML(Hypertext Markup Language)——超文本标记语言（结构）
css(Cascading Style Sheets)——层叠样式表（样式）
js(javascript)―― 行为

为了更快地初步了解这三种语言，给出我的第一个页面：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>标题 - title</title>

</head>

<body>

    内容 - content

    <div onclick="this.style.width = '800px'; this.style.height = '400px';" style="width: 100px; height: 100px; transition: 1s; border: 8px solid red; background: url(http://www.52ij.com/uploads/allimg/160317/003T95164-3.jpg);">aaaa</div>

</body>

</html>

效果(用文字表示)：点击图片，过渡1s，图片循循展开。(由于是一个动态效果图，所以小白不知道该怎么表示出)

下面初略说明(涉及到CSS和JavaScript的部分后面会说明，在此不赘述)：

<div>——标签

<div></div>——标签对

单标签：直接在后面斜杠结束的标签叫做单标签。

<!DOCTYPE HTML> !: 声明 注意   doc document 文档  type  类型 即声明文档类型为HTML

<meta charset="utf-8"/> 代码编码格式，通俗点说就是告诉浏览器我是按照什么编码的

样式表出现的位置

1、行间样式，如

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

例，特别说明HTML文件的注释是

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

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

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

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

    行间样式

    <!-- html注释 -->

</body>

</html>

　2、内部样式，如

<style>…………</style>

　例，特别说明CSS中的注释是/* */

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box {

            width: 400px;

            height: 200px;

            background: blue;

        }

        /*内部样式表*/

        /*css注释*/

    </style>

</head>

<body>

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

</body>

</html>

3、外部样式，如

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

例，

样式位置-外部1.html：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

</head>

<body>

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

    数码

</body>

</html>

样式位置-外部2.html：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

</head>

<body>

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

    汽车

</body>

</html>

style.css：

#box {

    width: 400px;

    height: 200px;

    background: blue;

}

下面详解一些常见样式

属性	属性值
width	宽度
height	高度

常见样式一 background

background	背景
background-attachment	fixed(背景是否滚动)
background-color	red.....(背景颜色)
background-image	url(icon.gif)(背景图片)
background-position	center (top)0px(左右居中，上下居顶)/10px(X轴) 50px(Y轴) (背景图位置)
background-repeat	no-repeat(背景图不重复)/repeat(背景图重复，铺满整个盒子)/repeat-x(背景图片横向重复)/repeat-y(背景图纵向重复)

background其实是一个复合属性，一个属性多个属性值。我们不必一个个写出以上这些属性，可以一次就写出包含多个属性的代码，如又能这样写(顺序无关紧要)：

background: url(bg.jpg) center top no-repeat gray fixed;

例，

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box {

            width: 500px;

            height: 200px;

            background: blue url(icon.gif) no-repeat center center;

        }

        #bg {

            height: 1500px;

            background: url(bg.jpg) center top no-repeat gray fixed;

        }

    </style>

</head>

<body id="bg">

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

</body>

</html>

我们会发现向下滑的过程中，背景图片bg.jpg是固定不懂的，就是因为使用了background-attachment=fixed的缘故。

常见样式一 border

border	边框
border-width	1px(边框宽度)
border-color	red...(边框颜色)
border-style	solid(实线)/dashed(虚线)/dotted(点线)（注意IE6不兼容）

border也是一个复合属性，我们同样可以如下写：

border: 1px dotted green;

让我们看看一个盒子(盒子模型)的边框构成：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box {

            width: 100px;

            height: 100px;

            border-top: 100px solid red;

            border-right: 100px solid green;

            border-bottom: 100px solid blue;

            border-left: 100px solid yellow;

        }

    </style>

</head>

<body>

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

</body>

</html>

运行效果图：

如果盒子中的高度和宽度都设置为0，那么可以看到如下图所示的效果，似乎我们可以做出七巧板的东西。

常见样式一 padding

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

注意：盒子的width和height并不是整个盒子的大小，可以认为是盒子里面能放东西的部分(即容积)。

关于内边距与外边距，我已经在另一篇文章中HTML CSS——margin与padding的初学记录过，在此不赘述，只给出一个例子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box {

            width: 340px;

            height: 240px;/*宽和高不是整个盒子的大小，可以认为是盒子里面能放东西的部分(即容积)*/

            border: 1px solid black;

            /*

            padding-top: 30px;

            padding-right: 30px;

            padding-bottom: 30px;

            padding-left: 30px;

            */

            padding: 30px;

        }

    </style>

</head>

<body>

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

</body>

</html>

常见样式一margin

外边距的问题：

上下外边距会叠压；
父子级包含的时候子级的margin-top会传递给父级（内边距替代外边距）。

例，上下外边距会叠压：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box1 {

            width: 500px;

            height: 300px;

            background: blue;

            margin-bottom: 30px;

        }

        #box2 {

            width: 300px;

            height: 100px;

            background: yellow;

            margin-top: 30px;

        }

    </style>

</head>

<body>

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

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

</body>

</html>

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

需求：id为box2的<div>距离id为box2的<div>

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box1 {

            width: 500px;

            height: 300px;

            background: blue;

        }

        #box2 {

            width: 300px;

            height: 100px;

            background: yellow;

            margin-top: 100px;

        }

    </style>

</head>

<body>

    <div id="box1">

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

    </div>

</body>

</html>

内边距替代外边距后：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box1 {

            width: 500px;

            height: 300px;

            background: blue;

            padding-top: 100px;

        }

        #box2 {

            width: 300px;

            height: 100px;

            background: yellow;

        }

    </style>

</head>

<body>

    <div id="box1">

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

    </div>

</body>

</html>

发现盒子的大小发生变化，要想一样，必须高度-100px

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box1 {

            width: 500px;

            height: 200px;

            background: blue;

            padding-top: 100px;

        }

        #box2 {

            width: 300px;

            height: 100px;

            background: yellow;

        }

    </style>

</head>

<body>

    <div id="box1">

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

    </div>

</body>

</html>

关于auto在margin中的应用：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box2 {

            width: 300px;

            height: 100px;

            background: yellow;

            margin-left: auto;/*计算右边的距离，统统都塞给左边*/

        }

    </style>

</head>

<body>

    <div id="box2">

    </div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box2 {

            width: 300px;

            height: 100px;

            background: yellow;

            margin-right: auto;

        }

    </style>

</head>

<body>

    <div id="box2">

    </div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box2 {

            width: 300px;

            height: 100px;

            background: yellow;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <div id="box2">

    </div>

</body>

</html>

常见样式 —文本设置

font-size	12px/14px/16px文字大小（一般均为偶数）
font-family	字体（中文默认宋体）
color	文字颜色(英文、rgb、十六位进制色彩值)
line-height	行高
text-align	center/right/left(文本对齐方式)
text-indent	首行缩进(em缩进字符)
font-weight	文字着重
font-style	文字倾斜
text-decoration	文字修饰
letter-spacing	字母间距(可为负值，-10px)
word-spacing	单词间距(以空格为解析单位)

例，

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box {

            width: 500px;

            height: 300px;

            border: 1px solid black;

            margin: 90px auto;

            font-size: 16px;

            font-family: 宋体;

            /*color: #a51a3b;*/

            color: rgb(165,26,59);

            line-height: 30px;

            text-align: left;

            text-indent: 2em;/*首行缩进两个字*/

            font-weight: normal;

            font-style: normal;

            text-decoration: none;

            /*letter-spacing: -10px;*/

            word-spacing: 30px;

        }

    </style>

</head>

<body>

    <div id="box">块文本设置块 go ogle 文本设 su n 置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置</div>

</body>

</html>

下面图示行高(line-height)

妙味课堂——HTML+CSS(第一课)的更多相关文章

妙味课堂——HTML+CSS(第二课)
常见标签——img标签 <img src="图片地址" alt="图片名"/> alt属性是图片名字,是给百度搜索引擎抓取使用的.也有当图片地址不正 ...
妙味课堂——HTML+CSS(第四课)(二)
单开一篇来讲一个大点的话题——清浮动来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...
妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
妙味课堂——HTML+CSS(第四课)(一)
这一课学的东西真是太多了,还不赶快记下来,留待以后慢慢回味! 首先我们回顾一下inline-block的特性: 使块元素在一行显示使内嵌支持宽高换行被解析了(问题) 不设置宽度的时候,宽度由内容撑 ...
妙味课堂——HTML+CSS(第三课)
常见标签我已经在上一篇文章中提及,我们做前端设计时,主要也是用这些标签(最常用的). 然而有一个问题,就是有的标签都有自己的默认样式.试通过如下代码来说明: <!DOCTYPE html> ...
妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示
1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...
妙味课堂——JavaScript基础课程笔记
集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...
妙味课堂史上最全的javascript视频教程，前端开发人员必备知识点，新手易学，拔高必备！！！
妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分 ...
妙味课堂:JavaScript初级--第12课：json与数组
1.json数据格式及json语法 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

随机推荐

"奇葩家园“之 asyncTask 与 url 下载篇
asyncTask 是android提供的一个轻量级的异步处理的类,有3个泛型参数,params,progress,result params: 启动任务执行的时候传入的参数比如请求的 url 地址 ...
vnextcn
Flag 标题通过提交 AC% 难度 E1 编写Hello World网站 9 17 52% 1 E2 编写Hello World控制台程序 11 13 84% 1 E3 控制器基础练 ...
mac os x 系统安装 genymotion android 模拟器
如果你有 apk 文件想运行一下看看 ,但是又没有 android 设备 ,那么 genymotion 将会是一个很好的解决方案. 1.安装下载链接: https://cloud.geny ...
[转载]求平方根sqrt()函数的底层算法效率问题
我们平时经常会有一些数据运算的操作,需要调用sqrt,exp,abs等函数,那么时候你有没有想过:这个些函数系统是如何实现的?就拿最常用的sqrt函数来说吧,系统怎么来实现这个经常调用的函数呢? 虽然 ...
c enum用法
c语言中enum的用法,先用关键字enum声明一个类型如enum HUMAN {MAN ,WOMAN};这里就声明了一个HUMAN这个枚举类型.其中MAN的值为0,后面依次递增.后面要用的时候,先声明 ...
Crawling is going on - Alpha版本使用说明
[Crawling is going on - Alpha版本] 使用说明北京航空航天大学计算机学院远航1617 小组产品版本: Alpha版本产品名称:Crawling is ...
水王ID查找
一. 题目 1 三人行设计了一个灌水论坛.信息学院的学生都喜欢在上面交流灌水,传说在论坛上有一个“水王”,他不但喜欢发帖,还会回复其他ID发的每个帖子.坊间风闻该“水王”发帖数目超过了帖子数目的一半. ...
[转载]解决zabbix在configure时候遇到的问题(Ubuntu)
http://hi.baidu.com/ryq1xiuluo/item/6d37e658f1b90b13db16351d ./configure --enable-server --enable-ag ...
用R语言对NIPS会议文档进行聚类分析
一.用R语言建立文档矩阵 (这里我选用的是R x64 3.2.2) (这里我取的是04年NIPS共计207篇文档做分析,其中文档内容已将开头的作者名和最后的参考文献进行过滤处理) ##1.Data I ...
SQL 语法 Join与Union
问题描述: Join与Union使用问题解决: Join连接,可以分为: tableA如下: tableB如下: 1.1.Inner Join SELECT * FROM TableA INNER ...

妙味课堂——HTML+CSS(第一课)

妙味课堂——HTML+CSS(第一课)的更多相关文章

随机推荐

热门专题