02 CSS/javaScript

CSS（Cascading Style Sheets）是层叠样式表用来设置网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

CSS和HTML的结合方式

1. Style属性方式

2. 内部样式表方式: HTML提供的<style标签>,须写在<head>标签内部

CSS代码

</style>

3. 引入外部文件的方式（常用的方式）

* 定义一个外部的CSS文件。

* @import url("css文件的地址");需要写在<style>标签的内部,所以依然也在head内部

4. html提供的标签（常用的方式）

rel：代表当前的文件和引入文件的关系。

type：类型

href：CSS的地址

CSS 语法由三部分构成：选择器、属性和值：

selector {property: value}

注意:如果值为若干单词，则要给值加引号;

多重声明：如果要定义不止一个声明，则需要用分号将每个声明分开

该在每行只描述一个属性，这样可以增强样式定义的可读性

CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

CSS的选择器（★★★★★）: 编写的CSS代码作用在哪个标签上。

(标签名)类型选择符(E)

通配选择符 (*)

适用于所有对象

类选择符(E.class)

以class属性包含myclass的E对象作为选择符。

ID选择符(E#id) , id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

语法: E#myid{ sRules }

说明: 以唯一标识符id属性等于myid的E对象作为选择符。

CSS扩展选择器：

* 关联选择器：多个标签之间产生关系。(CSS 派生选择器),派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。

中间用空格隔开

例如div font{ }就这这种选择器, 作用域div下还有font标签,则产生效果

* 组合选择器：对多个不同的选择器设置相同的样式
* 中间用逗号隔开

例如#buhaha2, .haha{ } 则两个选择器具有相同的样式

* 伪元素选择器：CSS定义好的选择器
* 如果使用超链接的4个状态，使用的顺序： L V H A

E:link{ sRules } 设置超链接a在未被访问前的样式。

E:hover{ sRules } 设置元素在其鼠标悬停时的样式。

E:active{ sRules } 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。

E:visited{ sRules } 设置超链接a在其链接地址已被访问过时的样式。

* CSS的优先级
               * （一般情况下）从上到下，由外到内，优先级从低到高的。
               * 特殊情况：标签名选择器 < class选择器 < ID选择器 < style属性

          * CSS的代码规范
               * 选择器名称{属性名:属性值; 属性名:属性值; ...}
               * 如果一个属性有多个值，值与值直接用空格隔开
                    * 例子 div{border:值1 值2 值3}

          * CSS的布局（了解）
               * 盒子模型

float：none | left | right

默认值：none

适用于：所有元素

继承性：无

动画性：否

计算值：指定值

取值：

none：设置对象不浮动

left：设置对象浮在左边

right：设置对象浮在右边

CSS背景

background-color

为元素设置背景色。这个属性接受任何合法的颜色值。

例如希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：

p {background-color: gray;}

background-color 不能继承，其默认值是 transparent。有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

background-image 背景图像

要把图像放入背景，需要使用属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}大多数背景都应用到 body 元素，不过并不仅限于此。

CSS文本.

CSS字体..

CSS列表...

CSS表格....

CSS框模型

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {

margin: 0;

padding: 0;

}

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。

CSS定位

CSS position 属性: 通过使用 position 属性，我们可以选择 4 中不同类型的定位，这会影响元素框生成的方式。

position 属性值的含义：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

---------thinking、architecture、code、treasure---------