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"的写入顺序无关. 总结:有三种方式写css样式,推荐用文件方式,可以让不同html文件引用同一个css样式 必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。
CSS之基本选择器: 我们写css样式有三种方式,无论哪种方式,我们写样式的目的都是一样的.就是为了让某些标签或者某个标签加入样式. 要个一个标签使用样式,需要两步:1.找到这个标签 2.应用样式 1.寻找标签(常用3种): 第一种:class选择器又称类选择器 .c1{} .c2{} 加.c1 <div class=‘c1‘>123 </div> class选择器,最重要的,一定要会的
第二种:标签选择器 在css样式文件中加入: a{ color:red; } 那么所有在head头部引入这个样式文件的html文件的所有的a标签,全部红色字体 div span select 称之为:标签选择器,这类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; width: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; width: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-width: 1px; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(255, 0, 0); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(255, 0, 0); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(255, 0, 0); border-top-style: solid; border-top-width: 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;width:20%;">111</div> <div style="float: left;width:50%;">222</div> 定义了标签的宽度百分比 接下来我们在加一个div标签让它往右边飘,占10%.于是代码如下: <div style="float: left;width:20%;">111</div> <div style="float: left;width:50%;">222</div> <div style="float: right;width: 10% ">3333</div> 于是效果就显示出来了,但是你有没有注意到,我们这样写是不规范的,我们没有把这几个要飘起来的div标签单独的放到一个div标签下.不放到一个标签下的结果,会导致后面如果还有要飘起来的标签对在一起了. 所以我们要把它们放到一个标签下: <div> <div style="float: left;width:20%;">111</div> <div style="float: left;width:50%;">222</div> <div style="float: right;width: 10% ">3333</div> </div> 加入到同一个div标签下后,这几个标签中的百分比就都是相对于这个父标签的百分比来说的.
CSS定义样式之float浮动2: 我们知道用float可以让标签飘起来,并且我们需要把几个要组成一行的标签统一放到一个div标签下.这样才不会影响其他的标签. 我们知道一个标签如果没有内容,那么这个标签在页面上是不显示的.比如: <div style:"background-color:red;"></div> 这个标签虽然设置了背景色,但是因为标签没有内容,所以在页面上不会显示. 那么问题来了.我们上面浮动的例子,加入在父标签上声明style属性如下: <div style=""> <div style="float: left;width:20%;">111</div> <div style="float: left;width:50%;">222</div> <div style="float: right;width: 10% ">3333</div> </div> 我们看里面的三个标签都float,并且所占百分比总和80%,还有另外20%会不会显示父标签的背景色呢? 答案是否定的,不会显示,因为父标签上没有实实在在的值.索然有3个div标签,但是这3个div标签都float了,也就是都飘起来了.所以这时剩下的20%的背景色就不会像我们想象的那样显示成蓝色. 那么如何让它显示呢? 两个办法: 一个low 点办法:在这里在加一个div,里面可以什么都没有,要有一个style的特殊属性clear:both,代码如下 <div style=""> <div style="float: left;width:20%;">111</div> <div style="float: left;width:50%;">222</div> <div style="float: right;width: 10% ">3333</div> <div style="clear:both;"></div> </div> 高级的办法,暂时不说! 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;width: 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代表左右
应用样式总结: 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 外边距
时间： 2024-10-16 05:35:42