css基础学习

css样式顺序

1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 标签内部）
4. 内联样式（在 HTML 元素内部）

继承

下面的是作用在h2的strong元素上：
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

h2 strong {
     color: blue;
     }

id 选择器和派生选择器

id为sidebar里面的p, h2元素格式：

 #sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }
 #sidebar h2 {
    font-size: 1em;
    font-weight: normal;
    font-style: italic;
    margin: 0;
    line-height: 1.5;
    text-align: right;
    }

下面是div元素id为inner：

div#inner {text-indent: 10%;}

类选择器

1. 派生选择器
   fancy类下面的td元素：

   .fancy td {
       color: #f60;
       background: #666;
       }

2. 元素类选择
   td表单里面的fancy类：td.fancy {
   color: #f60;
   background: #666;
   }

   td.fancy {
       color: #f60;
       background: #666;
       }

属性选择器

//所有包含title属性的元素
 [title]{
    color: red;
}
//所有title为 hehe的元素
[title=hehe]
{
border:5px solid blue;
}

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

表单插入

1. 外部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

1. 内部：

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>