#引入外部样式表的方法
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
#给多个标签加样式方法
p, td, ul, ol, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
调用方法一:
<style>
#直接指定标签样式
div
{
100px;
}
#指定这个标签才能使用id去调用的样式
div#div2 #注意#号要连着不能有空格
{
transform:rotate(30deg);
}
</style>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
方法四:（派生选择器）
只有 li 元素中的 strong 标签元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。
<style>
li strong {
font-style: italic;
font-weight: normal;
}
</style>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
--------------------------------------------id选择器使用
方法五: （id选择器）
<style>
#red {color:red;}
</style>
<p id="red">这个段落是红色。</p>
方法六:
指定一个标签使用这个id 才有效
<style>
p#sidebar {
color:red;
}
</style>
<p id="sidebar">你好。这是一个 div 元素。</div>
--------------------------------------------类选择器使用
方法二：
直接使用class去调用样式的方法
<style>
.box{display:inline}
</style>
<h2 class='box'>Name </h2>
--------------------------------------------内嵌样式使用
方法三:
内嵌样式的方法
<h2 style="display:inline">Name: </h2>
-------------------------------------------属性选择器
<style type="text/css">
[title]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2> #只有标签有title的属性才会渲染样式
----------------属性和值选择器
<style type="text/css">
[title=W3School]
{
border:5px solid blue;
}
</style>
<img title="W3School" src="/i/w3school_logo_white.gif" /> #只有标签有title的属性且值等于W3School才会渲染样式
追加技能:
<style type="text/css">
[title~=hello]
#适用于由空格分隔的属性值：只要标签有title的属性且值包含hello且空格分割了就会渲染样式，但是值为hello123 是不行匹配的
如果是用 - 去分割 可以使用 [lang|=en] 去实现，适用于由连字符分隔的属性值：
</style>
<h2 title="hello world">Hello world</h2>
------------------------------------------属性选择器和标签一起使用的方法
<style>
input[type="text"]
{
background-color:yellow;
}
</style>
<input type="text" name="Name" value="Bill" size="20">