CSS3学习笔记

选择器

选择器-介绍

/*基础语法*/
h1{
    color: burlywood;
    font-size: 50px;
}

/*选择器分组*/
h2,a{
    color: #5a4bff;
}

/*继承 未被定义的生效*/
body{
    color: violet;
}

选择器-派生选择器

/*
派生选择器:
    通过依据元素在其位置的上下文关系来定义样式*/
li strong{
    color: #5a4bff;
}

strong{
    color: red;
}

选择器-ID选择器

/*
1.id选择器:
    id选择器可以为标有id的HTML元素指定特定的样式
    id选择器以"#"来定义
*/
#pid{
    color: #5a4bff;
}

/*
2.id选择器和派生选择器:
 目前比较常用的方式是id选择器常常用于建立派生选择器*/
#pid a{
    color: pink;
}

选择器-选择器

/*
1.类选择器
    类选择器以一个点显示
*/
.pclass{
    color: yellow;
}

/*2.class也可以用做派生选择器*/
.pclass a{
    color: pink;
}

选择器-属性选择器

<style type="text/css">
       /* 1.属性选择器(IE6不支持)
        对带有指定属性的HTML元素设置样式*/
        [title]{
            color: red;
        }
      /* 2.属性和值选择器*/
        [title=te]{
            color: blue;
        }
    </style>

盒子模型

盒子模型-概述

1.盒子模型的内容范围包括:(W3C标准和IE不同)
margin, 外边距
border, 边框
padding, 内边距
content 内容,设置宽和高是设置内容部分
部分组成

盒子模型-内边框

/*
1.内边距
    内边距在contetn外,边框内
2.内边距属性:
 padding      设置所有边距
 padding-bottom   设置底边距
 padding-left     设置左边距
 padding-right    设置右边距
 padding-top      设置上边距*/
td{
    padding: 200px;
    padding-left: 1px;
}

盒子模型-边框

/*
1.CSS边框:
    我们可以创建出效果测设的边框,并且可以应用于任何元素
2.边框的样式:
    border-style:定义了10个不同的非继承样式,包括none*/
p{
    border-style:double ;
}

/*
3.边框的单边样式:
    border-top-style
    border-left-style
    border-right-style
    border-bottom-style*/
p{
    border-top-style: dotted;
}

/*
4.边框的宽度
    border-width*/
p{
    border-width: 10px;
}

/*
5.边框单边的宽度
    border-top-width
    border-left-width
    border-right-width
    border-bottom-width*/
p{
    border-right-width: 1px;
}
/*
6.边框的颜色
    border-color*/
p{
    border-color: yellow;
}
/*
7.边框单边的颜色
    border-top-color
    border-left-color
    border-right-color
    border-bottom-color*/

/*
1.CSS3边框:
    border-radius:圆角边框
    box-shadow:边框阴影
    border-image:边框图片*/

/*border-radius:圆角边框*/
div{
    border-radius: 10px;
    width: 100px;
    background-color: #5a4bff;
    text-align: center;
    border: 2px solid blue;
}

/*box-shadow:边框阴影*/
a{
    width: 100px;
    height: 100px;
    background-color: yellow;
    text-align: center;
    box-shadow: 10px 10px 2px red;
}

盒子模型-外边框

/*
1.外边距
 围绕在内容变卡un个的区域就是外边距,外边距默认为透明区域
 外边距接受任何长度单位,百分数值
2.外边距常用属性:
 margin            设置所有外边距
 margin-bottom     设置底边距
 margin-left       设置左边距
 margin-right      设置右边距
 margin-top        设置上边距*/
body{
    margin: 0;
}
.mg{
    background-color: #5a4bff;
    width: 100px;
    height: 100px;
    margin: 100px;
    margin-top: 20px;
}

/*
综合*/
.container{
    margin: 10px;
}
.bd{
    border-style: dotted;
}

盒子模型-外边框合并

1.外边距合并
外边距合并就是一个叠加的概念

2个相邻的外边距会合并为大的那一个

盒子模型-通过符

*{
     margin: 0px;
    padding: 0px;
}

定位

1.CSS定位:

改变语速在页面上的位置
2.CSS定位机制:
普通流:元素按照其在HTML中的位置顺序决定排布的过程
浮动
绝对布局
3.CSS定位属性:
position 把元素放在一个静态的,相对的,绝对的,或固定的位置中
top 元素向上的偏移量
left 元素向左的偏移量
right 元素向右的偏移量
bottom 元素向下的偏移量
overflow 设置元素溢出其区域发生的事情
clip 设置元素显示的形状
vertical_align 设置元素垂直对齐的方式
z_index 设置元素的堆叠顺序 (偏移量失效) 谁大谁在前

CSS position属性:
static 静态的(偏移量失效)
relative 相对的
absolute 绝对的

fixed 固定的

定位-浮动

1.浮动
float属性可用的值
left:元素向左浮动
right:元素向右浮动
none:元素不浮动
inherit:从父类继承浮动属性
2.clear属性
去掉浮动属性(包括继承来的属性)
clear属性值:
left,right:去掉元素向左,向右浮动
both:左右两侧均去掉浮动
inherit:从父集继承来clear的值

选择器

类选择器
1.类选择器允许以一种独立与文档元素的方式来指定样式
例如: .class{}
2.结合元素选择器:
例如:a.class{}
3.多类选择器
例如 .class.class{}

选择器->

/*
1.ID选择器(数据加载: 先找到结构,再找到内容,再渲染,类选择器是先渲染,再结构,内容)
    ID选择器类似于类选择器,不过也有一些重要差别
    例如:#id{}
2.类选择器和ID选择器区别
    ID只能在文档中使用一次,而类可以多次使用
    ID选择器不能结合使用
    当使用js时候,需要用到id
*/
#div{
    color: brown;
}

/*
后代选择器
    后代选择器可以选择做为某元素后代的元素
*/
p strong{
    color: blue;
    font-size: 50px;
}

/*
元素选择器
    与后代选择器相比,子元素选择器智能选择做为某原则子元素的元素
    例如:h1>stirng{};*/
h1>strong{
    color: orange;
    font-size: 50px;
}/*视频出错*/

/*
相邻兄弟选择器
    可选择紧接在另一个元素后的元素,且两者有相同父元素
    例如:h1+p{}
    */
li+li{
    color: #5a4bff;
    font-size: 20px;
}

常用操作

对齐操作

1.使用margin属性进行水平对齐

2.使用position属性进行左右对齐

3.使用float属性进行左右对齐

尺寸操作
1.属性
height 设置元素高度
line-height 设置行高
max-height 设置元素最大高度
max-width 设置元素最大宽度
min-width 设置元素最小宽度
min-height 设置元素最小高度
width 设置元素宽度

分类操作
1.属性
clear 设置一个元素的侧面是否允许其他的浮动元素
cursor 规定当指向某元素之上时显示的指针类型
display 设置是否及如何显示元素
float 定义元素在哪个方向浮动
position 把元素放置到一个静态的,相对的,绝对的,固定的位置
visibility 设置元素是否可见或不可见

li{
    display: inline;/*一行,适合做导航栏*/
}

动画

2D,3D转换
1. 通过CSS3转换,我们能够对元素进行移动,缩放,转动,拉长或拉伸
转换是是元素改变形状,尺寸和位置的一种效果
可以使用2D,3D来转换元素
2. 2D转换方法:
translate() 平移
rotate() 旋转
scale() 缩放
skew() 倾斜
matrix() 矩阵
3. 3D转换方法
rotateX()
rotateY()

.div2{
    transform: translate(200px,100px);
    -webkit-transform: translate(100px,100px);*/
/*safari chrome*//*

    -ms-transform: translate(200px,100px);*/
/*IE*//*

    -o-transform: translate(200px,100px);*/
/*opera*//*

    -moz-transform: translate(200px,100px);*/
/*firefox*//*

}

过渡
1.通过使用CSS3,可以给元素添加一些效果
2.CSS3过渡是元素从一种样式转换成另一种样式
动画效果的CSS
动画执行的时间
3.属性：
transition 设置四个过渡属性
transition-property 过渡的名称
transition-duration 过渡效果花费的时间
transition-timing-function 过渡效果的时间曲线
transition-delay 过渡效果开始时间

动画
　1.通过CSS3,也可以进行创建动画了
　2.CSS3的动画需要遵循@keyframes规则
规定动画的时长
规定动画师名称

div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation: anim 5s infinite alternate;
}

@keyframes anim {
    0% {
        background-color: red;
        left: 0;
        top: 0
    }
    25% {
        background-color: blue;
        left: 200px;
        top: 0
    }
    50% {
        background-color: yellowgreen;
        left: 200px;
        top: 200px
    }
    75% {
        background-color: #cd452d;
        left: 0;
        top: 200px
    }
    100% {
        background-color: red;
        left: 0;
        top: 0
    }
}

多列
1.在CSS3中,可以创建多列来对文本或者区域进行布局
2.属性:
column-count
column-gap
column-rule

.div1{
    column-count: 3;
    column-gap: 100px;
    column-rule: 5px outset red;
}