CSS
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
CSS 存放方式有三种：
一种写法:在<body></body>内部的标签元素中直接写如:
<body>
<div style="color: red;font-size: 18px;"></div>
</body>
第二种写法:在<head></head>中定义一个样式,如:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cc{
color:red;
font-size:19px;
}
</style>
</head>
两种方式的区别:
1.写法区别:一个是在标签中加入元素style = 'key1:value1;key2:value2;',另一个是在head头部直接定义一个<style></style>标签,标签里写具体的样式.
2.应用环境区别: head头部定义一个样式相当于在全局设置了一个样式,样式的名称叫"cc",方便body体内的标签直接调用(便于复用).而在body体内的标签里写style元素(不便于复用).那么在head中定义css的样式,在body体内的标签如何引用的,就需要使用到一个特殊的属性class属性,我们在head中定义css样式的时候,样式名称".cc",但是在使用class属性引用时要把点去掉,引用名称是"cc"
如:
<body>
<div style="color: red;font-size: 18px;"></div>
<div class="cc">引用head头部定义的样式</div>
</body>
我们前面说有三种样式,前面有两种,那第三种是什么呢?
我们知道我们在写一个程序的时候,要写的html的文件,肯定不止一个.这N个html文件是不是每一个都要定义css样式,即便你用前面说的head中定义样式,也要定义N遍.这也不符合开发标准,尽量不要做重复的事情.所以才有了第三种写法:将CSS样式单独的写到一个文件,然后在html的head头部中引用.
第三种写法:单独写一个css样式文件,然后在html的head头部中引用
创建一个名为commons.css文件,内容如下:
.bb{ color:blue; font-size:19px; }
这样就行了.然后html想使用这个样式有两步:1.导入这个css样式文件.2.引用样式.
在html中导入css文件,要使用到特殊的标签<link/> 自闭和标签,代码如下
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="commons.css"/>
<!--上面一个标签的意思就是把commons.css文件里的所有样式都加载到这个html文件中来,这样接下来body中的标签就可以引用commons.css文件中定义的所有样式了.-->
</head>
<body>
<div class="bb"> 引入样式文件中的bb样式</div>
</body>
那么问题来了:这三种定义的方式的优先级怎么安排的?
1.首先在标签中定义style优先级最高
2.head头部和css样式文件是按照html中从上往下引入的顺序有关.
即,当有个标签,使用class = 'cc bb',那么它使用的样式和head中引入样式的顺序有关,和class = "cc bb"的写入顺序无关.标签采用后定义的样式。
比如：cc是红色先定义的，bb是褐色，那么无论你怎样的顺序同时引入这两个样式，最后采用的样式都是bb褐色，这是同一个属性，那如果cc定义颜色，bb定义字体大小呢？那么结果将是两个样式文件里定义的合集。
总结:有三种方式写css样式,推荐用文件方式,可以让不同html文件引用同一个css样式
必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。
CSS之基本选择器:
我们写css样式有三种方式,无论哪种方式,我们写样式的目的都是一样的.就是为了让某些标签或者某个标签加入样式.
要给一个标签使用样式,需要两步:1.找到这个标签 2.应用样式
1.寻找标签(常用3种):
第一种:class选择器又称类选择器
.c1{} .c2{} 加.c1 <div class='c1'>123 </div> class选择器,最重要的,一定要会的
第二种:标签选择器
在css样式文件中加入或者在head头部内的<style>内定义:
a{
color:red;
}
a指的是a标签，如果是div 就是指body体内的所有div标签都应用以下样式。那么在head头部引入这个样式文件的所有html文件的所有的a标签,全部红色字体
这种定义样式的方式称之为:标签选择器（这类css样式,不需要在标签中引入了,只需要在head头部引用,body体内的所有相应的标签都会应用该样式.）
标签选择器中有一个特殊的标签写法稍微不一样:input标签
input标签中又分为8种不同的种类.那么要想给其中一种定义一个样式比如给input中的text类型定义一个样式,写法如下:
input[type='text']{ color:blue }
第三种:id选择器，以"#"开头
#uu{ color:'red'; } <div id='nn'>123</div> <div id='uu'>123</div> 只有当id='uu'时,才会应用上面定义的#uu样式.
总结:上面三种选择器是最最基本的选择器一定要会,还有一些其他选择器.
2.其他标签选择器
第四种:属性选择器,就是上面提到的input标签
input[type='text']{ color:blue }
第五种:层级选择器
对于一个html,标签和标签之间可以嵌套
假设: <div> <a href=""> <div> <span></span> </div> </a> </div> <span></span>
现在需求来了:让<div><a><div>下的span标签变成红色,而下面的span不变,你怎么做?
多种方式 :1.直接用标签中定义style属性
2. 使用id选择器
3. 使用class选择器
分析: 方法1,这个不建议用,整个html框架都不建议用此方式.
方法2,很low,加入有多个这种结构的标签都需要变成红色,就是要写N个id选择器了.
方法3,能实现,不是很low,但是要多个这种结构,就需要每一个span中定义class属性.
4. 使用层级选择器(理解成复杂版的class选择器),如下实现:
.c3 a div span{ color:'red'; }
上面的代码表示:应用了c3样式的标签下的a标签下的div标签下的span标签
<div class='c3'> <a href=""> <div> <span></span> </div> </a> </div> <span></span> 同样可以写成: .c3 a span{ color:'red'; } 应用了c3样式的标签下的a标签下的所有span标签都应用这个样式:包含 <div class='c3'> <a href=""> <div> <span>11</span> </div> <span>22</span> #包含这个 </a> </div> 这就是层级标签.层级标签关键是用空格表示 xx 下的 xx .c3 a .c4{} 应用了c3样式的标签下的a标签下的应用了c4样式的标签 如: <div class='c3'> <a href=""> <div> <span class='c4'>22</span> <div class='c4'>33</div> </div> </a> </div>
第六种;组合选择器
我们知道标签选择器,可以定义某一类的标签的样式.
现在有个需求,就是同时让a标签和p标签都显示红色,就可以写成:
a,p{ color:'red'; }
重要的是用逗号分开.
可以和层级联合使用,如:
.c3 a .c4,.c3 a .c8{
color:'red';
}
我们在写html时,最最推荐的是class选择器,ID选择器最好不要用.层级选择器也很少.
CSS之定义样式之backgroud系列：
1. background-color 背景颜色
2. background-image 背景图片
实例代码:
<div style="background-image: url('4.gif');height: 90px;">生生世世</div>
ps:CSS样式中的: height 高度,如果你没有指定高度,则默认不显示,或者只显示文字部分所占的区域.
width 宽度,如果你在style中没有定义width,那么默认会显示这个图片的宽度,但是如果宽度没有充满整个窗口,那么会默认复制,这个图片,直至填满整个窗口.
宽度这种默认要充满整个窗口的特性,什么时候用呢?在你把一个纯色图条作为背景的时候,他就默认填慢背景这样就不用担心,要找一个大小合适的图片了.
示例代码:
<head>
<style>
.b1{
height:500px;
background-image: url('http://www.autohome.com.cn/images/error/bg.png');
}
</style>
</head>
那么问题来了?如何让图片不平铺呢?要使用background-repeat
3. background-repeat( no-repeat,repeat-x,repeat-y)
<head>
<style>
.b1{
height:500px;
background-repeat: no-repeat; #不复制
background-repeat: repeat-x; # x轴方向复制
background-repeat: repeat-y; # y轴方向复制
background-image: url('http://www.autohome.com.cn/images/error/bg.png');
}
</style>
</head>
4. background-position
假设一个图片上有好几个图标,每一个图标都是30px*30px.这几个小图标竖行排列着,组成了一个30px*90px的图片.
那么我想显示第二个图片应该怎么显示呢.首先先使用background-image找到这个图片,然后设置样式的高度和宽度,然后不让这个图片复制,最后设置显示的起点.于是代码如下:
<head>
<style>
.b2{
heght:30px;
30px;
background-repeat:no-repeat;
background-image:url('image/test.png')
background-position:0px -30px;
}
</style>
</head>
5. background关于图片的有2-4个属性,那么html中,有种简便的方法同时写这三种属性,写法如下:
<head>
<style>
.b3{
heght:30px;
30px;
background:url(//misc.360buyimg.com/jdf/1.0.0/unit/globalImages/1.0.0/jd2015img.png) 0 -57px no-repeat ;
定义background属性 ，1.首先制定URL，2.然后设置查看的起始位置，3.最后声明要不要复制（默认是复制）
}
</style>
</head>
CSS之定义样式之border属性：
我们一直说加边框,border就是边框.
边框有3个参数
.c2{
border:1px solid red;
}
1px 指的是 边框的宽度,
solid 边框的样式(线条的样式,实线,虚线等等)
red 边框的颜色
扩展:我们知道边框有上右下左四条线,那么上面我们有指定4条边框吗?没有,没有的话为什么有四条线.
答案是,当我们直接使用border定义的时候,默认指的的就是定义4条边框线.
如果想自己定义上右下左(顺时针)四条线,可以如下:
border-bottom-color: rgb(255, 0, 0);
border-bottom-style: solid;
border-bottom- 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image- 1;
border-left-color: rgb(255, 0, 0);
border-left-style: solid;
border-left- 1px;
border-right-color: rgb(255, 0, 0);
border-right-style: solid;
border-right- 1px;
border-top-color: rgb(255, 0, 0);
border-top-style: solid;
border-top- 1px;
CSS定义样式之display属性：
之前老师说过,块级标签和内联标签都没有绝对的,就是通过更改css样式可以更改,怎么变,就通过加上display:block;或者display:inline
display重要的有三个属性:
display:
none; 不显示,隐藏
block; 块级显示,块级标签用的就是这个
inline; 内联显示行内标签用的就是这个
<div style="display:inline; 444444</div>
CSS定义样式之cursor：
cursor是什么?
一般我们遇到a标签的时候,鼠标会变成一个"小手",遇到div标签时像是文本框,所以每一个标签默认都有一个cursor样式.
a标签是小手,div标签 文本,这些就是通过cursor属性来定义的.
css提供的cursor值
pointer || help || wait || move || crosshair
下面我们把一个div标签的cursor,变成小手试试!代码如下:
<div style="cursor:pointer;">55555555</div>
自定义(一般不用,不过很有意思)
mine
怎么做,就是让cursor加上一个url,代码如下:
<div style="cursor:url(image/test2.png),auto;">55555555</div>
总结:所有的标签,鼠标放上去时的样子都可以改造的,所以当你在页面上点一个标签是小手,不一定是a标签
CSS定义样式之float浮动：
float是页面布局使用最多,也是最重要的.
浮动最终实现的效果是什么样的?
比如你定义了两个块级标签,默认这两个块级标签在html中经过浏览器解释后是不是显示出两个标签是叠加的效果:
比如:
<div>11111</div>
<div>22222</div>
那么显示肯定是
11111
22222
那现在想显示成,11111背景黄色,占一行的50%,另外50% 是22222背景是红色.
这时候就需要用到float了!!!
<div style="float: left">111</div>
<div style="float: left">222</div>
使用float就是让标签飘起来了,往哪里飘,用left说明往左飘,两个都飘起来了,所以就能堆叠起来了.
于是效果如下:
111222
(网页上看是有背景色的.)
虽然上面代码实现了堆叠的效果,但是它们是不是不占屏幕的100%了.
要想让它们占相应比例,需要将代码改成如下:
<div style="float: left;20%;">111</div>
<div style="float: left;50%;">222</div>
定义了标签的宽度百分比
接下来我们在加一个div标签让它往右边飘,占10%.于是代码如下:
<div style="float: left;20%;">111</div>
<div style="float: left;50%;">222</div>
<div style="float: right; 10% ">3333</div>
于是效果就显示出来了,但是你有没有注意到,我们这样写是不规范的,我们没有把这几个要飘起来的div标签单独的放到一个div标签下.不放到一个标签下的结果,会导致后面如果还有要飘起来的标签对在一起了.
所以我们要把它们放到一个标签下:
<div>
<div style="float: left;20%;">111</div>
<div style="float: left;50%;">222</div>
<div style="float: right; 10% ">3333</div>
</div>
加入到同一个div标签下后,这几个标签中的百分比就都是相对于这个父标签的百分比来说的.
CSS定义样式之float浮动2:
我们知道用float可以让标签飘起来,并且我们需要把几个要组成一行的标签统一放到一个div标签下.这样才不会影响其他的标签.
我们知道一个标签如果没有内容,那么这个标签在页面上是不显示的.比如:
<div style:"background-color:red;"></div>
这个标签虽然设置了背景色,但是因为标签没有内容,所以在页面上不会显示.
那么问题来了.我们上面浮动的例子,加入在父标签上声明style属性如下:
<div style="">
<div style="float: left;20%;">111</div>
<div style="float: left;50%;">222</div>
<div style="float: right; 10% ">3333</div>
</div>
我们看里面的三个标签都float,并且所占百分比总和80%,还有另外20%会不会显示父标签的背景色呢?
答案是否定的,不会显示,因为父标签上没有实实在在的值.索然有3个div标签,但是这3个div标签都float了,也就是都飘起来了.所以这时剩下的20%的背景色就不会像我们想象的那样显示成蓝色.
那么如何让它显示呢?
两个办法:
一个low 点办法:在这里在加一个div,里面可以什么都没有,要有一个style的特殊属性clear:both,代码如下
<div style=""> <div style="float: left;20%;">111</div> <div style="float: left;50%;">222</div> <div style="float: right; 10% ">3333</div> <div style="clear:both;"></div> </div>
高级的办法：
<div style="background-color: #fff4b0;overflow: hidden;height: 100px"> <div style="float: left;height: 100px;50%;">222</div> <div style="float: left;height: 100px; 10% ">3333</div> <!--<div style="clear:both;"></div>--> </div>
我们在style中定义了overflow:hidden .这个和定义<div style="clear:both;"></div>效果一样。
那么我们会想又啥区别：
有，我们上面的父亲div height：100px ,两个子div的heigth:100px,那么当子div的height：200px,就会发现，父div把子div超出的100px给删除掉了。当然overflow还有3个值：hidden隐藏auto默认scroll把多出的部分用滚动条显示，当然可以按x轴y轴来设置滚动如overflow-y：scroll,以及inherit继承父标签的。比如在body中设置了overflow: hidden，那么就继承这个body。
而clear：both就是自适应，把子的超出部分也显示出来。
CSS定义样式之position属性：
position里面有3个值:
fiexed 固定
absolute 绝对
relative 相对
就这3个值,但是还有很多人,做了开发很久,这3个值还闹不清楚!!!但是,这三个值很重要.
fiexed用的比较多,abslute和relative一般会一起用才会产生奇妙的效果!
什么时候用fiexed,举个例子:又一个企业官网,在右下角有一个联系我们的图标,无论你的页面如何滚动,都在右下角.
<body>
<div style="position: fixed;">联系我们</div>
<div style="height: 5000px;</div>
</body>
我们这里一旦写上position,其实这个标签就脱离这个html文档.css叫做层叠样式表,意思就是可以把你的html处理成多层.
默认不加position:fixed的时候,在这个html档中,加上后,这标签就飘出来了,就不在最底层了.这时候我就可以固定这个标签了,固定到哪里呢,,目标是窗体的右下角.
于是代码如下:
<body>
<!--<div style="position: fixed;top: 0;right: 0;">联系我们</div>--> 右上角
<!--<div style="position: fixed;top: 50%;right: 0;">联系我们</div>--> 右中间
<div style="position: fixed;bottom: 40px;right: 30px;">联系我们</div> 右下角
<div style="height: 5000px;</div>
</body>
PS:要注意的是,设置bottom和right 声明的是此样式距离窗口的位置,不是页面的宽度位置.
上面的例子是一种常用的场景,还有一个场景也经常用到,就是,修改对话框,对某条纪录的修改,吐出来一个单独的窗口,让用户进行修改.
顺时针方向:
top 距离上窗体
right 距离右窗体
bottom 距离下窗体
left 距离左窗体
absolute举例:
abssolute一般不会自己出现,它会和relative一起出现.
我们把刚刚写fixed的例子直接改成abslute,看下会是什么情况
<body>
<div style="position: absolute;bottom: 40px;right: 30px;">联系我们</div>
<div style="height: 5000px;</div>
</body>
我们看到,当改成absolute后,"联系我们"这个标签,只在刚打开页面的那个地方出现,后面你在滚动页面,这个标签就随着消失了.也就是它只固定一次,而fixed永久固定.
relative举例:
relative单独使用的时候没有任何效果,只有和absolute搭配使用才有效果.
他们联合使用后能达到什么效果呢?
前面我们看到fixed和absolute都是针对整个窗口的.如果我们想针对某一个div右下角显示点内容,怎么实现呢?就需要联合使用relative和absolute两个属性了.
实现理论是,外层是relative,内层在用absolute固定位置.代码如下:
<body>
<div style="position: relative;height: 400px; 500px;">
<div style="position: absolute;bottom: 30px;right: 30px;">联系我们</div>
</div>
<div style="height: 5000px;</div>
</body>
CSS定义样式之透明度和层级
对于一张图片,如何给图片加一个透明度?
我们拿背景颜色做演示:
<div style="background-color: black;color: aqua;opacity: 0.3">1231123</div>
我们用opacity:0.3来设置透明度,设置的值只能是从0到1.
这样我们能看到效果,当设置成0.3后,就不是纯黑色了.而是偏灰色,更重要的我们能看到白底.
其实这个例子看得不明确.因为只有分了层级后设置透明度才有意义.
接下来,我们用position:fixed来做两层.
<div style="position: fixed;top: 0;right: 0;bottom: 0;left: 0;</div>
<div style="position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color: red"></div>
我们用fixed来做了两个层级,那么问题来了,这两个fixed哪一个在上面哪一个在下面.这时就要引入z-index属性来指定哪一个,这个值越大越靠上.
于是代码改成如下:
<div style="z-index: 10;position: fixed;top: 0;right: 0;bottom: 0;left: 0;</div>
<div style="z-index: 11;position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color: red"></div>
这时候我们再给红色加一个透明度,就可以透过红色的背景看到黑色:
<div style="z-index: 10;position: fixed;top: 0;right: 0;bottom: 0;left: 0;
<p style="color: white;">我是黑色</p>
</div>
<div style="z-index: 11;position: fixed;top: 0;right: 0;bottom: 0;left: 0;opacity: 0.3"></div>
这样我们就可以透过红色的背景,看到"我是黑色"这几个字了
代码如何写我们知道了,那什么时候用到它呢?我们在学习position:fixed的时候说过,在修改一个页面某一个纪录的时候用到fixed,飘出来一个单独的修改框.
为了避免我们在修改的时候还能点击其他的修改项造成混乱.我们就要加上两层,一层用于隔离最底层的页面内容,一层用于提供修改框.
总结:使用到透明度的时候,一定要是两层fixed的时候.(2层以上的使用机会几乎没有.)
PS:这里有一点要注意,对于不同浏览器的透明度的设置属性是不一样的,Chrome用的是opacity,IE用的是filter:alpha
img{
opacity:0.4;
filter:alpha(opacity=40); /*针对IE8以及更早的版本
}
CSS定义样式之padding和margin属性：
这两个是做什么的呢?是用来做边距的.也是用来做页面布局的.
padding 内边距,这个不好用文字描述,根据代码自己体会
margin 外边距
代码示例:
<body>
<div style="height: 70px;border: 1px solid red">
<!--<div style="height: 50px; margin: 10px"></div>-->
<div style="height: 50px; padding-top: 15px"></div>
</div>
</body>
还有一种写法,
padding: 10px 20px 10px 30px ; 上 右 下 左
padding: 5px 30px ; 5px代表上下 30px代表左右
padding内边距很好理解。
但是margin外边距就不太好理解了，分两种情况：
1.普通的div
2.div在style属性中float的情况下。
这两种的差异举例：
普通div，代码如下：
<body style="overflow:hidden;"> <div style="height: 50px;margin-bottom:10px;background-color: #1a1a1a">123123</div> <div style="height: 50px;margin-top:10px;background-color: #1a1a1a">123123</div> </body>
这时候我们想上面两个div之间的边距是20px吗？答案：不是，而是10px,而是底下那个div在设置margin-top时不承认上一个div的margin-bottom:10px设置的10px,而是只算自己的边距。所以两个边距重叠了。最终是10px.
而当用float后：
<div style="float: left;100%;height: 50px;margin-bottom:10px;background-color: #1a1a1a">123123</div> <div style="float: left;100%;height: 50px;margin-top:10px;background-color: #1a1a1a">123123</div>
这里我们看用到了100%,这时候两个div在页面上显示的效果就是它们之间的边距是20px.
总结下来就是：css样式定义margin属性时，默认边距是重叠的，想要不重叠用浮动。或者在两个div之间加一个div,1px.
应用样式总结:
width
height
background
border
display:
none;
block;
inline;
cursor:
pointer || help || wait || move || crosshair
float
position:
fixed
absolute
relative
top 距离上窗体
right 距离右窗体
bottom 距离下窗体
left 距离左窗体
z-index 设置层级的优先级
opacity 透明度
padding 内边距
margin 外边距