css学习笔记

css是对html的具体的标签进行完善

css和html结合方式

1，每一个html标签中都有一个style样式属性，该属性的值就是css代码

<div style="color:red </div>

2，使用style标签的方式，一般定义在head中，先加载到内存中

<style type="text/css">
    body{
        margin:0px;
    }
    //id选择器
    div#imgtext{
        border: blue dashed 1px;
        height:450px;
        width:1000px;
        position:absolute;
        top:400px;
        left:20px;
    }
</style>

3，使用css的@import语句导入css文件

1 <style type="text/css">
2         @import url(cssDemo.css);
3 </style>
其中cssDemo.css文件就是方式1中的<style>中的内容。

4，使用link链接css样式表

在<head>中加入链接语句
<link rel="stylesheet" type="text/css" href="cssDemo.css">

选择器种类

1，html标签选择器

2，类选择器 使用标签中的class属性 eg: div.class名 优先级高于div直接定义的 数量越少的优先级越高

3，id选择器 使用标签中的id属性 eg：div#id名 使用方法和类选择器一样 优先级高于类选择器

　　id取值在页面中是唯一的 id通常是为了标识页面中的一些特定区域时用的

4，扩展选择器

　　 a.关联选择器：理解为目录结构即可

　　 b.组合选择器：

　　 c.伪元素选择器

优先级：标签选择器<类选择器<id选择器<style属性

<html>
  <head>
    <title>CssDemo.html</title>
    <style type="text/css">
　　    /*标签选择器*/
   　　 div {
     　　   background-color: blue;
      　　  color: red;
  　　  }
　　　　 span {
    　　    background-color: purple;
       　　 color: inactivecaption;
  　　  }

　　    /*类选择器*/
  　　  .a1 {
    　　    background-color: lime;
     　　   color: window;
   　　 }
  　　  .a2 {
     　　   background-color: blue;
           color: green;
 　　   }
   　　 /*ID选择器*/
　　    #div_1 {  
           　　 background-color: blue;
               color: red;
   　　 }
　　    /*关联选择器 选择器中的选择器 */
　　    span b {
　　　　　　　　　　background-color: blue; color: red; 
　　　　 } 
　　    /*组合选择器 对多种选择器进行相同样式定义*/
　　    .a1,div b { 
　　　　　　        　　background-color: yellow;
    　　　　    　  　  color: threeddarkshadow; 
   　　 } 

　　    /*伪元素选择器 超链接的状态*/ 

　　    /*未选择效果*/
    　　 a:LINK { 
　　　　　　　　background-color: fuchsia;
　　  　　　　 color: olive; text-decoration: none; font-size: 18px;
  　　  }
    
     /*鼠标悬停效果*/
     a:HOVER { 
             background-color: window; 
             color: maroon; 
             font-size: 20px; //文字的默认大小是16px
     } 

    /*点击效果*/ 
    a:ACTIVE { 
        background-color: windowframe; 
        color: threedhighlight; 
        font-size: 24px; 
    }

     /*访问后效果*/ 
    a:VISITED { 
        background-color: menu; 
        color: blue; } 
    div:HOVER { 
        background-color: window; 
        color: aqua; }
     </style>
  </head>
  <body>
     
    <hr/>
    <a href="">伪元素选择器演示</a>
    <hr/>
    <div id="div_1">ID选择器区域</div> 
    <div>这是div<b>区域</b>1</div>   
    <div>这是div区域2</div>
    <div class="a1">这是div3区域</div>   
    <div class="a1">这是div4区域</div>
    <span>这是span<b>区域</b>1</span>
    <span class="a1">这是span区域2</span>
    <br/>
    <p>这是段落1</p>
    <p class="a1">这是段落2</p>

  </body>
</html>

 

 

 overflow属性：超出给定范围的部分的显示方式

　　visible：可见

　　auto：

　　hidden：

　　scroll：

 display属性

　　none：不显示

　　block：显示，长度不够自动换行。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

待续。。。。。。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
 
 
posted @ 2017-05-24 15:25  sucs  阅读(246)  评论(0)    收藏  举报