标签:
第一章 CSS需要的HTML
一、用HTML来组织内容,用CSS使内容看起来更美观
思考布局结构:
(1)HTML根据逻辑划分和识文本在网页中所起的作用,如<h1> 标签介绍最重要的网页内容,其他标题将内容分为其他次要的,但却与之相关的小节。
(2)使用名称意思与该内容在网页中所起的作用最接近的标签,而不是根据内容的外观定义标签
(3)简洁、清晰的HTML可以提升网页在搜索引擎网站上的排名
注:登录HTML5doctor.com网站,有助于理解好HTML5标签
二、IE条件注释
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
只有IE9之前的版本可见js代码
三、可以忘却的HTMl标签和属性
(1)<font>来控制显示文本
(2)不要使用<b>和<i>
<strong>用来强调某一个词或者短语,对于较次要的文字,则可以使用<em>标签进行强调
(3)不要使用<table>标签进行布局
(4)不要使用仅能修饰内容外观的笨拙的<body>标签属性
(5)不要滥用<br>标签
注:http://validator.w3.org上,能快速确定HTML是否有效
四、doctype 文档的重要性
解释了哪些标签、属性、或值对于HTML的某一个特定类型是有效的。告诉web浏览器你正在使用哪个版本的HTML或XHTML。
第二章 创建样式和样式表
一、解读样式表
大多数情况下,选用外部样式表较好。它使得网页创建变得更加容易、更新网站也更迅速。对于接收端来说,外部样式表有助于使网页载入时速度更快。此外,web浏览器在下载外部样式表时,还会在访问者的计算机上保存这个文件,便于下一次快速访问,当访问者跳转到该网站使用同一份样式表的其他网页时,浏览器就不必下载样式表,只要将这个外部样式表从高速缓存中调用出来
注:强制从新加载ctrl+F5 解决高速缓存问题
二、几种不同类型的样式表
(1)内部样式表
<style>
h1 {
color: #ffffff;
font-family: Arial;
}
</style>
注:1、<style>标记是html的,而不是css的
2、javacript代码一般放在 样式表之后,许多js代码都依赖于css
3、HTML对于内部样式只要求有开始的<style>标签
早期版本:必须加上type= "text/css" 如<style type= "text/css"> 如果没有,可能会出错。
4、http://jigsaw.w3.org/css-validator/可以检验css代码是否有错
(2)外部样式表
1)HTML的<link>标记
HTML5: <link rel="stylesheet" href="css/style.css">
HTML4.01: <link rel="stylesheet" type="text/css" href="css/style.css">
XHTML: <link rel="stylesheet" type="text/css" href="css/style.css"/
2)css的@improt指令
<style>
@import url(css/syltes.css)
</style>
特别注意:
<style>
@import url(css/form.css)
@import url(css/syltes.css)
p { color:red; }
</style>
要把@improt写在css样式规则之前,如果现在之后,如
<style>
p { color:red; }
</style>
则浏览器会忽略@import url(css/form.css)、@import url(css/syltes.css)
总结:<link>标签更常用,有些情况下@import方法会减缓样式表的下载速度
(3)行内式(不推荐使用)
<h1 style="color: #666666"; font-size:3 em;" >
第三章 选择器:明确设置哪些样式
一、选择器类型
1、标签选择器:整体控制
h1 {
font-size: 12px;
}
2、类选择器: 精确控制
精确控制网页上的某个具体元素,而不管它有哪些标签
注意:
(1):每个选择器名称的开头出都有一个圆点 .copyright .special
(2): 类名的命名规范
1)只允许使用字母、数字、连接符(-)和下划线(_)
2)必须始终以字母开头
3)类名称区分大小写
.SIDEBAR和.sidebar是两个不同的类
3、ID 选择器:控制特殊的网页元素
ID选择器对基于JavaScript,或者非常冗长的网页有些特殊的用途
1)命名规则,同类选择器
2)使用规则
#banner {
background: #CC0000;
}
4、派生选择器:所有出现在某个标签内部的标签都添加相同的样式
ul li a{
font-size: 14px;
}
所有出现在li内部的链接a都使用14号大小的字体
注意:同 p.intro的区别 p.intro:含有intro类的p标记
5、属性选择器
6、子选择器
(1) 尖括号>
body > h2
(2)
1)
:fist-child
例如li: fist-child 第一个子元素li
:fist-of-type
例如p:fist-of-type 所有p元素中的第一个
2)
:last-child
:last-of-type
3)
:nth-child()
:nth-of-type()
例如:
img:nth-of-type(odd) { float:left;}
img:nth-of-type(even} { float: right;}
基数的图片左浮动,偶数的图片右浮动
前后两者的区别:
如li: fist-child 第一个子元素li
li:fist-of-type
前者:父元素下第1个元素且这个元素为li ,若不是,则选择失败
后者:父元素下第一个li类型的元素
7、同胞选择器
1)相邻同胞选择器(+)
h2+p 每个<h2>下面的第一个段落
2)通用的同胞组合选择器(~)
h2~p 属于h2同胞标签(同一级)的所有<p>
8、:not()选择器 排除
否定伪类
例如
<p class="classy">
.classy { color:red; }
p:not(.classy) { color: blue; } ()里的内容表示不想选择的内容
注::not()选择器 只是用与通用选择器、元素选择器、类选择器、ID选择器、或者伪类
9、伪类和伪元素:本身没有标签,但是仍然易于识别的网页部位
伪类:
1) 链接常用的四中伪类:
a: link 有链接属性时
a:visited 链接地址已被访问过
a:active 被用户激活
a:hover 鼠标悬停
2) 其他伪类
:focus 当获得焦点时
比如通过改变文本框的颜色,表明要输入的位置(当行文本框、密码框、或者多行的<textarea>方框)
input: focus { }
::selection 被选中的 必须要两个:
例如:
p::selection {
color: red;
}
伪元素:
:first-letter
:fist-line
:before 在指定的元素前添加内容
<p class="tip">
p.tip { content: "HOT TIP"}
:after 在指定的元素后面添加内容
二、
1、给标签组定义样式
1)构建群组选择器:创建一个用逗号分隔符的选择器列表
h1, p, .copyright, #banner {
color: #F1d33;
}
2)通用组选择器:给让网页的所有标签定义样式
* {
font-weight: bold;
}
2、给标签内的标签定义样式
1)祖先标签:当一个HTML标签涵盖另一个标签时,HTML就成了该标签的祖先
2)派生标签:处在一个标签或多个标签内部的标签就是派生标签
3)父标签:离一个标签最近的祖先
4)子标签:直接被另一个标签包围的标签就是子标签
5)同胞标签:彼此相邻,并且相连于同一个父标签的标签
标签:
原文地址:http://www.cnblogs.com/nankeyimeng/p/5023918.html