CSS 样式表

CSS: 样式表。Cascading Style Sheet.

1.分类

  1按照使用的方式分类: 

       1:内联样式


    2:嵌入声明

                     在HTML页面上,在head中,声明style元素

  

              3:导入式

                     导入一个外部的css文件。Css样式表,默认情况下,以.css结束。


4:连接式 – 一个css文件,导入了另一个css文件


2.按声明的方式分类

      

一个样式表,如果作用在一个元素上,就是声明的方式

1、直接样式表

        是以元素名为样式的名称的定义方式。

        Div{

            //对所有div元素都使用这个样式表

        }



2、类样式表

用.(点)声明的样式表,就叫类样式表。类样式表必须要通过元素的class属性来引用。

    .someClass{...}


3.id(唯一)样式表



样式表的嵌套

    元素1  空格  元素2{

     只对元素1中的元素2设置有效。

}   

<style type="text/css">

    /*定义直接样式表,会对所有input元素有效

    div中的所有input,不管input元素是div的孩子还是孙子。

    */

    div input{

        border:0px;

        border-bottom:1px solid blue;

    }

    </style>

  </head>

  <body>

       <div>

           <p>

           姓名:<input type="text"name="name"><br/>

           密码:<input type="password"name="pwd"><br/>

           </p>

           Age:<input type="text">

       </div>

       地址:<input type="text">

  </body>

</html>

2.盒子模型


3.CSS择器

样式表,对哪一个元素有效,是通过选择器的方式实现的。

    如:

    Div{}//选择对所有的div有效

    .div{}//对所有的使用了class=”div”的有效

    #dd{}//对id为div的元素有效,如<div id=”dd”></div>和<inputid=”dd”/>

    Divp{} //对所在的div中的p有效。

 

*{} 对所有元素有效

 

E { sRules }  E (Elemment) 元素。对某个元素有效。

 

E[attr] 对所有拥有某个属性的元素有效。但 IE6不支持。IE8,9以后就支持。

E[attr=’aa’] 选择所在某个属性为aa的元素。

 E[attr*=”a”] 只要某个属性中包含a就选择这个元素

E[attr^=’a’] 以a开始的元素

E[attr $= ’b’]以b结束的。

 

E[attr1][attr2]{} 拥有两个属性的元素

 

E1 > E2{} 只对E1中的子元素E2有效。

 

E.className{}//对E元素,如果它自己的样式是ClassName则有效。

E .clssName{}//对E元素中的子元素且它的样式是className有效。

E1, E2 , E3 { sRules } 对所有这些元素有效

4.伪类

不是元素,而应该是动作。对用行光标操作的动作。但IE不支持

5.Css具体参数和值

E{

       background:red;

       color:blue;

       border:1px solid red;

       text-align:center;

}

属性和值,对于不同的元素,CSS属性不一样的。但大多数元素,支持的属性都一样。

如所有元素都可以使用background定义背景色。

       DIV.

       找到DHTML.chm文档。找到div元素。

1.background背景色

<body>

       <button id="a" style="background:blue;" onclick="_chg(this);"></button>

  </body>

2.background:url(‘图名称’)引用一张图片

</head>

  <body style="background: url('b.jpg');">

3.display:设置是否可见

display:none不显示

    display:””显示 用这个多

    display:block显示

4.设置一个元素的位置

 Position:定位的方式.

           Absolute 绝对定位。通过x轴和y轴位置。

     Top:定义一个元素的y轴

     Left:定义一个元素的x轴.

 

    定义一个div可以任意出现的位置:

5.设置层的级次

z-index:越大,越在上面。






  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值