一、CSS之引入方式
css有四种引入方式:
(1)行内式:少用 <body> <p style="color: #cc3399;background-color:cadetblue;">hello p</p>:内置css代码 <div> hello div</div> </body> (2)嵌入式: <head> <meta charset="UTF-8"> <title>Title</title> <style> div{----选择的标签 color: red;---属性 background-color: gray; } </style> (3)链接式:---主用 <!--<link type="text/css" rel="stylesheet" href="css.css">--> 把css.css文件里面的代码来美化div </head> css.css--被上个html文件引用执行美化它里的div标签,最常用 div{ color: rebeccapurple; background-color: yellow; } (4)导入式:---不用 <style> @import "day42/css.css";也是引用css文件,在style里写的就是css代码,一般用嵌入式 </style>
二、CSS之选择器
(1)通用选择器,*通所有标签通一处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ --------通用选择器 font-size: 45px; } (2)标签选择器:通过标签名来找 p{ ---------所有p标签都变 background-color: yellow; } div{ color: darkgreen; } (3)id名查找选择器,id属性都不能相同 #p1{ -------id名查找 font-style: italic;---斜体 } (4)class属性查找,class属性可以相同 .c1{ ---------------class属性查找 background-color: paleturquoise; } (5)组合选择器,后代选择器,空格 div p{-------------div标签下的所有p都处理,多用class font-size:30px } div .c1{-----所有div里的所有c1 font-size:30px } #outer .c2 .c1{------outer下的c2下的c1 font-size: 50px; } (6)子代选择器,大于号 #outer>.c1>.c3{----------子代选择器,只有c1有效c3是无效的,这时p3与p4都会变,p4变是因每二个c1 font-size: 50px; } (7)并行选择器 用',' #p,#p1,.c6{-------加,起到并行的作用 color: saddlebrown; } (8)匹邻,只能紧挨着的标签处理 <head> #outer+.t{color: red}-----只变outer紧挨的t变,不挨着也不行 </style> </head> <body> <p id="p"> hello p </p>-----加Id属性 <div id="outer"> hello div <span>hello span</span> <p id="p1"> p2.... </p> <p class="c1">p3......</p> <div class="c1">----class属性可相同 <p class="c3">p4......</p> </div> </div> <p>ppp</p> <p class="t">pppppp</p>-----不会变因不跟outer相邻 <div class="c6">div3</div> </body> </html> (9)属性选择器 嵌套规则:块级的能嵌套内联标签,但内联标签不能嵌套块级的,内联只能嵌套内联 某些特殊块级的不能嵌套如p h ,只能div嵌p,不能p嵌div, li可以套div,块级与块级并列,内联与内联并列 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [id]{}----按属性名来选择 [class]{}---所有属性名来选择 [class="div2"]{}----按属性值 [alex]{color: red}----自己加的属性,浏览器不认识但可以找到这个标签处理 p[class="div1"]{---当属性一样,前可加哪个标签名下的属性 color: red; } .div1{ font-size: 45px; } .div2{ color: blue; } [class~="div1 div2"]---二个都选择 [class^="div1"]---以div1开头的 [class$="div2"]---以div2结尾的 [class*="v1"]{----包含v1的 background-color:yellow; } </style> </head> <body> Element <div class="div1 div2" alex="sb">div1</div>---class有二个值,会被div1 div2都处理 <p class="div1">ppp</p> <div class="div2">div2</div> <div class="div3">div3</div> <div id="id1">iddd</div> </body> </html> (10)伪类,用: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link{ ----链接按钮着色变红,没访问过 color: red; } a:hover{------ 悬浮就变黄,鼠标放上面时 color: yellow; } a:visited{ color: purple; } a:active{------点的那时变绿 color: green; } p:after{--------在p后加二个pp,动态加文本无空格 content: "pp"; color: green;----只能动态文本处理 } p:before{-----在之前动态加文本 content: "pp"; } </style> </head> <body> <a href="http://www.baidu.com">百度</a> <p>hello p</p> </body> </html>
三、CSS之常用属性
(1)字体颜色属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; ---背景框就能与页面对起了 } p{ color: #C0C0C0------颜色,每个颜色都可用十六进制表示,可查颜色代码 color: red--------用英语表示 color: rgb(125,200,40);----红绿蓝基色,通过后面的数来打配成不同颜色,每个是0-255 color: rgba(255,0,0,1);----红色,若a为0.5表红色50%的透明度 font-size: 45px; -----字体大小 font-style: italic;----字体斜体 font-family: "Times New Roman";---字体样式 font-weight: lighter;字体的粗细,这些字段后面的值进行选择 } #div1{ height: 300px;-------屏幕长度 width: 200px;-----屏幕宽度---不过这样在浏览器上打印出的背景四周有框,需要加*{margin: 0;}见上,加上后就没有框了 background-color: rebeccapurple;-----背景色 background-image: url("day42/12.jpg");--一张图片把这个背景屏幕全铺满 background-repeat: no-repeat;----上面那张图只显示一张 /*background-repeat: repeat;*/----上面的图只上下顶头铺二张 background-size: 100px 100px;-----把上面的那张图调大小 background-position: center;------把上面的图片放在屏幕中间(left center:左对齐上下居中) /*background: url("12.jpg") no-repeat 100px 100px red;*/-----上面5个的减写 } </style> </head> <body> <!--<p> hello p </p>--> <div id="div1"></div> </body> </html> (2)文本属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #cc3399;----一行的背景色*** text-align: center;----字体在行标签上水平居中** height: 100px;----这是p这个行的高度, 文本字体小的话就可以写成多行,如何把文本写成一行? line-height: 100px;-----这个会告诉文本height是多高把这个当成一行 这样文本才会在行中间写,这个高度必须一样 letter-spacing: 5px;---字母之间的距离 /*word-spacing: 10px;*/----单词之间的距离 text-transform: capitalize;---每个单词的首字线变大 } (3)边框属性: .div1{ word-spacing: -10px; /*border-style: solid;*/---屏幕加边框,实线的 /*border-color: green;*/ /*border- 2px;*/---宽度 border: solid 3px green;---减写 width: auto; } (4)列表属性 ul{ /*list-style:upper-alpha;*/---列表样式 list-style: none;----样式去除 } </style> </head> <body> <p>hello pakdfl sjh;lfgs dkljfj lksdaf jl; ks daf</p> <!--<div class="div1">--> <!--<img src="12.jpg">--> <!--<img src="1.jpg">--> <!--</div>--> <ul> <li>111</li> <li>111</li> <li>111</li> </ul> </body> </html> (5)边框属性: 外边距margin:边框与边框的距离 margin-top:与上的距离 margin-left:与左的距离 margin-bottom:与下面的距离 margin-right:与右边的距离,其他的也有上下左右 重要:margin: 0 auto;---表这个标签在父标签里并居中,看43-4实例 框居中,若文本居中用text-align:center 内边距paddig:边框与文本图片之间的距离 内外边框距离:border eg: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px;-----表border边框与border边框之间的距离叫外边距 padding: 0 border-style:solid //块标签加边框实线 border-color:green;//边框着色 border-width:2px;//边框宽度 border-radius:10px可以设置圆角边框 display:none//块标签里的文本隐藏 block//块标签内容显示 } body{-----与上一步效果一样设margin是0 margin: 0px; border:solid green 3px; } .div1{ border: dashed 2px black;----屏幕加边框,边框也有厚度为2 height: 200px; width: 30%;---可按屏幕的百分比设 background-color: rebeccapurple; } .div2{ margin: 10px;---与div1的边框距离10像素,这个表上下左右都这大 border: dashed 2px black; height: 200px; width: 20%; background-color: green; } .div3{ border: dashed 2px black; height: 50px; width: 20%; background-color: blue; } </style> </head> <body> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div3">div3</div> </body> </html> 元素的大小:左右大小为一个 content+padding-left+padding-right+border-left+border-right <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0px; } .div1{-----父级 background-color: aqua; width: 300px; height: 300px; border: 1px solid green; padding: 200px 0px 0px 200px;--上下左右, 与子级加margin是一个效果,父级用padding来设, 子级用外边框来设,父级把子级当content, 通过上下左右与content的距离来调,子级把父级当border } .div2{ background-color: blueviolet; width: 100px; height: 100px; /*margin: 100px;*/----在父级的框里, 原是按左上角对齐的,放中间就加这个, 上下左右都100,外边距,是二个盒子的border距离 } </style> </head> <body> <div class="div1"> <div class="div2"></div> </div> </body> </html> (6) 块级屏幕属性: height:300px-屏幕长度(div等块状) 屏幕宽度 background-color:背景色 background-image:url("day42/12.jpg")//图片铺满背景屏幕 background-repeat: no-repeat;屏幕只显示一张图/repeat//图在上下顶头铺二张 background-size:100px 100px//背景图大小 background-position:center;//图片放在屏幕中间(left right) (7)块级与内联互转 块级标签: <div> <p> <h> <ul> <ol><dl> 内联标签:<a> <img> <input> <span> <select> <textarea> 块级与内联互转:可把a变为块级能跳转也能与其它的同行? 经常在设计网站的导航部分的时候,如果想让导航超链接hover显示背景, 但稍不注意,默认的inline会让你抓狂,因为display:inline会将超链接显示为内联元素, 即没有宽和高的作用效果,这里无论你背景怎么设置,宽高都不会超出超链接的宽高范围! 所以我们可以使用 block 或 inline-block 来解决此问题! display:block 此元素将显示为块级元素,此元素前后会带有换行符。 display:inline-block 行内块元素。 当我们在<a>标签里添加 display:block 或 display:inline-block 时, <a>标签也就有了块元素的一些特性,此时我们设置<a>标签的宽高才会起作用, hover背景也才会有效果,不同的是,display:block 会让元素前后带上换行符, 所以如果想让导航元素在一行内显示,则需要添加float属性,完整的写法如下: <a href="#" style="display: block; float:left;">block</a> 而display:inline-block 则不需要float属性,因为它的本身就是行内块元素,写法如下: <a href="#" style="display: inline-block;">block</a> 注:由于a是内联标签内容是多大它本身就多大,若能对它修改大小加higet weith就需要加inline-block属性让他有块级属性 a{ text-decoration: none;---原a标签下会有线这个是去线的, underline:内的文本加下划线 } a href="#":表不跳转,但提交时url上会有个#提交 a href="javascript:void(0)":也不提交url不变 a href="javascript:show()":点击会执行show函数,效果同onlick function show() (8)文档流 正常文档流:把元素(标签)从上到下从左到右的顺序排版的布局流 脱离文档流:在正常文档流的基础上将元素从文档流中取出进行覆盖; 而在正常文档流中其它元素会按文档流中不存在该元素重新布局 只有二种标签:float 浮动,非完全脱离(在其它没有浮动的元素上可清除它的影响用clear) 一般用float不用pasition position:absolute fixed 定位,完全脱离 例: float实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ background: rebeccapurple; width: 100px; height: 100px; } .div2{ background: green; width: 100px; height: 100px; float: left;----左对齐,向左脱离,这时div3就占上去了, 相当于没有div2了,若div1与div2都脱离那div3 就直接占第一个位置,div1左对齐,而div2会 在div1右边左对齐,div2随div1来动 这里虽然div2与div3重合了,但里的文本不会覆盖, 而是div3会环绕div2,所以块会脱离, 但文本会受影响所以是非完全脱离 } .div3{ background: yellow; width: 100px; height: 100px; clear: left:-----清除浮动,表div3左边不能有浮动元素,如果有就下移 } .outer{ background-color: reb; overflow: hidden;----它的着色在子标签上会失效,其他位置正常 } .menu1{-----------------当menu1与2浮动起来后outer就没用了, 它不认menu1与2,而menu3直接在最上面的屏幕与1与2重合 width:100px; 这时就没有outer着色了,但outer里要加个清除浮动就可以了,固定格式 heigt:50px; color:gold; float: left;//左对齐 } .menu2{ width:100px; heigt:50px; color:gold; float: left; } .menu3{ text-align:center;--字体居中 color:gold; } .clear{ clear: both;----固定格式 } </style> </head> <body> 1. <div class="div1">111</div> <div class="div2">222</div> <div class="div3">333</div> 2.<div class="outer">-------------用浮动布局 <div class="menu1">菜单1</div>---与menu2在一起 <div class="menu2">菜单2</div> <div class="clear"></div>//clear:both的作用是父级标签的长宽看不到了, 加上它之后父级标签在子标签背后能显示出来能看到父级标签了, 由于outer浮动了所以它的子标签都浮起来一字排开 但它本身标签就看不到了要沉底 </div> 不管子元素有多少都会被清除浮动, 父级能包含所有的元素,若父级有背景色子元素用不了 所以才用clear:both来沉底的 <div class="menu3">底部</div> </body> </html> 例2:position实例 position:定位,四个参数: fixed(完全脱离文档流);---以屏幕边为相对位置来动,如把首标签定在上面滚动时只滚动下面的 absolute(未脱离文档流);---以代码排版它原来的位置为相对位置来移动,加它后也要寂定位 relative(完全脱离文档流);----以屏幕html的边来移动但如果它有一个父标签, 当父标签有relative时子标签为absolute时, 所以当看到absolute时就向父外找relative,如果没有就以屏幕为相对位置, 这就按父标签为相对位置来移动,向外找父爷一直找到最外层一个父里 有多元素就方便统一处理 static 上面四个参数可以通过下面四个值来定位: bottom:底部 right:右边 top:顶部 left:左边 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ heigt: 1500px; background-color: #cc3399; } .div2{ heigt: 1500px; background-color: aquamarine; } a{ position: fixed;----定位,相当于脱离文档流了 bottom: 20px;---标签离屏幕底部的位置20Px right:20px;----标签离屏幕右边的位置20px,所以返回顶部就在右下角距屏幕有这么远 } 这时滚动滚动条时这个文本一直还是距离新的屏幕这远, 滚动时能一直看到这个文本 </style> <body> <div class="div1"></div> <div class="div2"></div> <a>返回顶部</a> </body> </html> 注:vertical-align: -4px 操作的图片在同一水平线,都在一个水平线上, height:26px;框有多高 line-height: 26px;--告诉文本框有多高,文本会上下居中 text-align: center;----这一组表文本左右居中,这是a标签变为块标签,display: inline-block;常用的文本居中 注2:一个div里有多个a,打印出来是上下的,如何让a在div的同一行内 a都要浮在div里,且都左对齐 float: left 再把a做成块标签, 进行高宽处理,距离用padding margin等的上下左右处理