狗仔式CSS课件

来源：互联网发布：sketchar软件下载编辑：程序博客网时间：2024/05/16 09:13

HTML is what 7 东东

HTML(HyperText Markup language)超文本标记语言

“超文本”就是指页面内可以包含文字、图片、链接，甚至音乐、程序等非文字元素。

超文本是用超链接(A标签)的方法，将各种不同空间的文字信息组织在一起的网状文本，就是提供一个目录，可以快速查看你的信息。

HTML发展历史(History)

文档模式：HTML文档模式是通过使用文档类型DOCTYPE来指定的。目前文档模式有三种：又叫怪异模式，Quirks mode）：对页面的处理方式永久冻结在IE5.5，主要体现盒模型的差异、标准模式（standards mode）和准标准模式。对于准标准模式，一般又是通过过渡型（transitional）和框架集型（frameset）来触发。

准标准模式下很对特性都会按照浏览器标准去解析（当然，不是所有），文档开始处如果没有发现文档类型声明，则默认是混杂模式。混杂模式不值得推荐，目前大部分网站用的都是标准模式。

在进行样式调试的时候要通过DW新建一个页面，不要只是把内容copy到手打的页面上，这样会搞死自己，样式调来调来都没有反应。(Me以前也是这样搞的，每次都搞个半死，就因为没有文档标准。)

在DW中新建文件选择文档标准(以下是DW4的新建html界面(家里PC不给力),DW6才有html5文档标准，最好用DW6了，现在最新的Version)

无标准HTML文档：(这是什么情况，怪异模式，你妈喊你，落雨回家收衫了。)

<html><head><title>Title of the document</title></head><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>

带有 XHTML 1.0 的 HTML 文档：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Title of the document</title></head><body>The content of the document......</body></html>

带有 HTML5 DOCTYPE 的 HTML 文档：

<!DOCTYPE html><html><head><title>Title of the document</title></head><body>The content of the document......</body></html>

HTTP又是what?

超文本传输协议 (HTTP-Hypertext transfer protocol) 是一种详细规定了浏览器和万维网服务器之间互相通信的规则，通过因特网传送万维网文档的数据传送协议。如：http://www.xiami.com/

HTML文档结构

HTML程序的文件扩展名：.html或.html

文档结构

<!DOCTYPE html>  <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>网页标题</title><meta name="keywords" content="关键字" /> <meta name="description" content="此网页描述" /><!--可以在头部添加css文件，脚本等等--><link rel="stylesheet" type="text/css" href="common/old.css"><script src="common/jquery.js" type="text/javascript"></script></head><body>网页正文内容</body></html>

HTML标签(Tags)

标记符中的标记元素用尖括号括起来，带斜杠的元素表示该标记说明结束；大多数标记符必须成对使用，以表示作用的起始和结束；标记元素忽略大小写，即其作用相同。

<html></html> 创建一个HTML文档<head></head> 设置文档标题和其它在网页中不显示的信息<title></title> 设置文档的标题        <h1></h1> 最大的标题<pre></pre> 预先格式化文本<img src="/img10/125610/5695931357615940_2.jpg" alt="If Time Stood Still-Ethan Gibson"> 图片

DIV+CSS IS 何方神圣

div是什么？div就是html中的一个名个div的tag(这不是白讲嘛，好像是。。)。

DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离(骨肉分离嘛，这是)，比喻：肉体(html内容)在台上表演，思想(CSS)在幕后控制肉体的表现形式。

“DIV+CSS”其实是错误的叫法，而标准的叫法应是XHTML+CSS。因为DIV与Table都是XHTML或HTML语言中的一个标记，而CSS只是一种表现形式。也许其提出者本意并没有错，但是跟风者从表现曲解了其意思，认为整个页面就应当是DIV+CSS的组合。

div is what

div标签定义 HTML 文档中的分隔（division）或部分（section）。

div标签常用于组合块级元素，以便通过样式表来对这些元素进行格式化。

CSS is what

CSS是层叠样式表（Cascading Style Sheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。

样式表的种类：

外部样式：将网页链接到外部样式表。(把样式装在一个.css后缀的样式文件，要学会装，装是一种习惯。)

<linkhref="/层叠样式表/样式.css"rel="stylesheet"type="text/css"/><linkhref="/百度百科/样式.css"rel="stylesheet"type="text/css"/><!--在使用的时候，最好是把上面的汉字改成拼音，这样可以确保网页在不支持中文的系统中显示正常。例如写成如下形式：--><linkhref="/BaiduBaike_ShiLi/baidubaike.css"rel="stylesheet"type="text/css"/>

内页样式：在网页上创建嵌入的样式表。(把样式写在style标签里)

<style type="text/css">body{background:grey;}</style><!--在嵌入式样式表中我们可以使用@import导入一个外部样式表，例：--><style type=”text/css”>@import url(外部样式表位置)；…其它嵌入式的样式定义…</style>

行内样式：应用内嵌样式到各个网页元素。(把样式写在style标签里，但是直接插在元素里面)

<h1 style=”color:red;”>变为红色</h1>

CSS选择器

选择器的理解，直接影响你写样式的技术。如：谈恋爱选择对象很重要，连对象都不会选，怎么进行谈恋爱呢。

样式结构

元素选择器：元素{属性:值;}

/*h1颜色为黑色*/h1{color:#000}/*h2,h3颜色为红色*/h2,h3{color:#f00}

类选择器：.类名{属性:值;}

/*定义.black类颜色为黑色*/.black{color:#000}<h1 class="black"></h1>/*定义.red颜色为红色*/.red{color:#f00}<h1 class="red"></h1>

ID选择器：#id名{属性:值;}ID名不能重复(就像身份证同名，后果很严重)

/*定义ID为black的元素颜色为黑色*/#black{color:#000}<h1 id="black"></h1>/*定义ID为red的元素颜色为红色*/#red{color:#f00}<h1 id="red"></h1>

伪类选择器：伪类选择器可以以不同方式格式化超级链接a元素的四种不同状态

a:link 是用在未访问的链接的选择器a:visited 是用在已访问过的链接的选择器a:hover 是用在鼠标光标放在其上的链接的选择器a:active 是用在获得焦点（比如，被点击）的链接的选择器

个人认为，只要定义a、a:hover(a的原来样式和鼠标经过样式)就可以了，其它都很多余，也是个搞死人的东西。

伪元素选择器：这些只要提现在css3标准上，自己search了。

CSS优先级

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

内联样式(inline style) > ID选择符 > 类选择符(class), 伪类(pseudo-class)和属*(attribute)选择符 > 类别(type)，伪对象(pseudo-element)

理解这个东西要一定时间，但我有一个工具，可以认你很快理解它们工作原理的，秋后再讲，别急。。

朝阳网络原创作品:http://www.114my5.top/

0 0