HTML-CSS教程

1、HTML+CSS前端开发前端开发主要职能就是把网站的界面更好地呈现给用户 什么是什么是HTML？ HTML 是用来描述网页的一种语言。也叫做 web 页面。HTML 实例我的第一个标题我的第一个段落。 解析DOCTYPE 声明了文档类型位于标签 与 描述了文档类型位于标签 与 为可视化网页内容位于标签 与 作为一个标题使用位于标签 与 作为一个段落显示HTML 基础基础HTML 元素元素HTML 元素以开始标签开始标签起始HTML 元素以结束标签结束标签终止元素的内容元素的内容是开始标签与结束标签之间的内容HTML 属性属性HTML 元素可以设置属性属性属性可以在元素中添加附加信息附加信息属性

2、一般描述于开始标签开始标签属性总是以名称/值对的形式出现，比如：比如：name=value。HTML 元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: , , , , , , and . 在 HTML/XHTML 文档中是必须的。 定义了浏览器工具栏的标题当网页添加到收藏夹时，显示在收藏夹中的标题显示在搜索引擎结果页面的标题HTML 元素元素 在 HTML/XHTML 文档中是必须的。 定义了浏览器工具栏的标题当网页添加到收藏夹时，显示在收藏夹中的标题显示在搜索引擎结果页面的标题Title of

3、 the document HTML 、元素元素 标签定义了文档与外部资源之间的关系。 标签通常用于链接到样式表: 标签定义了HTML文档的样式文件引用地址.在 元素中你需要指定样式文件来渲染HTML文档:body background-color:yellowp color:blueHTML 元素元素meta标签描述了一些基本的元数据。 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。 - 使用实例使用实例

4、为搜索引擎定义关键词:为网页定义描述内容:定义网页作者:每30秒中刷新当前页面:CSS 语法语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。如何插入样式表如何插入样式表 外部样式表外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。每个页面使用 标签链接到样式表。 标签在（文档的）头部： 内部样式表内部样式表当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

5、 标签在文档头部定义内部样式表，就像这样:body background-color:yellow;p color:blue; 内联样式内联样式当特殊的样式需要应用到个别元素时，就可以使用内联样式。 This is a paragraph. CSS Id 和和 Class选择器选择器 id 选择器选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。（只对一个待定元素用，不可重用）HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 # 来定义。以下的样式规则应用于元素属性 id=para1: #para1 text-align: center; color:

6、 #000;class 选择器选择器class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点.号显示：在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。 .center text-align: center;Demo创建HTML创建CSSDemo-HTML前端VIEW层的文件，包括html页面、css式表、img文件等等。Demo-做一个做一个html文件文件 demo.html 打开demo.html,增加默认标签Demo-链接外部链

7、接外部CSS在里面增加Demo-CSS使用使用body margin: 0; /*- header -*/header background-color: #006564; height: 45px; /*- main -*/.unsupported-browser width: 600px; margin:0 auto; min-height: 300px;.unsupported-browser h1 font-size: 30px; margin: 60px 0 40px; color: #006564; .unsupported-browser .introduction font-s

8、ize: 16px; .unsupported-browser .device float: left; width: 100%; .unsupported-browser .device ul list-style: none; padding: 0; margin: 0; float: left; width: 100%;.unsupported-browser .device .item margin-top: 50px; display: table; float: left; width: 49.99%;.unsupported-browser .device .item .brow

9、ser-img width: 15%; text-align: left; display: table-cell; vertical-align: middle;.unsupported-browser .device .item .information width: 80%; text-align: left; display: table-cell; vertical-align: middle; .unsupported-browser .device .item .information .link font-size: 20px; font-weight: bold; margi

10、n-left: 10px; text-decoration: underline; color: #0f748f; /*- footer -*/.footer border-top: 1px solid #d7d7d7; .footer .footer-message width: 960px; margin: 20px auto; text-align: center; font-size: 12px; padding-top: 20px;.footer .footer-message a color: #0f748f; text-decoration: none; .footer .foo

11、ter-message a:hover text-decoration: underline;Demo-HTML （body内容）内容） 我们留意到您正在使用旧版的浏览器。 为了获得最好的使用体验，请选择下载新版的浏览器。 Chrome Mozilla Firefox 版权所有 國泰航空有限公司 Cathay Pacific Airways Limited 京ICP证09072568号 Demo-效果效果CSS3CSS3圆角border-radiusCSS3渐变GradientCSS3盒子阴影box-shadowCSS3文字阴影text-shadowCSS3动画transitionCSS3变形

12、transformCSS3动画animationCSS3盒模型box-sizingCSS3本地字体font-faceCSS3-各浏览器识别前缀各浏览器识别前缀使用使用css3属性时，大部分都要带这些识别前缀，早期点的浏览器才能识别，属性时，大部分都要带这些识别前缀，早期点的浏览器才能识别， 标准写法在后-webkit-border-radius: 2px; /* Chrome,Safari4+ */-moz-border-radius: 2px; /* FF3.6+ */-ms-border-radius: 2px; /* IE10+ */-o-border-radius: 2px; /* O

13、pera 11.10+ */border-radius: 2px; /* Old browsers */IE浏览器单独写法：color:red9; /*all ie*/color:yellow0; /*ie8*/+color:pink; /*ie7*/_ color:orange; /*ie6*/CSS3以这个DEMO为例HTML Markup Hello CSS3-Gradient美化美化box效果效果 .box background: #fafafa; background: -moz-linear-gradient(top,#f8f8f8 50%,#c6c6c6 100%); backg

14、round: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#f8f8f8),color-stop(100%,#c6c6c6); background: -webkit-linear-gradient(top,#f8f8f8 50%,#c6c6c6 100%); background: -o-linear-gradient(top,#f8f8f8 50%,#c6c6c6 100%); background: -ms-linear-gradient(top,#f8f8f8 50%,#c6c6c6 100%); backgr

15、ound: linear-gradient(to bottom,#f8f8f8 50%,#c6c6c6 100%); border: 1px dashed #666; margin: auto; width: 400px; height: 200px; cursor: pointer; position: relative; CSS3-box-shadow采用了box-shadow和:after给box添加了一个阴影效果： .box:after content: ; position: absolute; width: 70%; height: 10px; bottom: 0; left: 1

16、5%; z-index: -1; -webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4); -moz-box-shadow: 0 9px 20px rgba(0,0,0,.4); box-shadow: 0 9px 20px rgba(0,0,0,.4); box-shadow语法语法 box-shadow: h-shadow v-shadow blur spread color inset; h-shadow: 必需。水平阴影的位置。 v-shadow: 必需。垂直阴影的位置 blur: 可选。模糊距离。 Spread:可选。阴影的尺寸。 Color:可选

17、。阴影的颜色 inset:可选。将外部阴影 (outset) 改为内部阴影CSS3-text-shadow美化美化box下的下的div.box div position: absolute; width: 100%; height: 100%; top: 0; left: 0; font: 45px/200px bold arial, sans-serif; text-align: center; text-shadow: 0 2px 0 white; text-shadow语法语法 text-shadow: h-shadow v-shadow blur color; h-shadow: 必需

18、。水平阴影的位置。 v-shadow: 必需。垂直阴影的位置 blur: 可选。模糊距离。 Color:可选。阴影的颜色CSS3-transition增加动画效果在.box上添加下面CSS： -webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s;text-shadow语法语法 transition: property duration timing-function delay; transition-property 规定设置过渡效果的CSS属性的名称transition-duration 规定完成过渡

19、效果需要多少秒或毫秒。transition-timing-function 规定速度效果的速度曲线。transition-delay 定义过渡效果何时开始。CSS3-transform旋转文本旋转文本 .box:hover -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); transform语法语法 transform: none|transform-functions;rotateY(angle) 定义沿着 Y 轴的 3D 旋转。其它属性参考：htt

20、p:/ CSS3-Box-sizingBox-sizing语法语法 box-sizing ： content-box | border-box | inheritcontent-box:此值为其默认值：此值为其默认值：Element Width/Height = border+padding+content width/height。border-box:此值让元素维持此值让元素维持IE传统的传统的Box Model：width/height【此处的内容宽度/高度=width/height-border-padding】） content-box和border-box两者的区别 CSS3-自定

21、义自定义Font Icon制作SVG：从Illustrator导出SVG文件或在线生成SVG在线制作在线制作ICON打开https:/icomoon.io/app/#/select选择Import Icons button, 导入你自己的svg字体CSS3-自定义自定义Font Icon选择你的Icon,点击底部“font”DownloadCSS3-自定义自定义Font Icon打开压缩文件，Copy “font、Style.css”文件CSS3-自定义自定义Font Icon使用使用font-face引入字体引入字体font-face font-family: icomoon;src:url

22、(./fonts/icomoon.eot?1oozfu);src:url(./fonts/icomoon.eot?#iefix1oozfu) format(embedded-opentype),url(./fonts/icomoon.ttf?1oozfu) format(truetype),url(./fonts/icomoon.woff?1oozfu) format(woff),url(./fonts/icomoon.svg?1oozfu#icomoon) format(svg);font-weight: normal;font-style: normal;font-face的语法：的语法：

23、font-face font-family: ; src: , *; font-weight: ; font-style: ; 1、YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:YourWebFontName;”2、source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；3、format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded

24、-opentype,avg等；4、weight和style: weight定义字体是否为粗体，style主要定义字体样式，如斜体。CSS3-自定义自定义Font IconHTML Markup .icon-home font-size: 20px; color: #df0000; padding:10px; border: 1px solid #ccc; Responsive Web 自适应网页设计（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。Responsive-允许网页宽度自动调整允许网页宽度自动调整 自适应网页设计“到底是怎么做

25、到的？其实并不难。首先，在网页代码的头部，加入一行viewport元标签。viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。由于“Responsive”设计是结合CSS3的Media Queries属性，才能尽显这种风格的设计，但在IE6-8中完全是不支持CSS3 Media Queries的。那么为了让IE6-8支持，我们就很有必要的在IE9以下的浏览器中加上media-queries.js或者respond.js脚本： R

26、esponsive-不使用绝对宽度不使用绝对宽度 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS代码不能指定像素宽度：width: xxx px;只能指定百分比宽度：width: xx%;Responsive-选择加载选择加载CSS 自适应网页设计的核心，就是CSS3引入的Media Query模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。 Responsive-CSS的的media规则规则 同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。 宽400以下media screen

27、 and (max-device-width: 400px) .column float: none; width:auto; #sidebar display:none; 宽在720到1022的屏幕显示media screen and (min-width: 720px) and (max-width: 1022px)Responsive-Demo第一步：第一步：Meta标签标签现在智能手机上浏览web页面会让页面适应屏幕的大小，显示在屏幕上。不过我们可以通过“meta”标签对他进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果，具体设置如下： Responsi

28、ve-Demo第二步：第二步：HTML以这个DEMO为例：主要包括了一个“头部”、“主内容”、“边栏”和“页脚”四个主要部分。而且其中“头部”固定了一个高度值“180px”；“主内容”宽度设置为“600px”；“边栏”的宽度为“300px”。这些只是一些最基本的样式值。你可以根据你的需求进行更详细的设置。Responsive-Demo第三步：第三步：Media QueriesCSS3的Media Queries是“Responsive”设计中的重要一部分，主要用他来告诉浏览器在一定条件之下如何进行渲染web页面。下面我们来看几个不定条件的设置样例： 下面这种规则是当浏览器可视大小等于或小于“9

29、80px”的布局。从代码中可以清楚的看到，在浏览器可视大小符何下面条件时，整个布局从固定布局转为流体布局，具体请看代码的变化：*等于或小于980px*/ media screen and (max-width:980px) #pagewrap width: 94%; #content width: 65%; #sidebar width: 30%; Responsive-Demo接下来我们在来看第二种情况：浏览器可视化大小等于或小于700px时，把“content”和“#sidebar”的宽度设为“auto”并把他们的“float”重置为“none”，也就成了一列的满屏显示，具体代码如下：/*

30、等于或小于700px*/ media screen and (max-width:700px) #content , #sidebar float: none; wdith: auto; Responsive-Demo最后我们在一起来看一下手机上的渲染：当显示器可视大小等于或小于480px时，将“#header”的高度重置为“auto”，并把“h1”的字号重置为“24px”,最后在把“#sidebar”给隐藏了： *等于或小于480px*/ media screen and (max-width:480px) #header height: auto; h1 font-size: 24px;

31、#sidebar display: none; CSS的预处理器的预处理器-SassSass是一种CSS预处理语言，当你使用Sass这门语言时，你使用编译程序来转换Sass文件，通常以SCSS文件格式书写然后转换成CSS文件。Sass通过添加方便的函数，变量以及其他类似脚本的助手使CSS能更加快速得书写和更加简单的控制。Sass-使用变量使用变量sass让人们受益的一个重要特性就是它为css引入了变量。sass使用$符号来标识变量变量声明 $highlight-color: #F90;变量引用 .selected border: 1px solid $highlight-color; 编译后

32、.selected border: 1px solid #F90; Sass-嵌套嵌套CSS 规则规则;在Sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。 #content .article h1 color: #333 p margin-bottom: 1.4em .aside background-color: #EEE /* 编译后 */ #content .article h1 color: #333 #content .article p margin-bottom: 1.4em #content .asid

33、e background-color: #EEE Sass的的mixin和和function功能功能 Media Queries-创建一个更易使用的混合宏$media-stack: (group: tablet, id: general, rule: only screen and (min-device-width: 700px), (group: small, id: general, rule: only screen and(min-device-width: 1100px), (group: small, id: inbetween, rule: only screen and(min-device-width: 1100px) and (max-device-width: 1400px), (group: large, id: general, rule: only screen and(min-device-width: 1400px), (group: print, id: general, rule: only print); mixin media($group, $id: general) each $media in $media-stack if($group = map-get($media, group