css样式定义标记(. # html)
2016-05-16 15:08
447 查看
css样式进行设置：
1、xxx 则xxx 是类名，用的时候加上：class="xxx"；
注意：类名的第一个字符不能使用数字！它无法在
Mozilla 或 Firefox 中起作用。
例子1:
2、#xxx则为定义id，用的时候加上：id="xxx"
例子1：
例子2：
3、派生选择器(html)
例子1：
xml:
例子1：
例子2：
5、伪类
例子1：
6、伪元素
例子：
参照：http://www.w3school.com.cn/css/css_align.asp
1、xxx 则xxx 是类名，用的时候加上：class="xxx"；
注意：类名的第一个字符不能使用数字！它无法在
Mozilla 或 Firefox 中起作用。
例子1:
.center {text-align: center}<span style="background-color: rgb(255, 255, 255);"><span style="color:#ff0000;"><h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p</span></span>同样可在该类样式下，对不同html标记进行处理。
.fancy td {
color: #f60;
background: #666;
}或者td.fancy {
color: #f60;
background: #666;
}2、#xxx则为定义id，用的时候加上：id="xxx"
例子1：
<span style="white-space:pre"> </span>#red {color:red;}
<span style="white-space:pre"> </span>#green {color:green;}<span style="color:#ff6666;"><span style="white-space:pre"> </span><p id="red">这个段落是红色。</p> <span style="white-space:pre"> </span><p id="green">这个段落是绿色。</p></span>
例子2：
#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=“sidebar”中的p和h2的格式作了进一步的规定。3、派生选择器(html)
例子1：
li strong {
font-style: italic;
font-weight: normal;
}<span style="color:#ff0000;"><p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p> <ol> <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li> <li>我是正常的字体。</li> </ol></span>例子2：
xml:
<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="note.css"?> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note>css:
note
{
font-family:Verdana, Arial;
margin-left:30px;
}
to
{
font-size:28px;
display: block;
}
from
{
font-size:28px;
display: block;
}
heading
{
color: red;
font-size:60px;
display: block;
}
body
{
color: blue;
font-size:35px;
display: block;
}4、分组标记例子1：
h2, p {color:gray;}例子2：
h1, h2, h3, h4, h5, h6 {
color:gray;
background: white;
padding: 10px;
border: 1px solid black;
font-family: Verdana;
}5、伪类
例子1：
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF} /* 被选择的链接 */| 属性 | 描述 | CSS |
|---|---|---|
| :active | 向被激活的元素添加样式。 | 1 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 | 1 |
| :link | 向未被访问的链接添加样式。 | 1 |
| :visited | 向已被访问的链接添加样式。 | 1 |
| :first-child | 向元素的第一个子元素添加样式。 | 2 |
| :lang | 向带有指定 lang 属性的元素添加样式。 | 2 |
| 属性 | 描述 | CSS |
|---|---|---|
| :first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
| :first-line | 向文本的首行添加特殊样式。 | 1 |
| :before | 在元素之前添加内容。 | 2 |
| :after | 在元素之后添加内容。 | 2 |
p.article:first-letter
{
color: #FF0000;
}
<p class="article">This is a paragraph in an article。</p>参照：http://www.w3school.com.cn/css/css_align.asp
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 