[Learn Notes] CSS学习笔记

最新推荐文章于 2025-07-19 07:00:00 发布

转载最新推荐文章于 2025-07-19 07:00:00 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jalenwang/archive/2012/01/07/2316025.html

博客介绍了 CSS 的作用，它能控制页面外观，将文档表现与内容分隔，还能保持界面风格一致。同时提到了标记如 id、类名、div 和 span 的用途。重点阐述了为样式找目标的常用选择器，包括类型、后代、ID、类、伪类和通用选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 数据和视图分离

1.1 有了 CSS,就可以控制页面的外观并且将文档的表现部分与内容分隔开

2 更易于保持各个界面的风格的一致性

2.1 这个界面可以使用相同的CSS

3 标记

3.1 id 和类名

3.2 div 和 span

div 可以用来对块级元素进行分组,而 span 可以用来对行内元素进行分组或标识

4 为样式找到目标

有效且结构良好的文档为应用样式提供了一个框架。要想使用 CSS 将样式应用于特定的(X)HTML 元素, 需要有办法找到这个元素。在 CSS 中,执行这一任务的样式规则部分称为选择器(selector)。

4.1 常用的选择器

4.1.1 类型选择器

类型选择器有时候也称为元素选择器或简单选择器

p { color: black;}
a { text-decoration: underline;}
h1 { fon-weight: bold;}

4.1.2 后代选择器可用来寻找特定元素或元素组的后代

后代选择器由其他两个选择器之间的空格表示。在下面的示例中,只在作为列表项的后代的锚元素上应用样式,而段落中的锚不受影响。

li a { text-decoration: none;}

4.1.3 ID 选择器由一个#字符表示,类选择器由一个点号表示

#intro { font-weight: bold;}
.dateposted { color: green;}
<p id="intro">some text</p>
<p class="dateposted">24/3/2006</p>

4.1.4 伪类

/*maks all unvisited links blue*/
a: like{ color: blue;}
/*makes all visited links green*/
a: visited { color: green;}
/*maks links red when hovered or activated*/
a: hover, a: active{ color: red;}
/*maks table rows red when hovered over*/
tr: hover { background-color: red;}
/*maks input elements yellow when focus is applied*/
input: focus{ background-color: yellow;}

:link 和:visited 称为链接伪类,只能应用于锚元素。:hover、:active 和:focus 称为动态伪类,理论上可以应用于任何元素。不幸的是,只有少数现代浏览器(比如 Firefox)支持这种功能。IE 6 和更低版本只注意应用于锚链接的:active 和:hover 选择器,完全忽略: focus。

4.1.5 通用选择器

*{ padding: 0; margin: 0; }

我的第一个练习：

<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
background:green url(w3css.gif) no-repeat;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
/*text-align:right*/ /*this is comment out*/
}

/*It is really cool*/
#myBox
{
margin: 10px;
padding: 5px;
width: 200px;
background-color: red;
color:orange;
}
</style>
</head>

<body>

<h1>CSS example!</h1>
<p id=myBox>This is a paragraph.</p>

</body>
</html>

转载于:https://www.cnblogs.com/jalenwang/archive/2012/01/07/2316025.html