整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

学习web前端必须了解的几组CSS样式覆盖规则

SS样式覆盖规则

很多情况都会导致一个元素被运用上多种样式，样式覆盖的规则也需要根据不同的情况来定，具体规则如下。规则一：由于继承而发生样式冲突时，最近祖先获胜。CSS的继承机制使得元素可以从包含它的祖先元素中继承样式，考虑下面这种情况：

<html>

<head>

<title>rule1</title>

<style>

body {color:black;} p {color:blue;}

</style>

</head>

<body>

<p>welcome to <strong>加粗</strong></p>

</body>

</html>strong分别从body和p中继承了color属性，但是由于p在继承树上离strong更近，因此strong中的文字最终继承p的蓝色。

规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜。在上面的例子中，假如还指定了strong元素的样式，如：

strong {color:red;}那么根据规则二，strong中的文字最终显示为红色。

规则三：直接指定的样式发生冲突时，样式权值高者获胜。样式的权值取决于样式的选择器，权值定义如下表。CSS选择器 权值标签选择器 1伪元素(:first-child等) 1类选择器 10ID选择器 100内联样式 1000伪类(:link等) 10可以看到，内联样式的权值>>ID选择器>>类选择器>>标签选择器，除此以外，后代选择器的权值为每项权值之和，比如"#nav .current a"的权值为100 + 10 + 1 = 111。

规则四：样式权值相同时，后者获胜。考虑下面这种情况

<p class="byline">Written by <a class="email" href="mailto:jean@cosmofarmer.com">Jean Graine de Pomme</a></p> .byline a {color:red;} p .email {color:blue;}".byline a"与"p .email"都直接指定了上面的a元素，且权值都为11，根据规则四，最终显示蓝色。由于样式表可以是外部的，也可以是内部的，规则四提醒我们要注意外部样式表引入的顺序（及<link>元素的顺序），以及外部样式表与内部样式表的出现位置。一般来说，内部样式表出现在所有外部样式表的引入之后，一般是在</head>之前。

规则五：!important的样式属性不被覆盖。!important可以看做是万不得已的时候，打破上述四个规则的"金手指"。如果你一定要采用某个样式属性，而不让它被覆盖的，可以在属性值后加上!important，以规则四的例子为例，

.byline a {color:red !important;}

可以强行使链接显示红色。大多数情况下都可以通过其他方式来控制样式的覆盖，不能滥用!important。

SS中的浮动（Floats）、定位（Positioning）和显示（Display）属性是前端工程师掌握页面布局的关键。本文将深入探讨这些属性的工作原理和使用场景，帮助开发者更好地理解和运用它们来构建响应式和精确的网页布局。

浮动（Float）

浮动是CSS中用于实现元素排列的一种方式，它可以让元素脱离正常的文档流，并可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。

.element {
  float: left; /* 或者 'right' */
}

使用场景

  • 文字环绕图片。
  • 创建水平导航栏。
  • 无网格系统时的列布局。

注意事项

  • 清除浮动（Clearing Floats）：使用clear属性可以防止元素被浮动元素覆盖。
.clear-element {
  clear: both; /* 可以是 'left', 'right', 或 'both' */
}
  • 包含浮动（Containing Floats）：浮动元素的父容器可能不会扩展以包含浮动的子元素，可以通过清除浮动或使用其他技术（如overflow）来解决这个问题。
  • 浮动塌陷（Float Collapse）：浮动元素不占据空间，可能导致父元素高度塌陷。

定位（Position）

定位属性允许你控制元素的位置，它可以是相对于它的正常位置、相对于最近的已定位祖先元素、相对于视口或绝对位置。

.element {
  position: static | relative | absolute | fixed | sticky;
}

使用场景

  • 相对定位（Relative Positioning）：元素相对于其正常位置进行偏移。
.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}
  • 绝对定位（Absolute Positioning）：元素相对于最近的已定位父元素进行定位。
.absolute-element {
  position: absolute;
  top: 0;
  right: 0;
}
  • 固定定位（Fixed Positioning）：元素相对于视口进行定位，即使页面滚动也不会移动。
.fixed-element {
  position: fixed;
  bottom: 0;
  left: 0;
}
  • 粘性定位（Sticky Positioning）：元素基于用户的滚动位置在相对和固定定位之间切换。
.sticky-element {
  position: sticky;
  top: 10px;
}

注意事项

  • 定位元素可能会脱离文档流，影响周围元素的布局。
  • z-index属性可以控制堆叠顺序。
  • 绝对定位元素的容器应有position: relative;，以便正确定位。

显示（Display）

display属性是CSS中最重要的用于控制布局的属性之一，它定义了元素如何显示在页面上。

.element {
  display: block | inline | inline-block | flex | grid | none;
}

使用场景

  • 块级元素（Block）：display: block;使元素表现为块级，占据新的行。
.block-element {
  display: block;
}
  • 内联元素（Inline）：display: inline;使元素在文本行中显示，不开始新行。
.inline-element {
  display: inline;
}
  • 内联块元素（Inline-Block）：display: inline-block;允许元素并排排列，同时拥有块级元素的宽度和高度属性。
.inline-block-element {
  display: inline-block;
}
  • 弹性盒子（Flex）：display: flex;创建了一个弹性容器，其子元素可以灵活地在容器内排列。
.flex-container {
  display: flex;
}
  • 网格（Grid）：display: grid;创建了一个网格容器，可以定义行和列以及在网格内放置元素。
.grid-container {
  display: grid;
}
  • 隐藏元素（None）：display: none;将元素隐藏，且不为元素保留空间。
.hidden-element {
  display: none;
}

注意事项

  • 使用display: none;与visibility: hidden;的区别在于后者仍保留元素占据的空间。
  • display: flex;和display: grid;为现代布局提供了更多控制，通常比浮动和定位更优。

示例

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="header">
  <div class="logo">Logo</div>
  <div class="navigation">Navigation</div>
</div>

<div class="main-content">
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

<div class="footer">Footer</div>

<div class="fixed-element">Fixed Element</div>

</body>
</html>

CSS样式

/* Reset some default styles */
body, h1, p {
  margin: 0;
  padding: 0;
}

/* Header styles */
.header {
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px;
  overflow: hidden; /* Clearfix for floated elements */
}

.logo {
  float: left;
  font-size: 24px;
}

.navigation {
  float: right;
  font-size: 18px;
}

/* Main content styles */
.main-content {
  padding: 20px;
}

.sidebar {
  float: left;
  width: 200px;
  background-color: #ddd;
  padding: 10px;
}

.content {
  margin-left: 220px; /* Make space for the sidebar */
  background-color: #eee;
  padding: 10px;
}

/* Footer styles */
.footer {
  background-color: #f8f8f8;
  border-top: 1px solid #e7e7e7;
  text-align: center;
  padding: 10px;
  position: relative; /* For demonstration purposes */
  top: 20px; /* Move the footer down a bit */
}

/* Fixed element styles */
.fixed-element {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #333;
  color: #fff;
  z-index: 1000; /* Ensure it stays on top */
}

/* Clearfix hack */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

在这个例子中，我们创建了一个包含头部、侧边栏、主要内容和页脚的基本布局。我们使用浮动来对齐头部的Logo和导航，以及创建一个侧边栏。我们还使用了相对定位来稍微下移页脚，并使用固定定位为页面添加了一个始终可见的固定元素。最后，我们使用了overflow: hidden;来清除头部中浮动元素的影响。

结语

浮动、定位和显示属性是CSS中构建复杂布局的强大工具。通过深入理解和正确应用这些属性，前端工程师可以创建出既美观又功能强大的网页。随着Web标准的不断发展，我们也需要不断学习和适应新的CSS特性，以保持我们技能的前沿性。

置字符编码

属性：http-equiv 值：Content-Type 内容：text/html; charset=utf-8

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

设置有效期

设置网页的有效期之后, 过期网页将无法脱机浏览, 只有重新登录并连接该网页才可以再次浏览。

属性：http-equiv 值：expires 内容：Sun,1 Dec 2012 12:00:00 GMT

<meta http-equiv="Expires" content="Sun,1 Dec 2012 12:00:00 GMT" />
<meta http-equiv="Expires" content="<?php gmdate('D, d M Y H:i:s',time()+3600).' GMT'; ?>" />

设置禁止缓存

网页制作者希望随时都能查看到最新的网页内容，则可以设置禁止页面缓存

属性：http-equiv 值：cache-control 内容：no-cache

<meta http-equiv="cache-control" content="no-cache" />

设置自动刷新

设置页面自动刷新，以实现信息的自动实时显示(秒)

属性：http-equiv 值：refresh 内容：5

<meta http-equiv="Refresh" content="5" />

设置自动跳转

属性：http-equiv 值：refresh 内容：5;url=http://www.xxx.com/

<meta http-equiv="Refresh" content="5;URL=http://www.xxx.com/" />

设置网页关键词

属性：name 值：keywords 内容：油漆，涂料，涂料行业，汽车涂料

<meta name="keywords" content="油漆，涂料，涂料行业，汽车涂料" />

设置搜索限制

属性：name 值：robots 内容：All

All 表示能搜索当前网页与其链接的网页，系统默认设置

Index 表示能搜素当前页面

Nofollow 表示不能搜素与当前网页链接的网页

Noindex 表示不能搜素当前网页

None 表示不能搜索当前网页与其链接的网页

<meta name="robots" content="All" />

设置网页说明

属性：name 值：description 内容：中国油漆网--您的油漆专家

<meta name="description" content="中国油漆网--您的油漆专家" />

设置网页的作者

属性: name 值: author 内容: LAMP Brother UI Team

<meta name="author" content="LAMP Brother UI Team" />

设置网页的版权

属性: name 值: copyright 内容: 2012-2014 EDU.

<meta name="copyright" content="2012-2014 EDU." />

设置移动网站

<meta http-equiv="mobile-agent" content="format=html5;url=http://www.xxxxxx.com/mobile/">

<base> 标签

base 元素可规定页面中所有链接的基准 URL。

通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。

这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

<base href="文件路径" target="目标窗口"/>

必需的属性

href URL 规定页面中所有链接的基准 URL。

target _blank 在何处打开页面中所有的链接。可通过在每个链接中使用 target 属性来覆盖此属性。

_parent

_self

_top

_blank 在一个新的未命名的窗口载入文档

_self 在相同的框架或窗口中载入目标文档

_parent 把文档载入父窗口或包含了超链接引用的框架的框架集

_top 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架

实例:

<base target="_blank"/>

可以将该页面的所有<a>链接的默认属性设置为_blank

<base href="http://www.xxxxxx.com" />

在网页出现的相对链接"test.html"将对应htp://www.xxxxxx.com/test.html的页面

<basefont face="" size="" color=""/>

face属性可以用于设置文字的名称,可以是宋体、隶书、楷体等;

size属性用于设置字号的大小(单位:字号),从 1 到 7 的数字,或h1-h6。浏览器默认值是 3。

color用于设置字体的颜色


在线咨询
上一篇：10款精美的HTML5图片轮播动画+打包源码下载
下一篇：css实现的图片悬停旋转弹出文本框html页面前端源码

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 红岗区 沛县 东西湖区 彭州市 开阳县 越西县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服