重学 CSS

最新推荐文章于 2022-01-04 17:34:47 发布

wdllly

最新推荐文章于 2022-01-04 17:34:47 发布

阅读量100

点赞数

分类专栏： ML & Script & Style & Other... 文章标签： CSS IE Firefox 浏览器工作

ML & Script & Style & Other... 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

原文出自 www.w3schools.com 中的 CSS 教程。

注意：样式名称不要以数字开始， Mozilla/Firefox 无法工作。

注释： /* ... */

属性值和单位之间不要有空格。
20px不能写成 20 px

样式的顺序：
浏览器默认 < 外部样式 < 内部样式 < 内联样式

CSS 语法：
selector {property: value}
例：
body {color: black}
p {font-family: "sans serif"}

组：
h1,h2,h3,h4,h5,h6 {color: green}

类选择器：
p.right {text-align: right}
p.center {text-align: center}
例：
<p class="right">This paragraph will be right-aligned.</p>
<p class="center">This paragraph will be center-aligned.</p>

引用多于一个的样式：
center 与 bold 分别是两个样式的名字。
<p class="center bold">This is a paragraph.</p>

不带标签名称的选择器，任何标签都可用：
.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>

匹配所有 input 元素中 type 属性为 text 的：
input[type="text"] {background-color: blue}

ID 选择器：
以 # 开始，匹配 ID 为 green 的元素
#green {color: green}

匹配 <p> 元素中 ID 为 para1 的元素
p#para1
{
text-align: center;
color: red
}

引用外部样式：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

内部样式：要有 HTML 注释
<head>
<style type="text/css">

</style>
</head>

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

样式覆盖：
样式1：
h3
{
color: red;
text-align: left;
font-size: 8pt
}
样式2：
h3
{
text-align: right;
font-size: 20pt
}
最后：
h3
{
color: red;
text-align: right;
font-size: 20pt
}

a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */

匹配 <div> 中的第一个 <p>
div > p:first-child
{
text-indent:25px
}

匹配 <p> 中的第一个 <em>
p:first-child em
{
font-weight:bold
}

p:first-line {color:#0000ff;font-variant:small-caps}

p:first-letter {color:#ff0000;font-size:xx-large}

h1:before
{
content: url(beep.wav)
}

h1:after
{
content: url(beep.wav)
}

图像透明：
<img src="klematis.jpg" width="150" height="113" alt="klematis"
style="-moz-opacity:0.4;filter:alpha(opacity=40)"
οnmοuseοver="this.style.MozOpacity=1;this.filters.alpha.opacity=100"
οnmοuseοut="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40" />

Mozilla： -moz-opacity:x x值（0.0 - 1.0）
IE： filter:alpha(opacity=x) x值（0 - 100）