前端篇之CSS认知
一、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-width: 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等块状） width:屏幕宽度 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等的上下左右处理
