码迷,mamicode.com
首页 > Web开发 > 详细

CSS3秘笈读书笔记 2015/12/5

时间:2015-12-06 17:39:16      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:

第一章 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

3HTML对于内部样式只要求有开始的<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)同胞标签:彼此相邻,并且相连于同一个父标签的标签

CSS3秘笈读书笔记 2015/12/5

标签:

原文地址:http://www.cnblogs.com/nankeyimeng/p/5023918.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!