css思维导图及简单知识点

css思维导图

css主要是用于修饰装饰网页的美观度

css引入方式

1. 内嵌式引入css样式

<style type="text/css">
body{
font-size:30px;
}
</style>

2. 行内样式：直接在标签里加css样式

<b style="font-size:56px;>巴拉巴拉</b>

3. 外链样式：把css当成一个文件，通过link标签引入到html中

<link  rel="stylesheet" type="text/css" href="css/main.css">

4.嵌入样式：是内嵌式和外链式的一种综合使用
同时style标签里也可以加入其他样式

<style type="text/css">
  @import url("css/style.css");

</style>

选择器

1.标签选择器
通过标签的名字命名

body{
color:red
}

2.id选择器
标签中的id属性，通常应用于某些标签中独有的样式

#one{
color:red
}

3.类选择器
标签中的class属性
通常应用于某几个标签具有相同的样式

.pink{
color:pink
}

4.全选择器
使用*号来表示对整个html中所有标签都起作用

*{
font-size:36px
}

5.包含选择器：嵌套 中间用空格间隔
空格式包含选择器的标示

#content p{
color:red;
}

6.分组选择器
多个选择符同时具备同一种样式时使用分组选择器
标志是逗号

body,p,one,h1{
color:red;
}

7.标签指定式选择符
中间不会存在任何符号

h1#one{
color:red;
}

8.组合选择器：将前面7种综合起来用

定位布局

定位position
1.绝对定位
absolute 将对象从文档流分离出来，通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据body对象。
2.相对定位
relative 对象不从文档中分离，通过设置left，right，top。bottom四个方向相对于自身位置进行相对定位
3.浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动的元素相互影响，可以在某个地方加上clear，清楚浮动的影响。
两个块状元素浮动起来无法放在同一行，因为块状元素就是这么霸道，所以我们可以将块状元素改成内联元素，就可以解决这个问题。

伪类

1.未访问的链接

 a:link{color:#ff0000}

2.已访问的链接

a:visited{color:#00ff00}

3.鼠标移动到链接上

a:hover{color:#ff00ff}

4.鼠标按下到链接上

a:active{color:#0000ff}

案列

<style> 
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}
</style>

效果前

效果后