前端 初级篇(CSS)
CSS 简介
css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。
存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。
优先级:标签>页面镶入>外部,这个仅限同样的样式冲突是才有用。
必要性:美工会对页面的色彩搭配和图片的美化负责,开发人员则必须知道是如何实现的。
<p style="background-color: aqua"> Jason </p>
效果如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器,找到所有的标签应用以下样式*/ div { background-color: red; color: blue; } /*id选择器,找到标签id等于i1的标签,应用以下样式*/ #i1 { font-size: 56px; color: green; } /*class选择器,找到class=c1的所有标签,应用一下样式*/ .c1 { background-color: pink; } /*层级选择器,找到 class=c2 下的div下的p下的class=c3标签,应用以下样式*/ .c2 div p a{ background-color: yellow; } /*组合选择器,找到class=c4,class=c5,class=c6,的标签,应用以下样式*/ .c4,.c5,.c6{ background-color: green; } </style> </head> <body> <div> <div>div style</div> <div class="c1">c1style</div> <div id="i1">id style</div> </div> <div class="c2"> <div></div> <div> <p> <span>oo</span> <br/> <a >c2 div p a style</a> </p> </div> </div> </body> </html>
效果如下:
外部引用
写一个独立的文件存储css样式代码如下:建议(在样式文件里加上标注防止出现遗忘)
代买如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--这里通过link导入样式,有点类似与python导入模块中的import *--> <link rel="stylesheet" href="common.css" /> </head> <body> <div>外部引用</div> </body> </html>
效果如下:
标签应用,为指定标签统一设置格式:可以给div这样的标签设定自己想要的格式,也可相对已经定义好的容器设定样式代码如下:
<style> /*标签选择器,找到所有的标签应用以下样式*/ div { background-color: red; color: blue; } /*id选择器,找到标签id等于i1的标签,应用以下样式*/ #i1 { font-size: 56px; color: green; } /*class选择器,找到class=c1的所有标签,应用一下样式*/ .c1 { background-color: pink; } /*层级选择器,找到 class=c2 下的div下的p下的class=c3标签,应用以下样式*/ .c2 div p a{ background-color: yellow; } /*组合选择器,找到class=c4,class=c5,class=c6,的标签,应用以下样式*/ .c4,.c5,.c6{ background-color: green; } </style>
CSS常用属性
background 【背景】
background-color 背景颜色 代码如下:
<p style="background-color: red"> Hello,Jason </p>
background-image 背景图片 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.img{
/*背景颜色*/
background-color: #67b168;
/*引用的背景图片,可以为相对路径*/
background-image: url("4.gif");
height: 150px;
width: 400px;
/*图片不重复*/
background-repeat: no-repeat;
}
.img2{
background-image: url("2.jpg");
height: 50px;
width: 50px;
background-position: 84px -58px;
}
.img3{
background-image: url("2.png");
height: 100px;
width: 100px;
background-position: 30px 20px;
background-repeat: no-repeat;
}
.img4{
background-image: url("bcak.png");
height: 100px;
width: 100px;
background-position: 30px 20px;
background-repeat: no-repeat;
/*图片伸缩*/
-webkit-transform:scale(1.5,1.5);
-moz-transform:scale(1.5,1.5);
-transform:scale(1.5,1.5);
}
</style>
</head>
<body>
<div class="img"></div>
<div class="img2"></div>
<div class="img3">sss</div>
<div class="img4">test</div>
</body>
</html>、
效果如下:
border 【边框】
代码如下:
<!--border:有3个参数:线的粗细、线的样式(实线、点、虚线等)、线的颜色--> <!--第一种:线的粗细为1像素,实线、红色--> <div style="border:1px solid red;height:10px" ></div> <!--第二种:线的粗细为1像素,点、蓝色--> <div style="border:1px dotted blue;height:10px" ></div> <!--第三种:线的粗细为1像素、虚线、紫色--> <div style="border:1px dashed purple;height:10px" ></div>
设置边框,效果图如下图:
边框可以单独的设置一边的边框、上、下、左、右
<!--在左边设置边框,3px、实线、红色--> <div style="border-left: 3px solid red">Luotianshuai</div>
Display
代码如下:
display:none
display:block
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 1200px;height: 1000px;border: 1px solid red"> <div style="width: 200px;height: 200px;background-color: aqua;float: left;margin-left: 10px;display: block">f</div> <div style="width: 900px;height: 400px;background-color: red;float: left;display: block">A</div> <!--<div style="clear: both;"></div>--> </div> </body> </html>
效果如下:
cursor 鼠标停放所显示的效果
代码如下(实际效果自己写看):
<div style="cursor:pointer">停放在这里显示小手(pointer)</div> <div style="cursor:help">停放在这里显示问号(help)</div> <div style="cursor:wait">停放在这里显示问号(wait)</div> <div style="cursor:move">停放在这里显示移动(move)</div> <div style="cursor:crosshair">停放在这里显示定位(crosshair)</div>
浮动 float (用的比较多,用来布局使用)
CSS里面的浮动属性是布局的常用工具,只有真正了解它并熟练使用才能将它的优点发挥到极致。
许多页面中都有文字绕图效果,并且各区块分布得错落有置,很多朋友在自学CSS布局时为了做出这些效果往往会被div只能独占一行的默认样式搞的头大,但使用了浮动属性,布局就变得简单、美观了。
任何元素都可以被浮动,段落标签<p>、<div>、<table>、<img>,甚至<span>、<b>、<h1>等等都可以,而且所有被定义为浮动的元素都会被自动变为“块状元素”,也就是我们先前讲过的“盒装模型”,也就是代表它可以定义宽度和高度了。
浮动float的定义方法
CSS中浮动属性的定义是通过float来声明的,它规定了元素是向左靠还是向右靠,有三个值:
left:居左;
right:居右;
none:默认属性,不浮动。
下面举个例子:
<div style="float:right;width:100px;height:100px;"> <p style="float:right;width:50px;background:#F00;">文字</p> </div>
上面的例子将最外面的div置于右方,将内部的段落也置于div内部右方,就这样做到了内容的浮动。
水平浮动的层叠
如果将A元素居左放置在页面最左端,在它的后面跟随一个居左浮动的B元素,那么B元素就是贴着A元素排列的,以此类推,在水平宽度允许的条件下,可以放置多个居左浮动的元素,直到宽度没有多余的空间时,居左浮动的元素会绕到下一行的左侧显示。
举例:
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul { width:500px; background:#000; padding:5px; } li { float:left; border-right:1px solid #000; height:20px; padding-right:100px; background:#FFF; margin-bottom:1px; } </style> </head> <body> <ul> <li>float01</li> <li>float02</li> <li>float03</li> <li>float04</li> <li>float05</li> <li>float06</li> <li>float07</li> <li>float08</li> </ul> </body> </html>
以上代码的显示效果应该是一排水平排列的<li>,在超出宽度时,会折行显示,为了分清界限,我给它定义了一条右边线。
效果如下图:
清除属性-clear
吃了毒药,就一定要有解药。学会了怎样使用浮动属性,那必须学会怎样清除浮动。
清除属性通过clear来声明,它同样有四个值:
clear:left;清除左侧。
clear:right;清除右侧。
clear:both;清除两侧。
clear:none;不清除。
clear要达到的效果是,一个被清理的盒状元素无法与前置浮动保持在同一个水平位置上。它必须出现在其下方。
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul { width:500px; background:#000; padding:5px; } li { float:left; border-right:1px solid #000; height:20px; padding-right:100px; background:#FFF; margin-bottom:1px; } </style> </head> <body> <ul> <li>float01</li> <li>float02</li> <li>float03</li> <li>float04</li> <li>float05</li> <li>float06</li> <li>float07</li> <li>float08</li> </ul> <div style="float:left; background:#F00;">顶部第一个div向左浮动,无清除效果</div> <div style="clear:both;">第二个div清除两侧内容</div> <div style="float:left;">第三个div,无清除效果,居左浮动</div> <div style="float:left;">第四个div,无清除效果,居左浮动</div> </body> </html>
效果如下
position
http://www.cnblogs.com/canuseethat/archive/2010/09/16/1827804.html
margin 外边距
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。
p
{
顺序上右下左
margin:2cm 4cm 3cm 4cm;
}
<div style="height: 100px;background-color: #ddd;border: 1px solid green"> <div style="margin-top: 30px;margin-left: 100px"> <input /> <input /> <input /> </div> </div> </body>
padding 内边距
定义和用法
padding 简写属性在一个声明中设置所有内边距属性。
说明
这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
注释:不允许使用负值。
padding:10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px
透明度
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ opacity: 0.4; } </style> </head> <body> </body> </html>
补充:
1.img 标签边框 IE 浏览器如果不将border 设置为0,会有外边框,在chrome 无此情况:
边框设置为0,效果如下:
代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> img{ border: 0px; } </style> </head> <body> <div> <div class="item"> <a href="http://www.etiantian.org"> <img src="2.jpg" alt="图片"> </a> </div> </div> </body> </html>
如果引用的图片不存在,可以加alt属性备注
代码如下:
<img src="2.jp" alt="图片">
效果如下图:
2. 商品展示下商品数量加减导航栏设置,效果如下图:
代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> .inp{ border: 0; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; height: 25px; margin: 0; padding: 0; float: left; } .sp{ display: inline-block; height: 25px; width: 25px; text-align: center; line-height: 25px; float: left; } </style> </head> <body> <div style="border: 1px solid #dddddd;display: inline-block;"> <div class="sp">-</div> <input class="inp" type="text" /> <div class="sp">+</div> </div> </body> </html>
3. important 属性
如果两个类对同一个属性设置,想要优先选择某个属性,可以加important属性进行渲染 ,代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none !important; } .c1{ color: red !important; } .c2{ color: green; } </style> </head> <body> <div class="c1 c2">asdfasdfasdfasdf</div> </body> </html>
4.浏览器缩小引发样式出错的问题
当某个容器包含两个div,并让它们居中显示,需要浮动起来,但是当我们缩小浏览器窗口时,样式会出现混乱的情况,未解决此问题,我们应该给父容器设定固定的宽度,这样即使浏览器缩小,样式
也不会发生变化,浏览器会出现导航窗口,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--固定父容器宽度-->
<div class="pg-body" style="width: 980px;margin: 0 auto;">
<div style="width: 20%;float: left;background-color: red">asasdfasdfasdfasdfasdfasdfdf</div>
<div style="width: 80%;float: left;background-color: #2459a2">
sdfsdfasdfasdfsdfasdfsdfasdfasdfsdfasdfasdfsdfasdfasdf
</div>
</div>
</body>
</html>
浏览器缩小时,效果如下:
5.清除浮动,恢复背景样式高级方法
此前为了恢复父容器的背景样式,会在容器最后加上 style=“clear:both”,下面介绍一个更高级的方法;代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .c1:hover{ background-color: #2459a2; } .c2:before{ content: '666'; } .c2:after { content: '777'; } .left{ float: left; } .item{ background-color: red; } .clearfix:after{ content: '.'; clear: both; display: block; visibility: hidden; height: 0; } </style> </head> <body> <div class="c1">ddd</div> <div class="c2">888</div> <div style="background-color: red" class="clearfix"> <div class="left" style="height: 100px;background-color: green">1</div> <div class="left">2</div> </div> </body> </html>
6.登录窗口样式
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .icon-name{ background-image: url('i_name.jpg'); height: 16px; width: 16px; /*内联块标签*/ display: inline-block; } .icon-pwd{ background-image: url('i_pwd.jpg'); height: 16px; width: 16px; display: inline-block; } </style> </head> <body> 父容器样式position为relative,子容器span设置position为absolute,这样它相对父容器是固定的 <div style="width: 200px;position: relative"> <input style="width: 180px;padding-right: 20px;" /> <span class="icon-name" style="position: absolute;top:2px;right: 0;"></span> </div> </body> </html>
7.制作小三角
效果如下:
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .icon{ display: inline-block; border-top: 15px solid blue; border-right: 15px solid red; border-bottom: 15px solid yellow; border-left: 15px solid black; } </style> </head> <body> <div class="icon"></div> </body> </html>
posted on 2016-08-12 11:22 Jason_wang_2016 阅读(369) 评论(0) 编辑 收藏 举报