css主要的作用是对页面元素进行布局设置.
css主要分为:
1.将css文件通过link标签引入到html文件中,称之为内联式
2.将在html的head标签中,通过style标签来设置页面,称之为外联式
3.直接在body标签中的元素后面通过style标签来实现布局的,成为行间式
css中的选择器的种类有很多:常见的基础选择器有
1.标签选择器 : 标签名{}
2.类名选择器 : .类名{}
3.id选择器: #id名{}
4.后代选择器
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
//id选择器
#box
{
}
//标签选择器
div
{
}
//类名选择器
.div1
{
}
//后代选择器
.div1 div
{
}
</style>
</head>
<body>
<div id="box" class = "div1">
<div>我是div2</div>
</div>
</body>选择器之间的优先级关系:
1：相同选择器，样式冲突的情况下，后面覆盖前面
2.选择器不同时:id选择器>类名选择器>标签选择器;当然行间式是大于所有选择器的
CSS中的盒模型:
盒子最里面是content,content外面包裹的是padding,再外面是border,最外面是margin
content是一个元素的内容显示的区域,padding是盒子的内边距,boder是盒子的边框,margin是盒子的外边距
css中对盒子的一些属性设置:
<!-- 文本内容的字体颜色 color:颜色值; -->
<!-- 文本位置 text-align:left(靠左对齐，默认) | right(靠右对齐) | center(居中对齐); -->
<!-- 字号大小 font-size:;单位是px -->
<!-- 文本修饰 text-decoration:underline(下划线)| line-through(中划线)-->
<!-- width:样式标签的宽度 单位是px-->
<!-- height:样式标签的高度 单位是px -->
<!-- 尺寸样式 块级标签支持，行级标签不支持 -->
<!-- 内边距 padding -->
<!-- 左内距 padding-left:数值 -->
<!-- 右内距 padding-right:数值 -->
<!-- 上内距 padding-top -->
<!-- 下内距 padding-bottom -->
<!-- 内边距 复合写法 -->
<!-- 1:padding: 0px(上) 0px(右) 0px(下) 0px(左) -->
<!-- 2:padding: 0px(上) 0px(左右) 0px(下) -->
<!-- 3:padding: 0px(上下边距) 0px(左右边距) -->
<!-- 4:padding: 0px (上下左右边距都是0px)-->
<!-- 外边距 margin -->
<!-- 左边距 margin-left:数值 | auto -->
<!-- 右边距 margin-right:数值 | auto -->
<!-- 上边距 margin-top -->
<!-- 下边距 margin-bottom -->
<!-- 外边距 复合写法 -->
<!-- 1:margin: 0px(上) 0px(右) 0px(下) 0px(左) -->
<!-- 2:margin: 0px(上) 0px(左右) 0px(下) -->
<!-- 3:margin: 0px(上下边距) 0px(左右边距) -->
<!-- 背景样式 background -->
<!-- 背景颜色 background-color:颜色值; -->
<!-- 背景图片 background-image:url("图片路径") -->
<!-- 背景图片平铺 background-repeat: repeat-x(沿着x轴平铺) | repeat-y(沿着Y轴平铺) | no-repeat(不平铺); -->
<!-- 背景图片定位 background-position: x y; -->
<!-- x轴：支持left center right 支持百分比-->
<!-- y轴：支持top center bottom 支持百分比-->
<!-- 背景图片尺寸 background-size: x y | cover |contain; -->
<!-- background:复合写法 -->
<!-- background:background-color background-image background-position background-repeat -->
/*过渡:transition*/
/*过渡时间*/
transition-duration: 2s;
/*设置有过渡效果的属性:需要哪些样式在改变的时候有过渡的效果,多个属性用逗号隔开,默认值是all*/
transition-property: background-color,height;
/*设置过渡的运动方式:过程中速度的变化*/
/*linear:匀速变化 ease:先快后慢 ease-in:先慢后快 ease-out:先快后慢 ease-in-out:先由慢到快,再由快到慢 */
transition-timing-function: ease-in-out;
/*过渡的延迟执行:过渡效果延迟多长时间再执行*/
transition-delay: 1s;
/*过渡的复合写法:过渡属性 过渡效果的时间 过渡延迟执行的时间 过渡的运动方式*/
/*transition: all 0s 2s linear;*/
/*兼容性*/
/*谷歌浏览器-webkit内核*/
/*-webkit-transition: all 0s 2s linear;*/
/*火狐浏览器*/
/*-moz-transition: all 0s 2s linear;*/
/*ie浏览器*/
/*-ms-transition: all 0s 2s linear;*/
/*欧朋浏览器*/
/*-o-transition: all 0s 2s linear;*/
/*transition: all 0s 2s linear;*/定位:不会影响到同级的布局,margin布局:如果前面的同级标签发生变化会影响到后面的同级标签的位置,float:前面的同级标签发生变化会影响到后面的同级标签的位置
定位分为三种:相对定位,绝对定位,固定定位,决定定位的形式属性是position,position的默认值是static:不定位的
relative:相对定位
①:相对定位(不会脱离文档流,还会占用原来的位置):position的值为relative,相对定位是相对于自身的位置去进行移动–>
②:绝对定位(会脱离文档流):position的值为absolute,绝对定位是相对于定位父级(定位父级就是设置了定位属性position的父级)来进行移动的,如果所有的父级都没有定位属性,绝对定位就会相对于当前的document窗口去进行定位
如只是父级仅仅是作为定位父级使用,我们只需要给父级的position属性设置为relative即可,因为相对定位不会脱离文档流,绝对定位会脱离文档流–>
绝对定位是相对于带有position属性的父级去定位,如果父级没有position,就会去找父级的父级,依次类推,直到html,如果html也没有定位属性,就会相对于当前的document窗口进行定位
③固定定位(会脱离文档流:定位脱离文档流的位置是在浮动的上面,不会影响到浮动):position的值是fixed:是相当于整个窗口来进行定位,相对于这个窗口的位置始终不变
层级关系:z-index>定位>浮动(但是文本标签中的内容还是会环绕在浮动的周围,浮动最初设置就是为了文字环绕的效果)>正常的块级盒子
<head>
<meta charset="UTF-8">
<title>2D形变</title>
<style type="text/css">
div
{
width: 200px;
height: 200px;
background-color: red;
color: white;
text-align: center;
line-height: 200px;
font-size: 30px;
margin-left: 100px;
float: left;
transition:all 2s 0s linear;
}
.rotate:hover
{
/*设置旋转的时候绕着哪个点去旋转*/
transform-origin: 50% 50%;
/*旋转45度*/
transform: rotate(45deg);
}
.translate:hover
{
/*平移(x,y)沿着X轴平移x,沿着Y轴平移y*/
transform: translate(50px, -50px);
}
.scale:hover
{
/*缩放*/
transform: scale(2);/*整体放大为原来的2倍*/
transform: scale(0.5,2);/*x方向为原来的0.5倍,y方向为原来的2倍*/
}
.skew:hover
{
/*Y轴方向倾斜20度*/
transform: skewY(20deg);
}
.both:hover
{
/*如果让平移和旋转同时拥有的话,才用复合写法,因为transform属性分开写的话,后面的会将前面的效果覆盖掉*/
/*复合中平移和旋转书写的先后顺序会影响到运行效果,所有的形变效果都是相对于本身的x,y轴*/
transform: translate(50px,50px) rotate(60deg);
}
</style>
</head>
<body>
<div class="rotate">旋转</div>
<div class="translate">平移</div>
<div class="scale">缩放</div>
<div class="skew">倾斜</div>
<div class="both">同时</div>
</body>
