Web初级——CSS3

CSS

Cascding Style Sheet（层叠级联样式表）

1.前言

1.1CSS优势

• 内容和表现分离
• 可以实现CSS代码复用
• 利用SEO，容易被搜索引擎收录

1.2CSS导入方式

<!--行内样式,在标签元素中添加style-->
<h1 style="color:red">..</h1>

<!--代码块方式(内部样式)可以直接在HTML代码中使用-->
<style>
选择器{
    声明1;
    声明2;
    ...
}
</style>

<!--链接方式(外部样式)-->
<link rel="stylesheet" href="css代码路径">
<!--导入方式(外部样式)-->
<style>
    @import url("CSS路径");
</style>
优先级:就近原则

2.选择器

2.1基本选择器

    <!--对一类标签选中，优先级最低-->
    /*标签类型{
        声明;
    }*/
         h1{
             color: aqua;
         }
    <!--对某个类标记标签选中-->
    /*.+class类名{
        声明;
    }*/
    /*<h1 class="leye">我是标题</h1>*/
        .leye{
            color: aqua;
        }
    <!--对某个标签选中,优先级最高-->
    /*#+class类名{
         声明;
    }*/
    /*<h1 id="leye">我是标题</h1>*/
        #leye{
            color: aqua;
        }

2.2层次选择器

2.2.1后代选择器

body p{所有body后的p全部选中
    ...
}

2.2.2子选择器

body>p{只有body的直接子代被选中
    ...
}

2.2.3兄弟选择器

.class+p{ 选中class类的紧相邻下兄弟p
    ...
}

2.2.4通用兄弟选择器

.class~p{选中class类所有相邻的下兄弟
    ...
}

2.3伪类选择器

body p:first-child{选中body子代中的第一个孩子，可以更改其他修饰词
    ...
}

伪类选择器修饰词

first（last）-child: 当前元素的第一个（最后一个）孩子

nth-child(n) :当前元素的父类的第n个孩子

nth-of-type(n) :选择父元素父元素下第n个该类型的元素

hover:选中该类型鼠标悬浮时的状态

active:选中该类型鼠标点击时的状态

visited:选中该类型鼠标点击后的状态

after:在元素后添加代码，配合content使用

h1:after {content:url(logo.gif)}  在h1后面加一张图片

2.4属性选择器

a[id=""]{选择id为" "的a标签
    ...
}
id^=""以“”开头
id*=""包含“”
id$=""以“”结尾

3.样式

3.1字体样式

font-family:字体名称
font-size:  字体大小
font-weight:字体粗细
color:      字体颜色

3.2文本样式

text-align:center(排版)居中
text-indent:2em(首行缩进)2em
line-height:300px(行高)300px
text-shadow: 阴影颜色 水平位移 垂直位移 阴影半径
text-decoration:underline下划线
                line-through中划线

3.3列表样式

list-style:
none 无
circle 空心圆
decimal 数字
square 方形

4.背景

background-image:url("图片路径");背景图片
background-repeat:repeat-x水平平铺
                 repeat-y垂直平铺
                 no-repeat不重复
<!--聚集方式-->
background: 颜色 url("") 位置 平铺方式

5.盒子模型

(外边距)margin:顺时针
(边框)border : 边框粗细 实现方式 颜色;
(内边距)padding:顺时针
(块居中)margin:0 auto;
(圆角边框)border-radius:顺时针
(盒子阴影)box-shadow:颜色

6.浮动

display:block    转为块元素
display:inline   转为行内元素
display:none     元素消失
float:left/right 向左/右浮动

6.1父级边框塌陷

解决办法：

1.增加父级边框宽高度

2.在父级边框下新建一个块，并清除该块的浮动

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

父级的浮动元素在新块中被拒绝会撑开父级浮动

3.使用伪类的after

XX:after{
    content:'';
    display:block;
    clear:both;
}

6.2overflow

overflow:scroll    滚动条
overflow:hidden    隐藏

7.定位

7.1相对定位

position:realtive   相对定位
top:.(正下负上) left:(正右负左).. right:.. bottom: ..
相对元素原来位置

7.2绝对定位

父元素没有定位的情况下，相对浏览器边框定位

父元素定位的情况下，相对父级元素定位

position:absolute 绝对定位,随着滑动会改变位置

7.3固定定位

position:fixed 固定定位,相对浏览器边框定位,随着滑动不会改变位置

7.4层级

z-index: n 0为最底层

opacity: n n(0~1)透明度