CSS选择器及创建

CSS

css的创建

行内样式

<p style="color:red;font-size:36px;">行内样式</p>

内嵌式

<style type="text/css">
内嵌式
p{color:red;font-size:36px;}
<style>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，内部优先。
外部样式
h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }
而内部样式表

h3 {
  text-align: right;
  font-size: 20pt;
  }
 h3 得到的样式是：

color: red;
text-align: right;
font-size: 20pt;

链接式

<link href="1.css" type="text/css" rel="stylesheet">
type规定目标URL的MIME类型，type="text/css"是说目标是css文本格式。
rel定义当前文档与目标文档之间的关系，rel="stylesheet"表明目标文件将被当前页面引用为样式表。

 导入式

<style type="text/css">
 @import "mystyle.css";
</style>
根据 CSS，子元素从父元素继承属性。
body {
     font-family: Verdana, sans-serif;
     }
通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。

css选择器分类

派生选择器

strong {
     color: red;
     }

h2 {
     color: red;
     }

h2 strong {
     color: blue;
     }

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

 

id 选择器

#red {color:red;}
#green {color:green;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

注意：id 属性只能在每个 HTML 文档中出现一次。

类选择器

.center {text-align: center}

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

注意：类名的第一个字符不能使用数字！

 

和 id 一样，class 也可被用作派生选择器：

.fancy td {
 color: #f60;
 background: #666;
 }
在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）

元素也可以基于它们的类而被选择：

td.fancy {
 color: #f60;
 background: #666;
 }
在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。