CSS2.0学习笔记

CSS (cascading style sheet 层叠样式表)

引入css

1. 行间样式，即

   1	<div style=""></div>

2. 页面级CSS，在head里面引入一个style标签，在里面写css代码。
3. 引用外部css文件,即

   1	<link rel=>

4. link和!import引入的区别
   1. Link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务;@import属于CSS范畴，只能加载CSS
   2. link引用CSS时，在页面载入是同时加载; @import需要页面网页完全载入后再加载
   3. link是XHTML标签，无兼容问题; @import是CSS2.1提出的 ，低版本浏览器不支持
   4. link使用Javascript控制DOM改变样式，而@import不支持

• 把html,css放在服务器上，浏览器下载一行代码并执行一行代码。属于异步执行，因为计算机的异步和同步相对于我们的理解来说是相反的。

(2)选择器

1. id选择器一个元素只能有一个id选择器。

   1	<div id=""></div>

2. 类选择器,一个类选择器可对应对个元素。

   1	<div class=""></div>

3. 标签选择器，适用于标签，例如说div a。
4. 通配符选择器 *{} 选中所有的标签。这个用于初始化标签非常有作用。
5. 属性选择器

• 选择器的权重（从高-低）

  important（正无穷）->行间样式（1000）–>id（100）–>class 属性选择器 （10） –>标签选择，伪元素（1） ——>通配符（0）

父子选择器： div span{}

• 特点：不在于一定要使用标签选择器，class id 选择器都可以，只要成立父子关系就可以了。

• 注意：浏览器定义父子选择器的顺序为从右到左，因为这样速度更快。

• 子元素选择器：即符号下的直接向下的选择方式，例如h1>strong{;}

• 注意：浏览器定义父子选择器的顺序为从右到左，因为这样速度更快。

并列选择器：
特点：当同时存在相同标签及相同类名时，可通过标签名和类名混合使用达到选中区域的效果。

权重选择器：
特点：只要是同一横行想选择器，权重值为相加，若权重值一样，则后面的代码会覆盖前面的代码。

分组选择器：
特点：例如说div span想设置一样的背景颜色，在减少冗余的角度来看，div span{}这样写css。

(3)CSS基础属性：

1. 字体大小
   font-size px; 浏览器默认为16px;
   font-wight:blod 字体加粗
   font-style:italic；斜体
   font-family:arial;互联网上的通用字体
   color:设置字体颜色.
2. 纯英文字母
3. 颜色代码 （00-ff，00-ff,00-ff）分别代表rgb，red green,blue.
4. 颜色函数，color:rgb(0-255,0-255,0-255)

1
2
3
4
5
6

border:10px solid(dotted点状，dashed 条状) black;（10px粗细，实线，黑色）
text-align:right;文本向右对齐  text-align: center 文本居中显示
line-height: 20px； 行高。因此让单行文本水平居中的做法就是让行高=容器高度
text-indent:2em(2个font-size)
cursor:(pointer 当光标移动到哪个区域，就会变成另外的符号，help ,move, pointer)
伪类选择器 a:hover{} 在元素被光标选中的时候触发各种效果。

2. 元素的分类：
   行级元素 inline

• 特征：内容决定元素所占位置，不可以通过css改变宽高。

  1	<span> <strong> <em> <a> <del>

块级元素 block

• 特征：独占一行，可通过css改变宽高

  1	<div> <p> <ul><li><ol> <form> <address>

行级块元素 inline-block

• 特征：1.内容决定元素所占位置 2.可以通过css改变宽高。

  1	<img> <input>

• 凡是带有inline的都显示文字特性，因此会被分割，导致多张图片并排会有空隙产生。
• 注意：在开发的时候先写css样式再写html，因为clas是一对多关系的，所以这些属性都能通过组合加上去——先定义后选样式。
• 注意：用标签选择器做初始化，因为标签选择器的权重是0，若是用户想自定义修改那么通过增加权重就可以实现。