CSS入门

来自软件实验室
跳转至: 导航搜索

h1. Css 学习

h2. 1:css放到哪儿

  1. 放到后缀为css的文件名中
  2. 放到html页面中的style标记之间
  <style>
   a{color:blue}
   div {border:1px solid red}
  </style>
  1. 直接作为标记的属性写
 <div style="border:1px solid red">
 div content
</div>

h2. 2:如何写css

  1. 对于html元素定义
  <style>
   a{color:blue}
  </style>
  1. 对id定义
  html代码
  <body>
    <div id="login"></div>
  </body>
  <style>
  #login{border:1px solid #ff0000}
  div#login{}//元素#id
  </style>
  1. 对class定义
  html代码
  <body>
    <div class="box"></div>
  </body>
  <style>
  .box{border:1px solid #ff0000}
  div.box{}//元素.className
  </style>

h2. 3:高级定义

  1. 几种html元素具有相同属性,用逗号隔开
  <style>
  a,p,div{font-size:12px;font-weight:bold;font-family:Arial;color:red}
  </style>
  1. 几种class或者id具有相同属性,用逗号隔开
  <style>
  .class1,.class2,#login,.box{margin:10px;padding:10px 0 10px 0}
  </style>
  1. html元素的层次关系用空格隔开
 <body>
   <div id="login"><a>abc</a></div>
   <div class="box"><a href="#">sdfsdfs</a></div>
 </body>
  1. 特殊定义
 <body>
   <div id="login"><a>abc</a></div>
   <div class="box"><a href="#">sdfsdfs</a></div>
 </body>
  <style>
 a:hover,a:visited,a:link{text-decoration:none}
  </style>