什么是css初始化 什么是css初始化CSS初始化是指重设浏览器的样式。因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。每次新开发网站或新网页时候通过初始化CSS样式的属性，为我们将用到的CSS或html标签更加方便准确，使得我们开发网页内容时更加方便简洁，同时减少CSS代码量，节约网页下载时间。css初始化的好处：提高编码质量初始化CSS为我们节约网页代码，节约网页下载时间；还会使得我们开发网页内容时更加方便简洁，不用考虑很多。 如果不初始化，整个页面做完会很糟糕，重复的css样式很多。我们在开发比较复杂的网页时候就不会知道自己是否已经设置了此处的CSS属性，是否和前面的CSS属性相同，是否统一整个网页的风格和样式。（学习视频分享：css视频教程）最简单的初始化方法就是： * {padding: 0; margin: 0;} 。有很多人也是这样写的。这确实很简单，但有人就会感到疑问：*号这样一个通用符在编写代码的时候是快，但如果网站很大，CSS样式表文件很大，这样写的话，他会把所有的标签都初始化一遍，这样就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间。我们可以直接使用下面的代码初始化css。 css初始化代码：/*css 初始化 */ html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; } ul, ol { list-style:none; } input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";} select, input { vertical-align:middle; } select, input, textarea { font-size:12px; margin:0; } textarea { resize:none; } img {border:0; vertical-align:middle;} table { border-collapse:collapse; } body { font:12px/150% Arial,Verdana,"\5b8b\4f53"; color:#666; background:#fff } .clearfix:before,.clearfix:after{ content:""; display:table; } .clearfix:after{clear:both;} .clearfix{ *zoom:1;/*IE/7/6*/ } a{color:#666; text-decoration:none; } a:hover{color:#C81623;} h1,h2,h3,h4,h5,h6{text-decoration:none;font-weight:normal;} s,i,em{font-style:normal;text-decoration:none;} .col-red{color: #C81623!important;} /*公共类*/ .w{ width: 1210px;margin:0 auto; } .fl { float:left } .fr { float:right } .al { text-align:left } .ac { text-align:center } .ar { text-align:right } .hide { display:none }各大网站CSS初始化代码集合CSS初始化可以简单快速的实现常用标签的属性设定，尽量减少各浏览器之间的兼容性问题1、百度 CSS初始化 https://www.baidu.com统一初始化 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {     margin: 0;     padding: 0 } html {     color: #000;     overflow-y: scroll;     overflow: -moz-scrollbars } body, button, input, select, textarea {     font: 12px arial } h1, h2, h3, h4, h5, h6 {     font-size: 100% } em {     font-style: normal } small {     font-size: 12px } ul, ol {     list-style: none } a {     text-decoration: none } a:hover {     text-decoration: underline } legend {     color: #000 } fieldset, img {     border: 0 } button, input, select, textarea {     font-size: 100% } table {     border-collapse: collapse;     border-spacing: 0 } img {     -ms-interpolation-mode: bicubic } textarea {     resize: vertical } 其他常用CSS样式 .left {     float: left } .right {     float: right } .overflow {     overflow: hidden } .hide {     display: none } .block {     display: block } .inline {     display: inline } .error {     color: #F00;     font-size: 12px } label, button {     cursor: pointer } .clearfix:after {     content: '\\20';     display: block;     height: 0;     clear: both } .clearfix {     zoom: 1 } .clear {     clear: both;     height: 0;     line-height: 0;     font-size: 0;     visibility: hidden;     overflow: hidden } .wordwrap {     word-break: break-all;     word-wrap: break-word } .s-yahei {     font-family: arial, 'Microsoft Yahei', '微软雅黑' }2、腾讯首页 CSS初始化 http://www.qq.com统一初始化body, dd, dl, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, ol, p, select, td, textarea, th, ul {     margin: 0;     padding: 0 } body {     font: 12px SimSun, "Arial Narrow", HELVETICA;     background: #fff;     -webkit-text-size-adjust: 100% } a {     color: #172c45;     text-decoration: none } a:hover {     color: #cd0200;     text-decoration: underline } em {     font-style: normal } li {     list-style: none } img {     border: 0;     vertical-align: middle } table {     border-collapse: collapse;     border-spacing: 0 } p {     word-wrap: break-word }其他常用CSS样式.ind {     text-indent: 2em } .ind10 {     text-indent: 10px } .noborder {     border: 0 } .Q-red a, a.Q-red {     color: #bd0a01 !important } .Q-black a, a.Q-black {     color: #000 !important } .Q-bold {     font-weight: 700 !important } .Q-pList ul:after, .Q-pList:after, .Q-tList ol:after, .Q-tList ul:after, .Q-tList:after, .Q-tpList ul:after, .Q-tpList:after, .Q-tpWrap:after, .bd:after, .cf:after, .ft:after, .hd:after, .layout:after {     content: "";     display: table;     clear: both } .Q-pList, .Q-pList ul, .Q-tList, .Q-tList ol, .Q-tList ul, .Q-tpList, .Q-tpList ul, .Q-tpWrap, .bd, .cf, .ft, .hd, .layout {     *zoom: 1 } .chief, .fl, .layout .fl {     float: left;     display: inline } .extra, .fr, .layout .fr {     float: right;     display: inline } .fn {     font-weight: 700 }3、360官网 CSS初始化 https://www.360.cn统一初始化td, body, th, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {     padding: 0 } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {     margin: 0 } h1, h2, h3, h4, h5, h6 {     font-size: 100%;     font-weight: 400 } ul, ol {     list-style: none }4、微博官网 CSS初始化 https://weibo.com统一初始化body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {     margin: 0;     padding: 0; } table {     border-collapse: collapse;     border-spacing: 0; } fieldset, img {     border: 0; } address, caption, cite, code, dfn, em, th, var, i {     font-style: normal;     font-weight: normal; } ol, ul {     list-style: none; } caption, th {     text-align: left; } h1, h2, h3, h4, h5, h6 {     font-size: 100%;     font-weight: normal; }其他常用CSS样式q:before, q:after {     content: ''; } a:focus {     outline-style: none; } abbr, acronym {     border: 0;     font-variant: normal; } sup {     vertical-align: text-top; } sub {     vertical-align: text-bottom; } input, textarea, select {     font-family: inherit;     font-size: inherit;     font-weight: inherit;     *font-size: 100%; } textarea {     resize: none } input::-ms-clear {     display: none; } body {     font: 12px/1.3 Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;     overflow-x: hidden;     color: #333;     -webkit-font-smoothing: antialiased; } ::selection {     background: #eb7350;     color: #fff; } :focus {     outline-color: #eb7350; } 5、淘宝官网 CSS初始化 https://www.taobao.com统一初始化blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {     margin: 0;     padding: 0 } body, button, input, select, textarea {     font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\\5b8b\\4f53', sans-serif } h1, h2, h3, h4, h5, h6 {     font-size: 100% } address, cite, dfn, em, var {     font-style: normal } code, kbd, pre, samp {     font-family: courier new, courier, monospace } small {     font-size: 12px } ol, ul {     list-style: none } a {     text-decoration: none } a:hover {     text-decoration: underline } sup {     vertical-align: text-top } sub {     vertical-align: text-bottom } legend {     color: #000 } fieldset, img {     border: 0 } button, input, select, textarea {     font-size: 100% } table {     border-collapse: collapse;     border-spacing: 0 } button {     border-radius: 0; }6、京东官网 CSS初始化 https://www.jd.com统一初始化 * {     margin: 0;     padding: 0 } em, i {     font-style: normal } li {     list-style: none } img {     border: 0;     vertical-align: middle } button {     cursor: pointer } a {     color: #666;     text-decoration: none } a:hover {     color: #e33333 } button, input {     font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, \\5B8B\4F53, sans-serif } body {     -webkit-font-smoothing: antialiased;     background-color: #fff;     font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, \\5B8B\4F53, sans-serif;     color: #666 } 其他常用样式.hide, .none {     display: none } .clearfix:after {     visibility: hidden;     clear: both;     display: block;     content: ".";     height: 0 } .clearfix {     *zoom: 1 }参考链接https://www.php.cn/faq/473405.htmlhttps://blog.csdn.net/heart_is_broken/article/details/126331482

css的4种引入方式--内联样式（标签内style）、内部样式表（<style>）、外部样式表（<link>、@import） 1.内联样式（Inline Styles）：可以直接在HTML元素的style属性中定义CSS样式。例如：<p style="color: red; font-size: 16px;">这是一段红色的文本</p>内联样式适用于对单个元素应用特定的样式，但不适合用于整个网页或多个元素的样式定义。2.内部样式表（Internal Style Sheets）：可以在HTML文档的标签中使用<style>标签定义CSS样式。例如：<head> <style> p { color: red; font-size: 16px; } </style> </head> <body> <p>这是一段红色的文本</p> </body>内部样式表适用于在单个HTML文档中定义样式，可以应用于多个元素。3.外部样式表（External Style Sheets）：可以将CSS样式定义保存在一个独立的CSS文件中，并在HTML文档中通过<link>标签（链接式）或者@import指令（导入式）引入。通过<link>标签引入（最常用方式）例如：<head> <link rel="stylesheet" href="styles.css"> </head> <body> <p>这是一段红色的文本</p> </body>在这种方式下，CSS样式定义保存在名为styles.css的外部文件中，可以被多个HTML文档共享。这样做可以提高代码的可维护性和可重用性。通过@import指令引入@import指令是CSS语言的一部分，使用时把这个指令添加到HTML的一个<style>标签中；要与外部的CSS文件关联起来，得使用url而不是href，并且要把路径放在一个圆括号里面；<html> <head> <style type="text/css"> @import url(css/styles.css); </style> <!--此处的type属性是针对HTML4.01的，若在HTML5中则不需要加--> </head> <body> ...... </body> </html通过外部样式表，你可以在同一个CSS文件中定义多个样式规则，并将其应用于不同的HTML元素。以上是CSS的主要引入方式，开发人员可以根据具体需求选择适合的方式。通常情况下，推荐使用外部样式表，因为它提供了最好的可维护性和灵活性。两种方式的区别标签属于html标签，而@import是css提供的一种方式，标签不仅可以引入css，还可以做其他事，而@import只能引入css；加载顺序的区别：当一个页面被浏览时，link引入的css会被同步加载，而@import引用的css是等到其他元素全被下载完之后才被加载；兼容性的不同：@import是CSS2.1才提出的，所以只有在IE5以上才支持，低版本的浏览器不支持，而标签无此问题；当使用javascript控制DOM去改变样式时，只能使用标签，因为@import不是DOM可以控制的。参考链接https://zhuanlan.zhihu.com/p/658723834https://www.cnblogs.com/zhaoyingli/p/5379990.html