css 选择器

派生选择器: 只改变li 下的strong

li strong {
    font-style: italic;
    font-weight: normal;
  }

id选择器: id 可被用作派生选择器:

div#sidebar {
    border: 1px dotted #000;
    padding: 10px;
    }
#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;
    }

类选择器:和 id 一样,class 也可被用作派生选择器:

.center {text-align: center}

.fancy td {
    color: #f60;
    background: #666;
    }
td.fancy { color: #f60; background: #666; }
<td class="fancy">

属性选择器:

[title]
{color:red }
适用于所有包含title的

[title="w3c"]
{color:red }
适用于title="w3c" 

[title~="w3c"]  {color:red}
适用于空格连接的值,如: title=“w3c hehe” tile="hh w3c"
 
[title |="w3c"] {color:red}
适用于以“-”连接的值,如:title="w3c-hhhh" title="w3c"

外部样式表

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

内部样式表

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

内联样式

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

多重样式

http://www.w3school.com.cn/css/css_howto.asp

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。