本文将介绍css–必须在中途切换HTML人员的详细情况，特别是关于css页面切换的相关信息。我们将通过案例分析、数据研究等多种方式，帮助您更全面地了解这个主题，同时也将涉及一些关于.html、.htm
本文将介绍css – 必须在中途切换HTML人员的详细情况，特别是关于css页面切换的相关信息。我们将通过案例分析、数据研究等多种方式，帮助您更全面地了解这个主题，同时也将涉及一些关于.html 、.htm 、 .shtml 以及 .shtm 四种扩展名的文件区别_html/css_WEB-ITnose、22个必须知道的css技巧_html/css_WEB-ITnose、CS50 HTML 和 CSS 基础 (介绍最简单的 HTML 和 CSS)、css – 替换HTML5详细信息标签的展开(▶)图标的知识。
本文目录一览：- css – 必须在中途切换HTML人员（css页面切换）
- .html 、.htm 、 .shtml 以及 .shtm 四种扩展名的文件区别_html/css_WEB-ITnose
- 22个必须知道的css技巧_html/css_WEB-ITnose
- CS50 HTML 和 CSS 基础 (介绍最简单的 HTML 和 CSS)
- css – 替换HTML5详细信息标签的展开(▶)图标
css – 必须在中途切换HTML人员（css页面切换）
我可以留在他身边(他说他可以在这次过渡期间得到一位朋友帮忙)但他并不可靠.但是,如果我在这一点上切换马,我将不得不获得一个新的CSS,新的母版页,我的一半页面将有旧的和新的一半.
UGH ……真的很臭.之前做过此事的人提出的任何建议？
哦,和PS,我需要完成所有这些,就像三周前一样.
更新：对不起,我不清楚,这不是内部雇员,我正在向正在这样做的公司发送赔偿金.这就是为什么我担心新公司不想与旧公司合作的原因.
解决方法
.html 、.htm 、 .shtml 以及 .shtm 四种扩展名的文件区别_html/css_WEB-ITnose
新增了一个分类，叫做 personals，中文我把它解释成 "个人恶趣味"，这里将记载一些对工作无关紧要，但是个人又一时有兴趣了解的东西。
今天要讲的是如题的 4 种扩展文件的区别。和大多数人一样，我首先接触到的也是 .html 后缀的文件，后来在工作中发现前端写的都是 .htm 后缀的文件，再后来接触到了 .shtml 的扩展文件，与它相应的还有 .shtm 的文件。遂花了一点时间了解了下它们之间的区别，记录如下。
.htm VS .html
首先来看 .htm 和 .html 文件的区别。答案居然是： 它们是相同的。
事实上，这只是个人喜好问题，保持统一的后缀名即可。习惯上，windows 通常会用 .htm 的后缀名，而 linux（unix） 会用 .html 后缀（在 linux 中，如果打开 .htm 的文件，会直接展示源码）。这是因为很久以前，操作系统（DOS）的平台是 window 3.x.x，系统对于文件有个 8.3约束（8.3 naming convention），即文件名只能是 8 个字符，后缀只能是 3 个字符，所以当时显然无法使用 .html 后缀。而现在，这些问题都已经不复存在了。（个人感觉 .html 更正规一点，一些人认为使用 .htm 是回到了 dos 时代）
还有个问题是服务端的，如果服务端某文件夹下同时有 index.html 和 index.htm 文件，URL 省略了后面的文件名（如 http://www.domain.dom/dirname/），那么显然一个文件会优先于另一文件被读取（先解析 index.html）。事实上，我们一般不会在同一个文件夹下保存两个 index 文件。
立即学习“前端免费学习笔记（深入）”；
.html VS .shtml
接着来说说 .html 和 .shtml 文件的区别，简单说 .shtml 文件就是 html 文件加个 ssi。那么，ssi 又是什么鬼？其实这玩意儿之前已经接触过，在 Apache下开启SSI配置使html支持include包含一文中。
SSI 是 Server Side Include 的首字母缩略词。包含有嵌入式服务器方包含命令的 HTML 文本。在被传送给浏览器之前，服务器会对 SHTML 文档进行完全地读取、分析以及修改。SSI 就是在 HTML 文件中，可以通过注释行调用的命令或指针。SSI 具有强大的功能，只要使用一条简单的 SSI 命令就可以实现整个网站的内容更新，时间和日期的动态显示，以及执行 shell 和 CGI 脚本程序等复杂的功能。 网站维护常常碰到的一个问题是，网站的结构已经固定，却为了更新一点内容而不得不重做一大批网页。SSI 提供了一种简单、有效的方法来解决这一问题，它将一个网站的基本结构放在几个简单的 HTML 文件中(模板)，以后我们要做的只是将文本传到服务器，让程序按照模板自动生成网页，从而使管理大型网站变得容易。
应用它可以把网站中一些公共区域做成独立的页面，然后利用此技术嵌入到其它需要此区域内容的页面中去。
机制：
SSI 机制是 动态包含，而不是静态生成，是由 web服务器比如 apache 在收到用户的请求时，如果解析到其中有 SSI 包含指令时，自动取出被包含的页面嵌入到被请求的页面中一起当做一个整体的页面发送给用户，对用户来说根本不知道服务器做了啥，只是知道得到一个完整的页面。
由 SSI 工作机制我们知道，包含动作是在每次用户请求页面时发生，所以如果被包含的页面内容有变化，也能实时的反应出来，正因为如此，就很容易用来实现静态页面的动态嵌入，我们就可以用来实现网站中全站公共区域，或是 出现很多的重复区域内容发布成一个独立静态页面，然后在需要的地方用SSI指令包含进去， 比如像全站的头部和尾部，全站最新新闻等等。
事实上，.html 的文件同样可以开启 SSI，只需在 apache 里进行相应的配置，一旦开启 SSI，.html 文件和 .shtml 文件可以一样对待了。
具体配置方法可以参考 Apache下开启SSI配置使html支持include包含
至于 .shtm 文件，window7 apache 下直接在浏览器中打开了源码。
22个必须知道的css技巧_html/css_WEB-ITnose
1、改变选中文字的背景和颜色
::selection{ /* Safari and Opera */ background:#c3effd; color:#000;}::-moz-selection{ /* Firefox */ background:#c3effd; color:#000;}2、防止火狐滚动条跳动
html{ overflow-y:scroll; }3、分页打印
.page-break{ page-break-before:always; }4、使用!important
.page { background-color:blue !important; background-color:red;}5、图像替换文字
.header{ text-indent:-9999px; background:url(''someimage.jpg'') no-repeat; height: 100px; /*dimensions equal to image size*/ width:500px;}标注：text-indent:-9999px; 是将首行左缩进到人看不到的地方
6、兼容浏览器的最小高度
#container{ height:auto !important;/*all browsers except ie6 will respect the !important flag*/ min-height:500px; height:500px;/*Should have the same value as the min height above*/}7、对新窗口打开得链接高亮显示
a[target="_blank"]:before,a[target="new"]:before { margin:0 5px 0 0; padding:1px; outline:1px solid #333; color:#333; background:#ff9; font:12px "Zapf Dingbats"; content: "\279C";}8、美化li序列号
如图：
ol { font: italic 1em Georgia, Times, serif; color: #999999;}ol p { font: normal .8em Arial, Helvetica, sans-serif; color: #000000;}9、首字下沉
如图：
p:first-letter{display:block;margin:5px 0 0 5px;float:left;color:#FF3366;font-size:3.0em;font-family:Georgia;}10、兼容浏览器的opacity
.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }11、使用line-height实现垂直居中
line-height:30px;
12、居中布局
body{ width:1000px; margin:0 auto;}13、移除ie文本域的垂直滚动条
textarea{ overflow:auto;}14、移动超链接的虚线框
a:active, a:focus{ outline:none; }15、ie下元素消失，给该元素添加
position:relative;
16、根据链接不一样，添加不一样的icons
a[href$=''.doc''] { padding:0 20px 0 0; background:transparent url(/graphics/icons/doc.gif) no-repeat center right;}17、css手型点击样式
input[type=submit],label,select,.pointer { cursor:pointer; }18、字母大写
text-transform: capitalize;
19、所有英文大写，且首字母比其他的大
font-variant:small-caps;
20、高亮文本框，不支持ie
input[type=text]:focus, input[type=password]:focus{ border:2px solid #000;}21、移除img边框
a img{ border:none; }22、用label实现无表格表单
HTML Code
<form method="post" action="#" ><p><label for="username" >Username</label><input type="text" id="username" name="username" /></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1"rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p><span>点击下载</span>“<a href="https://teacher.php.cn/jump/126"rel="nofollow" target="_blank">修复打印机驱动工具</a>”；</p><p><label for="password" >Username</label><input type="password" id="password" name="pass" /></p><p><input type="submit" value="Submit" /></p></form>
CSS Code
p label{ width:100px; float:left; margin-right:10px; text-align:right;}参考：http://www.cnblogs.com/guoguo-15/archive/2011/08/24/2151859.html
CS50 HTML 和 CSS 基础 (介绍最简单的 HTML 和 CSS)
最近简单 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world!
</body>
<html>HTML 中 form 表单
<!DOCTYPE html>
<html lang="en">
<head>
<title>Forms</title>
</head>
<body>
<form>
<input type="text" placeholder="First Name" name="first">
<input type="password" placeholder="Password" name="password">
<div>
Favorite Color:
<input name="color" type="radio" value="blue"> Blue
<input name="color" type="radio" value="green"> Green
<input name="color" type="radio" value="yellow"> Yellow
<input name="color" type="radio" value="red"> Red
</div>
<input type="submit">
</form>
</body>
</html>
相对比较复杂的 HTML
超链接 href
有序列表和无序列表
图片
表格
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Elements</title>
</head>
<body>
<!-- We can create headings using h1 through h6 as tags. -->
<h1>A Large Heading</h1>
<h2>A Smaller Heading</h2>
<h6>The Smallest Heading</h6>
<!-- The strong and i tags give us bold and italics respectively. -->
A <strong>bold</strong> word and an <i>italicized</i> word!
<!-- We can link to another page (such as cs50''s page) using a. -->
View the <a href="https://cs50.harvard.edu/">CS50 Website</a>!
<!-- We used ul for an unordered list and ol for an ordered one. both ordered and unordered lists contain li, or list items. -->
An unordered list:
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
An ordered list:
<ol>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ol>
<!-- Images require a src attribute, which can be either the path to a file on your computer or the link to an image online. It also includes an alt attribute, which gives a description in case the image can''t be loaded. -->
An image:
<img src="../../images/duck.jpeg" alt="Rubber Duck Picture">
<!-- We can also see above that for some elements that don''t contain other ones, closing tags are not necessary. -->
<!-- Here, we use a br tag to add white space to the page. -->
<br/> <br/>
<!-- A few different tags are necessary to create a table. -->
<table>
<thead>
<th>Ocean</th>
<th>Average Depth</th>
<th>Maximum Depth</th>
</thead>
<tbody>
<tr>
<td>Pacific</td>
<td>4280 m</td>
<td>10911 m</td>
</tr>
<tr>
<td>Atlantic</td>
<td>3646 m</td>
<td>8486 m</td>
</tr>
</tbody>
</table>
</body>
<html>CSS 简介
在 HTML 中嵌入 CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">A Colorful Heading!</h1>
Hello, world!
</body>
<html>指定整个 body 的样式
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body style="color: blue; text-align: center;">
<h1 >A Colorful Heading!</h1>
Hello, world!
</body>
<html>将 CSS 放在前面
<html lang="en">
<!DOCTYPE html>
<head>
<title>Hello!</title>
<style>
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1 >A Colorful Heading!</h1>
Hello, world!
</body>
</html>单独的 CSS 文件
h1 {
color: blue;
text-align: center;
}<html lang="en">
<!DOCTYPE html>
<head>
<title>Hello!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 >A Colorful Heading!</h1>
Hello, world!
</body>
</html>给表格添加 CSS
table {
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 2px;
}
th {
border: 1px solid black;
padding: 2px;
}table {
border: 1px solid black;
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 2px;
}更复杂的 CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pseudoclasses</title>
<style>
button {
background-color: red;
width: 200px;
height: 50px;
font-size: 24px;
}
button:hover {
background-color: green;
}
</style>
</head>
<body>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</body>
<html>
css – 替换HTML5详细信息标签的展开(▶)图标
是否可以设置图片而不是现有的字符？
是否可以改变箭头的位置？我想要它在右边,而不是在摘要文本旁边.
解决方法
details summary::-webkit-details-marker {
background: red;
color: #fff;
font-size: 500%;
}
Demo
这使得箭头巨大,在红色背景上的白色.用图像替换标记更难.您必须完全删除标记,并使用伪代码之前或之后：
summary::-webkit-details-marker {
display: none
}
summary:after {
background: url(some-picture);
float: left;
height: 20px;
width: 20px;
content: " ";
}
details[open] summary:after {
background: url(other-picture);
}
关于css – 必须在中途切换HTML人员和css页面切换的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于.html 、.htm 、 .shtml 以及 .shtm 四种扩展名的文件区别_html/css_WEB-ITnose、22个必须知道的css技巧_html/css_WEB-ITnose、CS50 HTML 和 CSS 基础 (介绍最简单的 HTML 和 CSS)、css – 替换HTML5详细信息标签的展开(▶)图标等相关内容，可以在本站寻找。
本文标签：
