选择器
选择器-介绍/*基础语法*/
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;
}