首页 > 代码库 > 初识CSS

初识CSS

1.css的语法
  a.位置
    <head>
      <style type="text/css"> //css代码
      </style>
    </head>
  b.语法
    选择器{
      属性名1:属性值1;
      属性名2:属性值2;
    }
  例:h1{
      font-size:12px; //字体大小
      color:red; //字体颜色
    }
  注意:多个用属性用分号分隔
2.选择器
  a.标签选择器
  语法:
    标签名{
      ------
    }
  b.类选择器
  语法:
    .class属性值{
      -------
    }
  步骤:
    第一步:给指定的html标签加上class属性
    第二步:在style中写
        .class属性值{
          -------
        }

   

.green{
  font-size:20px;
  color:green;
}

 


  c.id选择器
  语法:
    #id属性值{

      ......
    }
  步骤:
    第一步:给指定的html标签加上id属性
    第二步:在style中写
        #id属性值{
          -------
        }

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>标签选择器的用法</title>
    <style type="text/css">
      #first{font-size:16px;}
      #second{font-size:24px;}
    </style>
  </head>
  <body>
    <h1>北京欢迎您</h1>
    <p id="first">北京欢迎您,有梦想谁都了不起!</p>
    <p id="second">有勇气就会有奇迹。</p>
    <p>北京欢迎您,为你开天辟地</p>
    <p>流动中的魅力充满朝气。</p>
  </body>
</html>

 


3.引用样式的方式
  a.行内样式
    使用style属性引入样式
    列:<h1 style="font-sze:16px;color:red;">xxx</h1>
  b.内部样式
    在head中写style
    列:h1{xxxx}
  c.外部样式
    把CSS代码保存在以CSS结尾的文件(层叠样式文件)
    把CSS文件引入html中
    引入方式两种:
      第一种:链接方式
        <link rel="stylesheet" href="http://www.mamicode.com/文件路径" type="text/css"/>
      第二种:导入方式
          <style>
            @import url("文件路径")
          </style>
4.优先级
  行内样式>内部样式>外部样式(就近原则)
  id选择器>class选择器>标签选择器
5.高级选择器
  a.后代选择器
    父标签 子标签{
      ......
  }

   

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>后代选择器</title>
    <style type="text/css">
      h3 strong{color:blue;font-size:36px;}
      strong{color:red; font-size:16px;}
    </style>
  </head>
  <body>
    <strong>问君能有几多愁,</strong>
    <h3>恰似一江<strong>春水</strong>向东流.</h3>
  </body>
</html>

 


  b.交集选择器
    选择器(class选择器或者id选择器){
      ......
    }

   

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>交集选择器</title>
    <style type="text/css">
      p .txt{color:red;}
      p.txt{color:blue;line-height:28px;}
    </style>
  </head>
  <body>
    <h2>蝶恋花&#8226;庭院深深深几许</h2>
    <p class="txt">庭院深深深几许,杨柳堆烟,帘幕无重数。玉勒雕鞍游治处,楼高不见章台路。<br/>
    <strong class="txt">雨横风狂三月幕,门俺黄昏,无计留春住。</strong>泪眼问花花不语,任红飞过秋千去。</p>
  </body>
</html>

 


  c.并集选择器
    选择器1,选择器2,选择器3,......选择器n{
      ......
    }

   

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>并集选择器</title>
    <style type="text/css">
      h3,.first,.second,#end{font-size:16px;color:green;font-weight:normal;}
    </style>
  </head>
  <body>
    <h2>蝶恋花&#8226;庭院深深深几许</h2>
    <h3>庭院深深深几许,杨柳堆烟,帘幕无重数。</h3>
    <p class="first">玉勒雕鞍游治处,楼高不见章台路。</p>
    <p class="second">雨横风狂三月幕,门俺黄昏,无计留春住。</p>
    <p id="end">泪眼问花花不语,任红飞过秋千去。</p>
  </body>
</html>

 

初识CSS