码迷,mamicode.com
首页 > Web开发 > 详细

CSS学习笔记一

时间:2014-11-21 14:25:58      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:style   blog   ar   color   使用   sp   java   strong   文件   

CSS全称:层叠样式表(Cascading Style Sheets),用来定义网页的显示效果,可以解决html代码对样式定义重叠的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果。

总结:CSS将网页内容和样式进行分离(也就是java中的降低耦合性,从而提高来扩展性),提高来显示功能。

html提高来足够的标签来封装,提高了很多效果,但是效果有限,所以效果单独成立一种语言CSS,解决页面的效果问题


一,html和CSS结合有四种方式:


1,style属性方式

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{....},点击按钮页面样式就变为,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>


CSS学习笔记一

标签:style   blog   ar   color   使用   sp   java   strong   文件   

原文地址:http://blog.csdn.net/wjw0130/article/details/41347583

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!