CSS(层叠样式表)学习笔记（一）

最新推荐文章于 2024-07-26 08:00:00 发布

xuyangtiger1

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量491

点赞数

文章标签： css border html 浏览器 class 文档

本文链接：https://blog.csdn.net/xuyangtiger1/article/details/6856027

版权

一。当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

二。例子：p {

text-align: center;

color: black;

font-family: arial;

}

提示：如果值为若干单词，则要给值加引号：

p {font-family: "sans serif";}

三。继承:通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。

body { font-family: Verdana, sans-serif; }

并且在大部分的现代浏览器中，也确实是这样的。

但是例如Netscape 4 就不支持继承，

所以对Netscape 4 应该这样

body {

font-family: Verdana, sans-serif;

}

p, td, ul, ol, li, dl, dt, dd {

font-family: Verdana, sans-serif;

}

如果某一元素不希望继承，那么就单独写一下他的样式。

四，派生选择器：允许你根据文档的上下文关系来确定某个标签的样式

li strong { font-style: italic; font-weight: normal; }

上面的只有li 元素中的 strong 元素的样式为斜体字，也就是说只有出现了<li><strong>这样的便签最和才会使用该样式。

五，id选择器：

1.#green {color:green;}注意：一个id 属性只能在每个 HTML 文档中出现一次。

2.id 选择器和派生选择器：#sidebar p {font-style: italic;text-align: right;margin-top: 0.5em;}在id是sidebar元素里的p(id是sidebar元素应该是个div之类的段落)。

3.#sidebar {border: 1px dotted #000;padding: 10px;}老版本的 Windows/IE 浏览器可能会忽略这条规则，除非你特别地定义这个选择器所属的元素：div#sidebar {border: 1px dotted #000;padding: 10px;}

六，类选择器

1. .center {text-align: center}影响所有class为center的元素；

2. .fancy td {color: #f60;background: #666;}派生的类选择器：名为 fancy 的更大的元素可能是一个表格或者一个 div，而他里面的td将受到影响；

3. td.fancy {color: #f60;background: #666;}class是fancy的td才受这个影响；

七，属性选择器：

1.Internet Explorer 7 （以及更高版本）在规定了 !DOCTYPE 的情况下支持属性选择器。IE6 及更低的版本不支持属性选择器。应该如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">strict.dtd表示需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用。

2.[title]{color:red;}为带有 title 属性的所有元素设置样式

3.[title=W3School]{border:5px solid blue;}为 title="W3School" 的所有元素设置样式；

4.[title~=hello] { color:red; }适用于由空格分隔的属性值，例如: title="hello world";

5.[lang|=en] { color:red; }适用于由连字符分隔的属性值;例如：lang="en-us"；

八，注释：/* */

xuyangtiger1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS(层叠样式表)学习笔记（一）

一。当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。浏览器缺省设置外部样式表内部样式表（位于标签内部）内联样式（在 HTML 元素内部）二。
复制链接

扫一扫