CSS学习笔记一
总结:CSS将网页内容和样式进行分离(也就是java中的减少耦合性,从而提高来扩展性),提高来显示功能。
html提高来足够的标签来封装,提高了非常多效果,可是效果有限,所以效果单独成立一种语言CSS。解决页面的效果问题
一。html和CSS结合有四种方式:
2,style标签方式(内嵌方式)
3,导入方式
4,链接方式
第一种
<!-- 1,style属性方式 :该属性值就是css代码--> <div style="background-color: #06F;color: #F00"> 这是css的div1 </div>
另外一种
将div区域都变成同一样式,可是为了简化代码。用到另外一种方式
<!--2,使用style标签的方式--> <style type="text/css"> //声明。css样式 div{<span style="white-space:pre"> </span>//声明是div区域 background-color: #000; color: #FFF } </style> //一般都放在<head>标签中由于想要其一打开网页就有效果。所以先载入。放在<head>标签内
ps:当遇到新的div样式。就会覆盖,这就是样式的层叠,比方有9个div区域一样的样式,1个不一样,那么就将10个div样式都弄成一样的放在<head>标签中,当中一个,样式覆盖就可以
第三种
将css写入文件,html导入的方式
一个网页能够用上述方式,可是10个呢,不能每一个网页,都加<style>,所以就将div{background-color: #00F;
color: #0F3;}封装称一个div.css文件,然后在html<style>中用@import url("div.css");导入就可以,假设 .css文件非常多,那么就能够将 @import url("div.css");等文件再导入一个1.CSS文件。再在html中导入1.css就可以
<head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> @import url("1.css"); </style> </head>
@import url("div.css"); //1.css文件里 @import url("span.css");
div{ //div.css文件里 background-color: #00F; color: #0F3; }
建议每种样式效果都单独写在一个文件里,CSS的凝视是/**/
第四种
<head><link rel="stylesheet" href="1.css" type="text/css" /></head> <!--<link>中的rel能链接一个和当前网页相关联的页面(对当前页面进行样式修饰),stylesheet样式表, href链接地址。type直接类型-->
二,样式优先级
从上到下,从外到内。优先级由低到高,普通情况下,后载入的。为主
三,CSS语法结构
选择器名称{属性名:属性值 ;属性名:属性值 ;....}
属性与属性之间分号切割
属性与属性值用冒号连接
假设一格属性,多个值,值之间用空格分隔
四。选择器
就是指定css要作用的标签。标签的名称就是选择器,意为:选择哪个容器
选择器有三种:
1,html标签选择器,使用的是html的标签名:
2,class选择器,事实上使用的标签中的class属性
3。id选择器。使用的是标签中的id属性
每个标签都定义来class属性和id属性。用于对标签进行标识,方便对标签操作
多个标签的class属性值能够同样,可是id属性值要唯一,Javascript中经经常使用
html标签名选择器,前面已经用到
class选择器:
<head> <style type="text/css"> div{ background-color:#00F; color: #FFF ; } <!--用点来标识--> div.per{ background-color:#0F0; color: #0000FF; } </style> </head> <body> <div> 这是css的div1 </div> <div class="per">这是css的div2</div> </body>多个标签,都用同一属性。那么就能够用 : (.名称) 来定义
<head> <style type="text/css"> div{ background-color:#00F; color: #FFF ; } .per{ background-color:#0F0; color: #0000FF; } </style> </head> <body> <div> 这是css的div1 </div> <div class="per">这是css的div2</div> <span class="per">这是css的span</span> <p class="per">这是css的段落区域</p> </body>
提前定义样式,比方上述,再定义一个,.nihao{....},点击button页面样式就变为,nihao定义的效果。这就能够实现动态载入
ID选择器:
使用方法上和class选择器,没有差别,可是id的取值在页面中是唯一的,除了给css使用,还被Javascript使用
多样式用class就足够来,可是id一般是用来区标示页面中一些特定区域
<head> <style type="text/css"> .aa{ background-color:#00F; color: #FFF ; } #bb{ background-color:#000; color: #FFF ; } </style> </head> <body> <div> 这是css的div1 </div> <div id="bb">这是css的div2</div> <span >这是css的span</span> <p class="aa" id="bb" style="background-color:#F0F;color: #FEF">这是css的段落区域</p> </body>
上述三者优先级:标签选择器<类选择器<id选择器<style属性
五,关联选择器和组合选择器
关联选择器格式:标签名+空格+标签名
<head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> span b{ //选择器中的选择器 background-color: #09F; color: #FFF; } span b a{ //span标签中的b标签中的a标签 background-color: #000; color: #FFF; } </style> </head> <body> <div class="aa"> 这是<b>css</b>的div1 </div> <span>这是css的<b><a>sp</a>an</b>1</span>
组合选择器
选择器名+逗号+选择器名
<head lang="en"> <meta charset="UTF-8"> <style type="text/css"> .aa,span b{ //对多种选择器进行相相同式的定义 background-color: #000;color: #C00; } </style> </head> <body> <div class="aa"> 这是<b>css</b>的div1 </div> <span>这是css的<b><a>sp</a>an</b>1</span> <p class="aa" > 这是css段区域</p> </body>