CSS初探

最新推荐文章于 2024-05-03 00:15:06 发布

大河Yes

最新推荐文章于 2024-05-03 00:15:06 发布

阅读量786

点赞数 2

分类专栏： Web开发文章标签： css html 浏览器 class 文档工作

本文链接：https://blog.csdn.net/YESmylady/article/details/7742812

版权

Web开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS：指层叠样式表 (CascadingStyle Sheets)，定义如何显示 HTML 元素。

层叠次序

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

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

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

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器(selector)通常是您需要改变样式的 HTML 元素。

每条声明(declaration)由一个属性和一个值组成。

selector {property: value}

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS 语法

注意：

1、值的不同写法和单位: #ff0000 ——>#f00 ——>rgb(255,0,0)。都是一样的

2、记得写引号: 如果值为若干单词，则要给值加引号。

3、空格和大小写：是否包含空格不会影响 CSS 在浏览器的工作效果。

4、多重声明：如果要定义不止一个声明，则需要用分号将每个声明分开。

CSS 高级语法

1、选择器的分组：被分组的选择器就可以分享相同的声明

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

2、继承及其问题:根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。不同浏览器，的确是尴尬啊。

CSS 派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。

举例：

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

<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>

这样，列表中的 strong 元素变为斜体字，而不是通常的粗体字。

CSS id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。注：一个网页中id只能出现一次。

#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

这样就可以设置p标签中字的颜色样式。

id 选择器和派生选择器: 结合重生

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
}

上面的样式 只会应用于出现在 id 是 sidebar 的元素内的段落。

一个选择器，多种用法

即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：

#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;
	}

神奇的是，在网页中sidebar元素中的 p和h2标签都将和网页中其他的 p和h2不同。

CSS 类选择器

在 CSS 中，类选择器以一个点号显示：

.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>

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

和 id 一样，class 也可被用作派生选择器：

元素也可以基于它们的类而被选择：

大河Yes

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS初探

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

扫一扫