码迷,mamicode.com
首页 > Web开发 > 详细

css选择器

时间:2015-04-23 15:13:17      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:

id 选择器 #red {color:red;} #green {color:green;} <p id="red">这个段落是红色。</p> <p id="green">这个段落是绿色。</p> 对象选择器 h1,h2,h3,h4,h5,h6 {   color: green;   } body {      font-family: Verdana, sans-serif;      } 派生选择器 li strong {     font-style: italic;     font-weight: normal;   } <p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p>

<ol> <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li> <li>我是正常的字体。</li> </ol>

类选择器 .center {text-align: center}

<h1 class="center"> This heading will be center-aligned </h1>

<p class="center"> This paragraph will also be center-aligned. </p>

属性选择器

[title] { color:red; }

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; }

CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 [attribute^=value] 匹配属性值以指定值开头的每个元素。 [attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属性值中包含指定值的每个元素。

如何插入样式表: 外部样式表 <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>

css选择器

标签:

原文地址:http://www.cnblogs.com/caogang/p/4450345.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!