css学习笔记（未完待续）

来源：互联网发布：模拟城市4知乎编辑：程序博客网时间：2024/05/01 15:04

1、某些字体有些电脑是无法显示的，但是宋体与黑体都能显示。
2、图1

3、图2

，p是div的子元素,如果p和color属性和div是一样的话可以这样写：style="color:inherit"，这句话不要也行，因为默认是继承父节点的属性的。记住：总是继承离自己最近的标记的样式！！！即：总是继承离自己最近的父标记！
4、边框：图3

，注意一般用第三种简洁方法。
5、当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
6、属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
默认地，背景图像将从一个元素的左上角开始。请看下面的例子：
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
7、为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
8、.bb{text-decoration:line-through}
a{
text-decoration:overline; text-decoration:underline;
}

<a href="#" class="bb">是否</a>
注意:会使用.bb！！如果有class的话就会使用class的css样式！

9、<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。

注意：div所谓的换行只是指的是随着p、h1~H6等会自动换行的元素换行。！！！！！！！

9、普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。1em 等于当前的字体尺寸。
10、可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。
11、样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。这是因为如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论您原先定义的是什么。由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式。
CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。
例如，您可以为把一幅图片的边框定义为 outset，使之看上去像是“凸起按钮”：
a:link img {border-style: outset;}

12、
如何使用滚动条来显示元素内溢出的内容？？
<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
</style>
</head>

<body>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>

</html>
13、
clip 属性剪裁绝对定位元素。
当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。
<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>

<body>
<p>clip 属性剪切了一幅图像：</p>
<p><img border="0" src="/i/eg_bookasp.gif" width="120" height="151"></p>
</body>

</html>
14、垂直排列图像：
<html>

<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>

<body>

<p>
这是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>

<p>
这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>

</body>

</html>

15、
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
16、
CSS中的一些元素是块级元素，表示它们会自动另起一行。<li>默认应该是垂直方向上排列的，这就表示<li>是块级元素
17、
SS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
例如，下面的规则可以使文档中的每个元素都为红色：
* {color:red;}
这个声明等价于列出了文档中所有元素的一个分组选择器。利用通配选择器，只需敲一次键（仅一个星号）就能使文档中所有元素的 color 属性值指定为 red。
18、

CSS 类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用，也可以与其他元素结合使用。

提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。

要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

修改 HTML 代码

在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。

为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。请看下面的 HTML 代码：

<h1 class="important">This heading is very important.</h1><p class="important">This paragraph is very important.</p>

在上面的代码中，两个元素的 class 都指定为 important：第一个标题（ h1 元素），第二个段落（p 元素）。

语法

然后我们使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器：

*.important {color:red;}

如果您只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：

.important {color:red;}

亲自试一试

结合元素选择器

类选择器可以结合元素选择器来使用。

例如，您可能希望只有段落显示为红色文本：

p.important {color:red;}

选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。因为 h1 元素不是段落，这个规则的选择器与之不匹配，因此 h1 元素不会变成红色文本。

如果你确实希望为 h1 元素指定不同的样式，可以使用选择器 h1.important：

p.important {color:red;}h1.important {color:blue;}

亲自试一试

CSS 多类选择器

在上一节中，我们处理了 class 值中包含一个词的情况。在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：

<p class="important warning">This paragraph is a very important warning.</p>

这两个词的顺序无关紧要，写成 warning important 也可以。

我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景。就可以写作：

.important {font-weight:bold;}.warning {font-style:italic;}.important.warning {background:silver;}

亲自试一试

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。

如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。请看下面的规则：

.important.urgent {background:silver;}

不出所料，这个选择器将只匹配 class 属性中包含词 important 和 urgent 的 p 元素。因此，如果一个 p 元素的 class 属性中只有词 important 和 warning，将不能匹配。不过，它能匹配以下元素：

<p class="important urgent warning">This paragraph is a very important and urgent warning.</p>

亲自试一试

重要事项：在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。

19、与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。不能再同一个文档中多次使用。！！！

20、

有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。

例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

因此，ul em 将会选择以下标记中的所有 em 元素：

<ul>  <li>List item 1    <ol>      <li>List item 1-1</li>      <li>List item 1-2</li>      <li>List item 1-3        <ol>          <li>List item 1-3-1</li>          <li>List item <em>1-3-2</em></li>          <li>List item 1-3-3</li>        </ol>      </li>      <li>List item 1-4</li>    </ol>  </li>  <li>List item 2</li>  <li>List item 3</li></ul>

21、html > body table + ul {margin-top:20px;}
、这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。
22、a:link {color: #FF0000}/* 未访问的链接 */a:visited {color: #00FF00}/* 已访问的链接 */a:hover {color: #FF00FF}/* 鼠标移动到链接上 */a:active {color: #0000FF}/* 选定的链接 */
<html><head><style type="text/css">a:link {color: #FF0000}a:visited {color: #00FF00}a:hover {color: #FF00FF}a:active {color: #0000FF}</style></head><body><p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p><p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p><p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p></body></html>
伪类可以与 CSS 类配合使用：
a.red : visited {color: #FF0000}<a class="red" href="css_syntax.asp">CSS Syntax</a>
假如上面的例子中的链接被访问过，那么它将显示为红色。
23、
<html><head><style type="text/css">a.one:link {color: #ff0000}a.one:visited {color: #0000ff}a.one:hover {color: #ffcc00}a.two:link {color: #ff0000}a.two:visited {color: #0000ff}a.two:hover {font-size: 150%}a.three:link {color: #ff0000}a.three:visited {color: #0000ff}a.three:hover {background: #66ff66}a.four:link {color: #ff0000}a.four:visited {color: #0000ff}a.four:hover {font-family: monospace}a.five:link {color: #ff0000; text-decoration: none}a.five:visited {color: #0000ff; text-decoration: none}a.five:hover {text-decoration: underline}</style></head><body><p>请把鼠标移动到这些链接上，以查看效果：</p><p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p><p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体大小</a></b></p><p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景颜色</a></b></p><p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体系列</a></b></p><p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本装饰</a></b></p></body></html>
23、<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">input:focus{background-color:yellow;}</style></head><body><form action="form_action.asp" method="get">First name: <input type="text" name="fname" /><br />Last name: <input type="text" name="lname" /><br /><input type="submit" value="Submit" /></form><p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :focus 伪类。</p></body></html>
24、伪元素
W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。
属性描述CSS:first-letter向文本的第一个字母添加特殊样式。1:first-line向文本的首行添加特殊样式。1:before在元素之前添加内容。2:after在元素之后添加内容。2
25、伪类
W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。
属性描述CSS:active向被激活的元素添加样式。1:focus向拥有键盘输入焦点的元素添加样式。2:hover当鼠标悬浮在元素上方时，向元素添加样式。1:link向未被访问的链接添加样式。1:visited向已被访问的链接添加样式。1:first-child向元素的第一个子元素添加样式。2:lang向带有指定 lang 属性的元素添加样式。2

25、

CSS 尺寸属性

CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。

属性描述height设置元素的高度。line-height设置行高。max-height设置元素的最大高度。max-width设置元素的最大宽度。min-height设置元素的最小高度。min-width设置元素的最小宽度。width设置元素的宽度。26、display 属性规定元素应该生成的框的类型。

可能的值

值描述none此元素不会被显示。block此元素将显示为块级元素，此元素前后会带有换行符。inline默认。此元素会被显示为内联元素，元素前后没有换行符。inline-block行内块元素。（CSS2.1 新增的值）list-item此元素会作为列表显示。run-in此元素会根据上下文作为块级元素或内联元素显示。compactCSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。markerCSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。table此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。inline-table此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。table-row-group此元素会作为一个或多个行的分组来显示（类似 <tbody>）。table-header-group此元素会作为一个或多个行的分组来显示（类似 <thead>）。table-footer-group此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。table-row此元素会作为一个表格行显示（类似 <tr>）。table-column-group此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。table-column此元素会作为一个单元格列显示（类似 <col>）table-cell此元素会作为一个表格单元格显示（类似 <td> 和 <th>）table-caption此元素会作为一个表格标题显示（类似 <caption>）inherit规定应该从父元素继承 display 属性的值。27、

CSS 分类属性 (Classification)

CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。

属性描述clear设置一个元素的侧面是否允许其他的浮动元素。cursor规定当指向某元素之上时显示的指针类型。display设置是否及如何显示元素。float定义元素在哪个方向浮动。position把元素放置到一个静态的、相对的、绝对的、或固定的位置中。visibility设置元素是否可见或不可见。28、

CSS2 媒介类型

CSS 分类
CSS 注意事项

媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。

媒介类型

某些 CSS 属性仅仅被设计为针对某些媒介。比方说 "voice-family" 属性被设计为针对听觉用户终端。其他的属性可被用于不同的媒介。例如，"font-size" 属性可被用于显示器以及印刷媒介，但是也许会带有不同的值。显示器上面的显示的文档通常会需要比纸媒介文档更大的字号，同时，在显示器上，sans-serif 字体更易阅读，而在纸媒介上，serif 字体更易阅读。

@media规则

@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。

下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印，将使用 10 个像素的 Times 字体。注意：font-weight 被设置为粗体，不论显示器还是纸媒介：

<html><head><style>@media screen{p.test {font-family:verdana,sans-serif; font-size:14px}}@media print{p.test {font-family:times,serif; font-size:10px}}@media screen,print{p.test {font-weight:bold}}</style></head><body>....</body></html>

不同的媒介类型

注释：媒介类型名称对大小写不敏感。

媒介类型描述all用于所有的媒介设备。aural用于语音和音频合成器。braille用于盲人用点字法触觉回馈设备。embossed用于分页的盲人用点字法打印机。handheld用于小的手持的设备。print用于打印机。projection用于方案展示，比如幻灯片。screen用于电脑显示器。tty用于使用固定密度字母栅格的媒介，比如电传打字机和终端。tv用于电视机类型的设备。