CSS3

css3

1.引用方式

行内样式

内部样式

外部样式

优先级 覆盖原则 后使用样式会覆盖之前样式

2.选择器

选择某一个或者某一类元素

2.1基本选择器

1.标签选择器

h1{color:red;}

2.类选择器

.style{color:red;}

<h1 class="style"></h1>

3.id选择器(id不能已数字开头)

#style{color:red;}

<h1 id="style"></h1>

优先级：id选择器>类选择器>标签选择器

2.2层次选择器

1.后代选择器

body中的全部p标签

body p{color:red;}

2.子选择器

body中的一代p标签

body>p{color:red:}

3.相邻兄弟选择器

class=style的向下一个p

.style + p{
color:red;
}

4.通用兄弟选择器

class=style的下面所有p

.style~p{color:red;}

2.3结构伪类选择器

/*ul的第一个子元素*/
ul li:first-child{color:red;}
/*ul的最后一个子元素*/
ul li:last-child{color:red;}

2.4属性选择器(常用)

1.a中存在id属性的元素

a[id]{
color:red;
}

2.a中id=first属性的元素

a[id=first]{
color:red;
}

3.class中有link的元素(*= 包含)

a[class*="link"]{
color:red;
}

4.a中href中以http开头

/*正则表达式的格式
^= 以这个开头
$= 以这个结尾*/
a[href^=http]{
color:red
}

3.美化网页元素

3.1字体样式

font-family 字体

font-size 字体大小

font-weight 字体粗细

color 字体颜色

3.2文本样式

1.颜色 color 单词 RGB RGBA(多一个透明度 0~1之间)

2.文本对齐的方式 text-align=center

3.首行缩进 text-indent:2em;

4.行高 line-height:

5.装饰 text-decoration:

6.文本图片水平对齐：vertical-align:middle

3.3超链接伪类

a:hover 鼠标悬停

a:active 鼠标激活

3.4背景

/*颜色 图片 图片位置 平铺方式*/
background:red url 100px  10px no-repeat;

3.5渐变

grabient

4.盒子模型

4.1什么是盒子

margin外边距

padding内边距

border 边框

4.2边框

/* 大小 样式 颜色*/
border：1px solid red;

4.3内外边距

margin：0px;/*四边全为0*/
margin：0px 1px;/*上下为0，左右为1*/
margin：0px 1px 2px 3px;/*上右下左顺时针的顺序*/

4.4圆角边框

border-radius：50px 20px 10px 5px;/*左上开始顺时针*/

5.浮动

块级元素 独占一行

行内元素 不独占一行

5.1display

block 块元素

inline 行内元素

inline-block 块元素

none

5.2float

float：right;
float：left;
clear:both;/*清除浮动*/

5.3父级边框塌陷的问题

1.浮动元素后面增加空div

<div class="clear"></div>

.clear{
    clear:both;
    margin:0;
    padding:0;
}

2.设置父元素高度

#father{
    border:1px #000 solid;
    height:800px;
}

3.overflow

overflow:hidden;

4.父类添加一个伪类：after

#father:after{
    content:'';
    display:block;
    clear:both;
}

6.定位

6.1相对定位

positon:relative 相对于原来的位置，进行指定的偏移,任然在标准文档流中，原来的位置会被保留

top：-20px;
left
butten
right

6.2绝对定位

position:absolute

1.没有父级元素定位的前提下，相对于浏览器定位

2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移

3.在父级元素范围内移动

相对于父级或者浏览器的位置，进行指定的偏移,不在标准文档流中，原来的位置不会被保留

6.3固定定位

position：fixed 相对于浏览器

6.4z-index

默认是0，最高无限