前端Summary——CSS学习
(1).CSS基础
一.CSS基础语法
1.形式
1.selector{
property:value
}
selector是属性选择器,下面是对应的属性和属性值
例:h1{color:red;font-size:14px}
属性大于一个之后,属性之间用分号隔开,如果值大于1个单词,则需要加上引号:
例:p{font-family:"sans serif";}
注:引入外部css <link href="MyCss.css" type="text/css" rel="stylesheet">
二.CSS基础语法
1.选择器的分组:
h1,h2,h3,h4,h5{color:red;}//可以给多个元素加入同一个样式
2.继承
body{
color:green;
}
body中的样式不能覆盖已经被定义好的样式。
三.CSS 派生选择器
1.派生选择器
通过依据元素在其位置的上下文关系来定义样式,用空格分隔。
Index.html中:
<li><strong>li标签hello css </strong></li>
Css中:
li strong{
color: brown;
}
会去li标签中的strong更改样式
四.id 派生选择器
1.id选择器
可以为标有id的HTML元素指定特定的样式
id选择器以“#”来定义
2.id选择器和派生选择器:
目前比较常用的方式是id选择器常常用于建立派生选择器
index.html文件内容:
<body>
<p id="pid">hello css <a href="###">我爱你没道理</a></p>
</body>
MyCss文件内容:
#pid a{
color: cornflowerblue;
}
五.类选择器
1.类选择器
1.类选择器以一个点来显示.,而id选择器以#显示
2.class也可以作派生选择器
index.html文件内容:
<body>
<p class="pclass">我爱你没道理<a href="$$">嘤嘤嘤</a></p>
<div class="divclass">
小莹最美<p>天生丽质难自弃</p>
</div>
</body>
MyCss文件内容:
.pclass a{
color: #ff182f;
}
.divclass p{
color: #ff1def;
}
六.属性选择器
1.属性选择器
1.对带有指定属性的HTML元素设置样式,利用[ ]和[ = ]
2.属性和值选择器
index.html文件内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
[title]{
color:blue;
}
[title=te]{
color:red;
}
</style>
</head>
<body>
<p title="t">压寨夫人</p>
<p title="te">人比黄花瘦</p>
</body>
</html>
结果:
(2)CSS样式
一.背景
CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果
1. background-color之demo
index.html文件内容:
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css"><!--外部样式表,指定css类型,引入文件-->
</head>
<body>
<p>测试一下背景师是否可以被继承</p><!--不可被继承,即文字颜色是黑色-->
</body>
style.css文件内容:
body{
background-color: darkorchid;
}
p{
width: 120px;
padding: 10px;/*内边距*/
background-color: aqua;
}
效果:
2. background-image之demo(设置背景图片重要)
index.html文件内容同上
style.css文件内容:
/*body{
background-image: url("psb.jpg");
}*/
/*可以单纯的给某一标签加上背景图片*/
p{
width: 200px;
background-image: url("psb.jpg");
}
结果:
3. background-repeat
Css内容:
body{
background-image: url("psb.jpg");
background-repeat: no-repeat;/*不允许重复*/
}
4. background-position
Css内容:
body{
background-image: url("psb.jpg");
background-repeat: no-repeat;/*不允许重复*/
background-position: right ;/*图片跑到了右边,实际上是表示right和center*/
}
可以看到图片只看到下半,用right top可以看到全部
5. background-attachment
Index.html内容:
<body>
<p>测试一下背景师是否可以被继承</p><!--不可被继承,即文字颜色是黑色-->
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
<p>测试一下背景师是否可以被继承</p>
</body>
style.css文件内容:
body{
background-image: url("psb.jpg");
background-repeat: no-repeat;/*不允许重复*/
background-attachment: fixed;/*将图片固定在背景中,不遂滑轮滚动而动,默认是随动而动*/
}
二.文本
CSS文本属性可定义文本外观,改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进。
Color\align\indent\tranform常用
1.color&text_align(颜色和文本对齐)
index.html文件内容:
<body>
<p>小莹是我心中的天使</p>
</body>
Css文件:
body{
color:red;
text-align: right;
}
p{
background-color: aquamarine;
}
结果:
2.text_indent(首行缩进)
index.html文件内容
<body>
<div>
<h4>狗粮</h4>
<p>爱小莹得永生!</p>
<p>爱小莹得永生!</p>
<p>爱小莹得永生!</p>
<p>爱小莹得永生!</p>
</div>
</body>
style.css文件内容:
h4{
text-indent: 2em;/*首行缩进两个字符 1em=16px;*/
}
结果:
3.text_transform(大小写格式)
index.html文件内容:
<body>
<p id="p1">this is My favourite girl</p>
<p id="p2">this is my Favourite girl</p>
<p id="p3">this Is my favourite girl</p>
</body>
style.css文件内容:
#p1{
text-transform:capitalize;/*首字母大写*/
}
#p2{
text-transform:uppercase;/*全部大写*/
}
#p3{
text-transform:lowercase;/*全部小写*/
}
结果:
4.CSS3文本效果:
text-shadow:祥文本添加阴影,属性值 5px(距左) 5px(距上) 5px(清晰度)#FF0000(背景色)
word-wrap:规定文本的换行规则,属性:normal
三.字体
CSS字体属性定义文本的字体序列、大小、加粗、风格 和变形
四.链接
CSS链接的四种状态:
- a:link 普通的,未被访问的链接
- a:visited 用户已经访问的链接
- a:hover 鼠标指针位于链接的上方
-
a:active 链接被点击的时刻
text-decoration:去掉链接名称下面的下划线:text-decoration:none
css内容:
a:link{
color: black;
text-decoration:none
}
a:hover{
color:blue;
}
a:active{
color: blue;
}
a:visited{
color:green;
}
五.列表
CSS列表属性允许你放置、改变列表标志,或者将图像作为列表项标志
index.html文件内容:
<body>
<ul>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ul>
</body>
style.css内容:
ul li{
list-style-image:url("psb.jpg") ;
}
六.表格
index.heml文件内容:
<body>
<table id="tb">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年级</td>
</tr>
<tr>
<td>齐雷</td>
<td>男</td>
<td>研一</td>
</tr>
<tr>
<td>齐雷</td>
<td>男</td>
<td>研一</td>
</tr>
<tr>
<td>齐雷</td>
<td>男</td>
<td>研一</td>
</tr>
<tr>
<td>齐雷</td>
<td>男</td>
<td>研一</td>
</tr>
</table>
</body>
Css文件内容:
#tb,th,tr,td{
border:1px solid blue;/*设置外边框颜色*/
text-align: center/*文字居中*/;
background-color: aqua;
}
/*折叠边框*/
#tb{
width:400px;
height: 400px;
border-collapse: collapse;/*折叠边框,两条线合成一条*/
}
结果:
七.轮廓
index.html文件内容:
<p>小莹最美</p>
Css内容:
p{
outline-style: dotted;/*虚线,double双实线*/
outline-color: green;
outline-width: 1px;
}
结果:
(3)CSS定位
一.定位
1.定位:CSS定位是改变元素在页面上的位置
2.CSS定位机制:
普通流:元素按照其在HTML中的位置顺序决定排布的过程
浮动:
绝对布局:
3.CSS定位属性:
CSS position属性:
- static
- relative
- absolute
- fixed
二.浮动
Index.html:
<body>
<div id="container">
<div id="fd"></div>
<div id="sd"></div>
<div id="td"></div>
</div>
</body>
Css内容:
#fd{
width:100px;
height:150px;
background-color: green;
float: left;
}
#sd{
width:150px;
height:100px;
background-color: red;
float: left;
}
#td{
width:100px;
height:150px;
background-color: blue;
float: left;
}
#container{
width:300px;
height:500px;
background-color: darkgray;
}
效果:
(4)CSS盒子模型
1.margin:外边距
2.border:边框
3.padding:内边距
4.content:内容
一.内边距
二.边框
可以创建效果出色的边框,并可以应用与任何元素
边框的样式:border-style:定义了10个不同的非继承样式,包括none
1.边框的单边样式:
border-top-style
border-left-style
border-right-style
border-bottom-style
2.边框宽度
border-width
3.单边框宽度:
border-top-width
4.边框颜色:
border-color
5.单边框颜色
border-top-color
CSS3边框:
border-radius:圆角边框
box-shadow:边框阴影
border-image:边框图片
三.外边距
1.css外边距:围绕在内容边框的区域就是外边距,外边距默认是透明区域
外边距接收任何长度单位、百分数值
2.外边距常用属性
3.内外边距合并:与大的边距相同
四.盒子模型应用
index.html 内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型应用</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="top">
<div class="content"></div>
</div>
<div class="body">
<div class="body_image"></div>
<div class="body_content">
<div class="body_no"></div>
</div>
</div>
<div class="footing">
<div class="footing_content"></div>
<div class="subnav"></div>
</div>
</body>
</html>
style.css内容:
background-color: green;
}
.body_image{
width:100%;
height:400px;
background-color: aqua;
}
.body_content{
width: 100%;
height:1100px;
background-color: darkorchid;
}
.body_no{
width: 100%;
height:50px;
background-color: darkkhaki;
}
.footing{
width:100%;
height:400px;
background-color: brown;
margin:0px auto;
}
.footing_content{
width:100%;
height:350px;
background-color: chocolate;
}
.subnav{
width:100%;
height: 50px;
background-color: darkorchid;
}
(5)CSS常用操作
一.对齐
1.使用margin属性进行水平对齐
margin:0px auto;<--上下0,左右自适应,这是居中对齐-->
2.使用position属性进行左右对齐
position:right
3.使用float属性进行左右对齐
float:left
二.分类
三.导航栏
1. 垂直导航栏
导航栏都是列表形式存在
index.html文件内容:
<body>
<ul>
<li><a href="#">导航一</a></li>
<li><a href="#">导航二</a></li>
<li><a href="#">导航三</a></li>
<li><a href="#">导航四</a></li>
</ul>
css文件内容:
ul{
list-style-type: none;/*去掉列表项的点*/
margin :0px;
padding: 0px;
}
a:link,a:visited{
text-decoration: none;/*去掉下划线*/
display: block;/*块元素*/
background-color: chocolate;
color: blue;
width: 50px;
text-align: center;/*文字居中*/
}
a:active,a:hover{
background-color: aqua;
}
结果:
这种是垂直列表
变成水平列表项
2. 水平导航栏
ul{
list-style-type: none;/*去掉列表项的点*/
margin :0px;
padding: 0px;
}
a:link,a:visited{
text-decoration: none;/*去掉下划线*/
background-color: chocolate;
color: blue;
width: 50px;
text-align: center;/*文字居中*/
}
a:active,a:hover{
background-color: aqua;
}
li{
display: inline;/*一行来摆放*/
padding:3px;
padding-lefr: 5px;
padding-right: 5px;
}
四.图片
(5)CSS3选择器
一.元素选择器
二.选择器分组
h1,h2{}同时渲染h1h2
三.类选择器
.class{ }
a.class{ } 结合元素选择器
四.id选择器
#id{ }
五.属性选择器
<p title=””>hello</p>
[title]{ }
<a href=”http://www.baidu.com”>百度</a>
[href=”http://www.baidu.com”]{ }
六.后代选择器
li a strong{ }
可以选择孙子元素li strong{ }
(6)CSS3动画
一.2D3D转换
1.通过2D、3D转换,我们能够对元素进行移动、缩放、转动、拉伸或拉长,转换时元素改变形状、尺寸和位置的一种效果,可以使用2D、3D来转换元素
2.2D转换方法:
- tranlate()平移
- ratate()旋转
- scale() 缩放
- skew() 倾斜
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>这是一个初始效果</div>
<div class="div2">改变后的效果</div><!--safari chrome-->
</body>
</html>
Css内容:
div{
width:100px;
height: 100px;
background-color: antiquewhite;
}
/*.div2{
transform:translate(200px,100px);!*通过transform来引入*!
-webkit-transform: translate(200px,100px);/*safari chrome支持*/
-ms-transform: translate(200px,100px);!*IE*!
-o-transform: translate(200px,100px);!*opera*!
-moz-transform: translate(200px,100px);!*firefox*!
}
.div2{
transform:rotate(180deg);!*通过transform来引入 顺时针旋转180°*!
-webkit-transform: rotate(180deg); /*safari chrome支持*/
-ms-transform: rotate(180deg);!*IE*!
-o-transform: rotate(180deg);!*opera*!
-moz-transform: rotate(180deg);!*firefox*!
}
.div2{
transform:scale(1,2);!*通过transform来引入缩放第一个参数是宽的的倍数,第二个参数是高度的倍数*!
-webkit-transform:scale(1,2); /*safari chrome支持*/
-ms-transform: scale(1,2);!*IE*!
-o-transform: scale(1,2);!*opera*!
-moz-transform: scale(1,2);!*firefox*!
}*/
.div2{
transform:skew(50deg,50deg);/*通过transform来引入 第一个参数是向x轴倾斜50°,,第一个参数是向y轴倾斜50°*/
-webkit-transform:skew(50deg,50deg); /*safari chrome支持*/
-ms-transform: skew(50deg,50deg);/*IE*/
-o-transform: skew(50deg,50deg);/*opera*/
-moz-transform: skew(50deg,50deg);/*firefox*/
}
二.过渡
1.通过使用CSS3,可以给元素增加一些效果;
2.CSS3过渡是元素从一种样式转换成另一种样式
- 动画效果的CSS
- 动画执行的时间
3.属性:
index.html文件内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>这是一个初始效果</div>
</body>
</html>
style.css文件内容:
div{
width: 100px;
height: 100px;
background-color: aqua;
-webkit-transition : width 2s,height 2s, -webkit-transform 2s;
transition-delay: 2s;
}
div:hover{
width: 200px;
height: 200px;
transform: rotate(360deg);
}
三.动画
demo:
index.html文件内容:
<div>这是一个初始效果</div>
style.css文件内容:
*{
margin: 0px;
}
div{
width: 100px;
height: 100px;
background-color: aqua;
animation: anim 5s infinite alternate;/*无限循环*/
-webkit-animation: anim 5s infinite alternate;
}
@keyframes anim {
0%{background-color: aqua;left: 0px;top:0px}
25%{background-color: brown;left: 200px;top:0px;}
50%{background-color: chartreuse;left: 200px;top:200px;}
75%{background-color: darkgoldenrod;left:0px;top:200px;}
100%{background-color: darkmagenta;left: 0px;top:0px;}
}
@-webkit-keyframes anim {
0%{background-color: aqua;left: 0px;top:0px}
25%{background-color: brown;left: 200px;top:0px;}
50%{background-color: chartreuse;left: 200px;top:200px;}
75%{background-color: darkgoldenrod;left:0px;top:200px;}
100%{background-color: darkmagenta;left: 0px;top:0px;}
}
四.多列
1.在CSS3中,可以创建多列来对文本或者区域进行布局
2.属性:
- column-count:分列的数量
- column-gap:分列的间隔
- column-rule:分列间隔的线及颜色
index.html文件内容
<div class="div1">
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
呦呦切克闹,煎饼果子来一套,爱吃不爱吃也只有他了
</div>
style.css文件内容:
.div1{
column-count: 3;
-webkit-column-gap:30px ;
column-gap: 30px;
column-rule:5px outset #FF0000;
}
五.CSS瀑布流效果
style.css文件内容:
.container{
column-width: 250px;
-webkit-column-width: 250px;
column-gap: 5px;
-webkit-column-gap: 5px;
}
.container div{
width: 250px;
margin: 5px;
}