[{"data":1,"prerenderedAt":2391},["ShallowReactive",2],{"content:\u002Fpost\u002Fhtml-css-quick-start":3,"surround:\u002Fpost\u002Fhtml-css-quick-start":2380},{"id":4,"title":5,"body":6,"categories":2340,"date":2342,"description":2343,"draft":2344,"extension":2345,"image":2346,"meta":2347,"navigation":2349,"path":2350,"permalink":2346,"published":2346,"readingTime":2351,"recommend":2346,"references":2346,"seo":2356,"sitemap":2358,"stem":2375,"tags":2376,"type":2377,"updated":2378,"__hash__":2379},"content\u002Fpost\u002Fhtml-css-quick-start.md","HTML",{"type":7,"value":8,"toc":2270},"minimark",[9,13,23,27,34,42,45,48,53,56,78,81,85,89,100,110,113,119,122,125,136,142,153,157,163,167,170,173,176,182,198,202,205,208,211,217,220,223,229,232,238,242,245,248,251,262,265,276,282,289,292,298,301,304,311,317,320,323,326,332,335,338,341,347,350,356,359,365,368,371,374,377,380,383,389,392,398,401,407,410,413,416,433,436,439,442,448,451,462,465,471,474,477,480,483,489,493,496,499,505,508,514,518,525,528,534,537,540,546,550,553,556,559,565,568,580,583,586,649,653,656,659,662,673,676,682,688,691,694,697,700,706,709,712,715,721,724,730,736,739,742,745,751,754,757,763,767,884,888,891,894,899,905,909,912,920,980,982,985,988,991,994,1000,1003,1006,1009,1020,1026,1030,1033,1036,1051,1054,1057,1068,1071,1079,1085,1088,1092,1095,1098,1101,1104,1107,1121,1127,1130,1138,1141,1144,1147,1150,1153,1159,1162,1165,1171,1175,1178,1189,1192,1195,1202,1209,1212,1215,1229,1232,1242,1245,1248,1254,1260,1263,1266,1269,1275,1278,1281,1284,1287,1293,1296,1299,1302,1305,1308,1311,1314,1317,1320,1323,1329,1332,1335,1338,1341,1344,1348,1351,1354,1357,1360,1366,1369,1372,1375,1378,1384,1387,1390,1393,1399,1402,1405,1408,1414,1417,1423,1426,1429,1435,1439,1443,1446,1449,1452,1455,1460,1463,1477,1480,1483,1486,1489,1495,1498,1501,1504,1510,1513,1519,1522,1528,1531,1534,1537,1540,1547,1551,1555,1558,1561,1564,1570,1574,1577,1580,1583,1586,1589,1592,1595,1598,1601,1604,1607,1610,1613,1619,1622,1625,1628,1631,1634,1637,1640,1646,1649,1652,1658,1661,1664,1667,1684,1687,1699,1701,1704,1707,1710,1713,1716,1719,1722,1725,1728,1734,1738,1741,1744,1749,1753,1756,1759,1762,1765,1770,1773,1810,1816,1820,1823,1829,1832,1837,1840,1843,1846,1849,1854,1856,1859,1861,1866,1869,1871,1876,1879,1883,1886,1890,1893,1896,1901,1904,1907,1913,1927,1931,1934,1941,1947,1950,1955,1969,1974,1983,1988,1995,2007,2010,2013,2019,2022,2025,2028,2034,2037,2040,2043,2057,2063,2067,2070,2074,2077,2080,2086,2089,2095,2099,2102,2108,2113,2116,2119,2125,2128,2131,2137,2140,2143,2146,2149,2152,2157,2160,2166,2172,2177,2182,2185,2188,2191,2197,2200,2203,2209,2212,2215,2221,2225,2228,2231,2234,2238,2241,2244,2247,2250,2265],[10,11,12],"p",{},"在学习CSS之前，你需要对HTML有一定的了解。",[10,14,15,22],{},[16,17,21],"a",{"href":18,"rel":19},"https:\u002F\u002Fblog.hjz0713.asia\u002Farchives\u002F26.html",[20],"nofollow","点击这里","学习HTML的基础。",[24,25,26],"h1",{"id":26},"简介",[10,28,29],{},[30,31],"img",{"alt":32,"src":33},"CSS","https:\u002F\u002Fi-blog.csdnimg.cn\u002Fblog_migrate\u002Fea14bbed67c51f8ce5a3b01fa92e390e.png",[10,35,36,37,41],{},"CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 ",[38,39,40],"code",{"code":40},".css","。",[10,43,44],{},"通过使用 CSS 可以大大提升网页开发的工作效率",[10,46,47],{},"在教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。",[49,50,52],"h3",{"id":51},"什么是-css","什么是 CSS?",[10,54,55],{},"CSS 指层叠样式表 (Cascading Style Sheets)",[57,58,59,63,66,69,72,75],"ul",{},[60,61,62],"li",{},"样式定义如何显示 HTML 元素",[60,64,65],{},"样式通常存储在样式表中",[60,67,68],{},"把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题",[60,70,71],{},"外部样式表可以极大提高工作效率",[60,73,74],{},"外部样式表通常存储在 CSS 文件中",[60,76,77],{},"多个样式定义可层叠为一个",[24,79,80],{"id":80},"正片开始",[24,82,84],{"id":83},"css-语法","CSS 语法",[49,86,88],{"id":87},"css-实例","CSS 实例",[10,90,91,92,95,96,99],{},"CSS声明总是以分号 ",[38,93,94],{"code":94},"; ","结束，声明总以大括号 ",[38,97,98],{"code":98},"{}"," 括起来",[101,102,107],"pre",{"className":103,"code":105,"language":106},[104],"language-text","p {color:red;text-align:center;}\n","text",[38,108,105],{"__ignoreMap":109},"",[10,111,112],{},"为了让CSS可读性更强，你可以每行只描述一个属性",[101,114,117],{"className":115,"code":116,"language":106},[104],"p\n{\n    color:red;\n    text-align:center;\n}\n\n",[38,118,116],{"__ignoreMap":109},[10,120,121],{},"CSS 注释",[10,123,124],{},"注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。",[10,126,127,128,131,132,135],{},"CSS注释以 ",[38,129,130],{"code":130},"\u002F* ","开始, 以",[38,133,134],{"code":134},"*\u002F","结束, 实例如下",[101,137,140],{"className":138,"code":139,"language":106},[104],"\u002F*这是个注释*\u002F\np\n{\n    text-align:center;\n    \u002F*这是另一个注释*\u002F\n    color:black;\n    font-family:arial;\n}\n\n",[38,141,139],{"__ignoreMap":109},[24,143,145,146,149,150],{"id":144},"css-的id-和-class","CSS 的",[38,147,148],{"code":148},"Id"," 和",[38,151,152],{"code":152}," Class",[49,154,156],{"id":155},"id-和-class-的选择","id 和 class 的选择",[10,158,159,160],{},"如果你要在HTML元素中设置CSS样式，你需要在元素中设置\"id\" 和 \"class\"：",[38,161,162],{"code":162},"\u003C.....id=\"...\" class=\"...\">",[49,164,166],{"id":165},"id-的选择","id 的选择",[10,168,169],{},"id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。",[10,171,172],{},"HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 \"#\" 来定义。",[10,174,175],{},"以下的样式规则应用于元素属性 id=\"para1\":",[101,177,180],{"className":178,"code":179,"language":106},[104],"#para1\n{\n    text-align:center;\n    color:red;\n}\n",[38,181,179],{"__ignoreMap":109},[10,183,184,185,189,190,193,194,41],{},"提示：ID属性",[186,187,188],"strong",{},"尽量","以",[186,191,192],{},"字母","开头，数字开头的ID在 Mozilla\u002FFirefox 浏览器中",[195,196,197],"em",{},"不起作用",[49,199,201],{"id":200},"class-的选择","class 的选择",[10,203,204],{},"class 选择器用于描述一组元素的样式，class 选择有别于id选择，class可以在多个元素中使用。",[10,206,207],{},"class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：",[10,209,210],{},"在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。",[101,212,215],{"className":213,"code":214,"language":106},[104],".center {text-align:center;}\n",[38,216,214],{"__ignoreMap":109},[10,218,219],{},"你也可以指定特定的 HTML 元素使用 class。",[10,221,222],{},"在以下实例中, 所有的 p 元素使用 class=\"center\" 让该元素的文本居中",[101,224,227],{"className":225,"code":226,"language":106},[104],"p.center {text-align:center;}\n",[38,228,226],{"__ignoreMap":109},[10,230,231],{},"多个 class 选择器可以使用空格分开.",[101,233,236],{"className":234,"code":235,"language":106},[104],".center { text-align:center; }\n.color { color:#ff0000; }\n",[38,237,235],{"__ignoreMap":109},[24,239,241],{"id":240},"css的-创建","CSS的 创建",[10,243,244],{},"当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。",[10,246,247],{},"如何插入样式表",[10,249,250],{},"插入样式表的方法有三种:",[57,252,253,256,259],{},[60,254,255],{},"外部样式表(External style sheet)",[60,257,258],{},"内部样式表(Internal style sheet)",[60,260,261],{},"内联样式(Inline style)",[49,263,264],{"id":264},"外部样式表",[10,266,267,268,271,272,275],{},"当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 ",[38,269,270],{"code":270},"\u003Clink> ","标签链接到样式表。 ",[38,273,274],{"code":274},"\u003Clink>"," 标签在（文档的）头部：",[101,277,280],{"className":278,"code":279,"language":106},[104],"\u003Chead>\n\u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"mystyle.css\">\n\u003C\u002Fhead>\n",[38,281,279],{"__ignoreMap":109},[10,283,284,285,288],{},"浏览器会从文件 ",[38,286,287],{"code":287},"mystyle.css"," 中读到样式声明，并根据它来格式文档。",[10,290,291],{},"外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：",[101,293,296],{"className":294,"code":295,"language":106},[104],"hr {color:sienna;}\np {margin-left:20px;}\nbody {background-image:url(\"\u002Fimages\u002Fback40.gif\");}\n",[38,297,295],{"__ignoreMap":109},[10,299,300],{},"提示：不要在属性值与单位之间留有空格（如：\"margin-left: 20 px\" ），正确的写法是 \"margin-left: 20px\" 。）（是20px不是20 px）",[49,302,303],{"id":303},"内部样式表",[10,305,306,307,310],{},"当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 ",[38,308,309],{"code":309},"\u003Cstyle> ","标签在文档头部定义内部样式表，就像这样:",[101,312,315],{"className":313,"code":314,"language":106},[104],"\u003Chead>\n\u003Cstyle>\nhr {color:sienna;}\np {margin-left:20px;}\nbody {background-image:url(\"images\u002Fback40.gif\");}\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n",[38,316,314],{"__ignoreMap":109},[49,318,319],{"id":319},"内联样式",[10,321,322],{},"由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。",[10,324,325],{},"要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：",[101,327,330],{"className":328,"code":329,"language":106},[104],"\u003Cp style=\"color:sienna;margin-left:20px\">这是一个段落。\u003C\u002Fp>\n",[38,331,329],{"__ignoreMap":109},[49,333,334],{"id":334},"多重样式",[10,336,337],{},"如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。",[10,339,340],{},"例如，外部样式表拥有针对 h3 选择器的三个属性：",[101,342,345],{"className":343,"code":344,"language":106},[104],"h3\n{\n    color:red;\n    text-align:left;\n    font-size:8pt;\n}\n",[38,346,344],{"__ignoreMap":109},[10,348,349],{},"而内部样式表拥有针对 h3 选择器的两个属性：",[101,351,354],{"className":352,"code":353,"language":106},[104],"h3\n{\n    text-align:right;\n    font-size:20pt;\n}\n",[38,355,353],{"__ignoreMap":109},[10,357,358],{},"假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：",[101,360,363],{"className":361,"code":362,"language":106},[104],"color:red;\ntext-align:right;\nfont-size:20pt;\n",[38,364,362],{"__ignoreMap":109},[10,366,367],{},"即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。",[49,369,370],{"id":370},"多重样式优先级",[10,372,373],{},"样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。",[10,375,376],{},"一般情况下，优先级如下：",[10,378,379],{},"（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式",[10,381,382],{},"style.css 文件样式代码如下：",[101,384,387],{"className":385,"code":386,"language":106},[104],"h3 {\n    color:blue;\n}\n",[38,388,386],{"__ignoreMap":109},[10,390,391],{},"实例",[101,393,396],{"className":394,"code":395,"language":106},[104],"\u003Chead>\n    \u003C!-- 外部样式 style.css -->\n    \u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"style.css\"\u002F>\n    \u003C!-- 设置：h3{color:blue;} -->\n    \u003Cstyle type=\"text\u002Fcss\">\n      \u002F* 内部样式 *\u002F\n      h3{color:green;}\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Ch3>显示绿色，是内部样式\u003C\u002Fh3>\n\u003C\u002Fbody>\n",[38,397,395],{"__ignoreMap":109},[10,399,400],{},"注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式，实例如下",[101,402,405],{"className":403,"code":404,"language":106},[104],"\u003Chead>\n    \u003C!-- 设置：h3{color:blue;} -->\n    \u003Cstyle type=\"text\u002Fcss\">\n      \u002F* 内部样式 *\u002F\n      h3{color:green;}\n    \u003C\u002Fstyle>\n    \u003C!-- 外部样式 style.css -->\n    \u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"style.css\"\u002F>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Ch3>显示蓝色，是外部样式\u003C\u002Fh3>\n\u003C\u002Fbody>\n",[38,406,404],{"__ignoreMap":109},[24,408,409],{"id":409},"背景",[10,411,412],{},"CSS 背景属性用于定义HTML元素的背景。",[10,414,415],{},"CSS 属性定义背景效果:",[57,417,418,421,424,427,430],{},[60,419,420],{},"background-color",[60,422,423],{},"background-image",[60,425,426],{},"background-repeat",[60,428,429],{},"background-attachment",[60,431,432],{},"background-position",[49,434,435],{"id":435},"背景颜色",[10,437,438],{},"background-color 属性定义了元素的背景颜色.",[10,440,441],{},"页面的背景颜色使用在body的选择器中:",[101,443,446],{"className":444,"code":445,"language":106},[104],"body {background-color:#b0c4de;}\n",[38,447,445],{"__ignoreMap":109},[10,449,450],{},"CSS中，颜色值通常以以下方式定义:",[57,452,453,456,459],{},[60,454,455],{},"十六进制 - 如：\"#ff0000\"",[60,457,458],{},"RGB - 如：\"rgb(255,0,0)\"",[60,460,461],{},"颜色名称 - 如：\"red\"",[10,463,464],{},"以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:",[101,466,469],{"className":467,"code":468,"language":106},[104],"h1 {background-color:#6495ed;}\np {background-color:#e0ffff;}\ndiv {background-color:#b0c4de;}\n",[38,470,468],{"__ignoreMap":109},[49,472,473],{"id":473},"背景图像",[10,475,476],{},"background-image 属性描述了元素的背景图像.",[10,478,479],{},"默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.",[10,481,482],{},"页面背景图片设置实例:",[101,484,487],{"className":485,"code":486,"language":106},[104],"body {background-image:url('paper.gif');}\n",[38,488,486],{"__ignoreMap":109},[49,490,492],{"id":491},"背景图像-水平或垂直平铺","背景图像 - 水平或垂直平铺",[10,494,495],{},"默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。",[10,497,498],{},"一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:",[101,500,503],{"className":501,"code":502,"language":106},[104],"\nbody\n{\nbackground-image:url('gradient2.png');\n}\n",[38,504,502],{"__ignoreMap":109},[10,506,507],{},"如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:",[101,509,512],{"className":510,"code":511,"language":106},[104],"body\n{\nbackground-image:url('gradient2.png');\nbackground-repeat:repeat-x;\n}\n",[38,513,511],{"__ignoreMap":109},[49,515,517],{"id":516},"背景图像-设置定位与不平铺","背景图像- 设置定位与不平铺",[10,519,520,524],{},[30,521],{"alt":522,"src":523},"请添加图片描述","https:\u002F\u002Fi-blog.csdnimg.cn\u002Fblog_migrate\u002Fe5408ebc48723dc56856b199ccdb1d19.gif","让背景图像不影响文本的排版",[10,526,527],{},"如果你不想让图像平铺，你可以使用 background-repeat 属性:",[101,529,532],{"className":530,"code":531,"language":106},[104],"body\n{\nbackground-image:url('img_tree.png');\nbackground-repeat:no-repeat;\n}\n",[38,533,531],{"__ignoreMap":109},[10,535,536],{},"以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。",[10,538,539],{},"可以利用 background-position 属性改变图像在背景中的位置:",[101,541,544],{"className":542,"code":543,"language":106},[104],"body\n{\nbackground-image:url('img_tree.png');\nbackground-repeat:no-repeat;\nbackground-position:right top;\n}\n\n",[38,545,543],{"__ignoreMap":109},[49,547,549],{"id":548},"背景-简写属性","背景- 简写属性",[10,551,552],{},"在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。",[10,554,555],{},"为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.",[10,557,558],{},"背景颜色的简写属性为 \"background\":",[101,560,563],{"className":561,"code":562,"language":106},[104],"body {background:#ffffff url('img_tree.png') no-repeat right top;}\n",[38,564,562],{"__ignoreMap":109},[10,566,567],{},"当使用简写属性时，属性值的顺序为：:",[57,569,570,572,574,576,578],{},[60,571,420],{},[60,573,423],{},[60,575,426],{},[60,577,429],{},[60,579,432],{},[10,581,582],{},"以上属性无需全部使用，你可以按照页面的实际需要使用.",[49,584,585],{"id":585},"背景属性一览",[587,588,589,602],"table",{},[590,591,592],"thead",{},[593,594,595,599],"tr",{},[596,597,598],"th",{},"标签",[596,600,601],{},"描述",[603,604,605,614,621,628,635,642],"tbody",{},[593,606,607,611],{},[608,609,610],"td",{},"background",[608,612,613],{},"简写属性，作用是将背景属性设置在一个声明中。",[593,615,616,618],{},[608,617,429],{},[608,619,620],{},"背景图像是否固定或者随着页面的其余部分滚动。",[593,622,623,625],{},[608,624,420],{},[608,626,627],{},"设置元素的背景颜色。",[593,629,630,632],{},[608,631,423],{},[608,633,634],{},"把图像设置为背景。",[593,636,637,639],{},[608,638,432],{},[608,640,641],{},"设置背景图像的起始位置。",[593,643,644,646],{},[608,645,426],{},[608,647,648],{},"设置背景图像是否及如何重复。",[24,650,652],{"id":651},"css-文本格式","CSS 文本格式",[49,654,655],{"id":655},"文本颜色",[10,657,658],{},"颜色属性被用来设置文字的颜色。",[10,660,661],{},"颜色是通过CSS最经常的指定：",[57,663,664,667,670],{},[60,665,666],{},"十六进制值 - 如: ＃FF0000",[60,668,669],{},"一个RGB值 - 如: RGB(255,0,0)",[60,671,672],{},"颜色的名称 - 如: red",[10,674,675],{},"一个网页的背景颜色是指在主体内的选择：",[101,677,680],{"className":678,"code":679,"language":106},[104],"body {color:red;}\nh1 {color:#00ff00;}\nh2 {color:rgb(255,0,0);}\n",[38,681,679],{"__ignoreMap":109},[10,683,684,687],{},[30,685],{"alt":522,"src":686},"https:\u002F\u002Fi-blog.csdnimg.cn\u002Fblog_migrate\u002F5dbd3d9b7473300fe0662c0430667111.gif","对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。",[49,689,690],{"id":690},"文本的对齐方式",[10,692,693],{},"文本排列属性是用来设置文本的水平对齐方式。",[10,695,696],{},"文本可居中或对齐到左或右,两端对齐.",[10,698,699],{},"当text-align设置为\"justify\"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。",[101,701,704],{"className":702,"code":703,"language":106},[104],"h1 {text-align:center;}\np.date {text-align:right;}\np.main {text-align:justify;}\n",[38,705,703],{"__ignoreMap":109},[49,707,708],{"id":708},"文本修饰",[10,710,711],{},"text-decoration 属性用来设置或删除文本的装饰。",[10,713,714],{},"从设计的角度看 text-decoration属性主要是用来删除链接的下划线：",[101,716,719],{"className":717,"code":718,"language":106},[104],"a {text-decoration:none;}\n",[38,720,718],{"__ignoreMap":109},[10,722,723],{},"也可以这样装饰文字：",[101,725,728],{"className":726,"code":727,"language":106},[104],"h1 {text-decoration:overline;}\nh2 {text-decoration:line-through;}\nh3 {text-decoration:underline;\n",[38,729,727],{"__ignoreMap":109},[10,731,732,735],{},[30,733],{"alt":522,"src":734},"https:\u002F\u002Fi-blog.csdnimg.cn\u002Fblog_migrate\u002F20074069be42655144ed01e1a05790c2.gif","不建议强调指出不是链接的文本，因为这常常混淆用户。",[49,737,738],{"id":738},"文本转换",[10,740,741],{},"文本转换属性是用来指定在一个文本中的大写和小写字母。",[10,743,744],{},"可用于所有字句变成大写或小写字母，或每个单词的首字母大写。",[101,746,749],{"className":747,"code":748,"language":106},[104],"p.uppercase {text-transform:uppercase;}\np.lowercase {text-transform:lowercase;}\np.capitalize {text-transform:capitalize;}\n",[38,750,748],{"__ignoreMap":109},[49,752,753],{"id":753},"文本缩进",[10,755,756],{},"文本缩进属性是用来指定文本的第一行的缩进。",[101,758,761],{"className":759,"code":760,"language":106},[104],"p {text-indent:50px;}\n",[38,762,760],{"__ignoreMap":109},[49,764,766],{"id":765},"所有css文本属性","所有CSS文本属性",[587,768,769,778],{},[590,770,771],{},[593,772,773,776],{},[596,774,775],{},"属性",[596,777,601],{},[603,779,780,788,796,804,812,820,828,836,844,852,860,868,876],{},[593,781,782,785],{},[608,783,784],{},"color",[608,786,787],{},"设置文本颜色",[593,789,790,793],{},[608,791,792],{},"direction",[608,794,795],{},"设置文本方向。",[593,797,798,801],{},[608,799,800],{},"letter-spacing",[608,802,803],{},"设置字符间距",[593,805,806,809],{},[608,807,808],{},"line-height",[608,810,811],{},"设置行高",[593,813,814,817],{},[608,815,816],{},"text-align",[608,818,819],{},"对齐元素中的文本",[593,821,822,825],{},[608,823,824],{},"text-decoration",[608,826,827],{},"向文本添加修饰",[593,829,830,833],{},[608,831,832],{},"text-indent",[608,834,835],{},"缩进元素中文本的首行",[593,837,838,841],{},[608,839,840],{},"text-shadow",[608,842,843],{},"设置文本阴影",[593,845,846,849],{},[608,847,848],{},"text-transform",[608,850,851],{},"控制元素中的字母",[593,853,854,857],{},[608,855,856],{},"unicode-bidi",[608,858,859],{},"设置或返回文本是否被重写",[593,861,862,865],{},[608,863,864],{},"vertical-align",[608,866,867],{},"设置元素的垂直对齐",[593,869,870,873],{},[608,871,872],{},"white-space",[608,874,875],{},"设置元素中空白的处理方式",[593,877,878,881],{},[608,879,880],{},"word-spacing",[608,882,883],{},"设置字间距",[24,885,887],{"id":886},"css-字体","CSS 字体",[10,889,890],{},"CSS字体属性定义字体，加粗，大小，文字样式。",[49,892,893],{"id":893},"serif和sans-serif字体之间的区别",[10,895,896],{},[30,897],{"alt":522,"src":898},"https:\u002F\u002Fi-blog.csdnimg.cn\u002Fblog_migrate\u002Fa1fd6b69b9a5d1fa25ab0b4bcb374b58.gif",[10,900,901,904],{},[30,902],{"alt":522,"src":903},"https:\u002F\u002Fi-blog.csdnimg.cn\u002Fblog_migrate\u002Fe519dbdcb34861dce2cee6188c9ffa9d.gif","在计算机屏幕上，sans-serif字体比serif字体容易阅读",[24,906,908],{"id":907},"css字型","CSS字型",[10,910,911],{},"在CSS中，有两种类型的字体系列名称：",[57,913,914,917],{},[60,915,916],{},"通用字体系列 - 拥有相似外观的字体系统组合（如 \"Serif\" 或 \"Monospace\"）",[60,918,919],{},"特定字体系列 - 一个特定的字体系列（如 \"Times\" 或 \"Courier\"）",[587,921,922,935],{},[590,923,924],{},[593,925,926,929,932],{},[596,927,928],{},"Generic family",[596,930,931],{},"字体系列",[596,933,934],{},"说明",[603,936,937,952,966],{},[593,938,939,942,949],{},[608,940,941],{},"Serif",[608,943,944,945,948],{},"Times New Roman",[946,947],"br",{},"Georgia",[608,950,951],{},"Serif字体中字符在行的末端拥有额外的装饰",[593,953,954,957,963],{},[608,955,956],{},"Sans-serif",[608,958,959,960,962],{},"Arial",[946,961],{},"Verdana",[608,964,965],{},"\"Sans\"是指无 - 这些字体在末端没有额外的装饰",[593,967,968,971,977],{},[608,969,970],{},"Monospace",[608,972,973,974,976],{},"Courier New",[946,975],{},"Lucida Console",[608,978,979],{},"所有的等宽字符具有相同的宽度",[49,981,931],{"id":931},[10,983,984],{},"font-family 属性设置文本的字体系列。",[10,986,987],{},"font-family 属性应该设置几个字体名称作为一种\"后备\"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。",[10,989,990],{},"注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：\"宋体\"。",[10,992,993],{},"多个字体系列是用一个逗号分隔指明：",[101,995,998],{"className":996,"code":997,"language":106},[104],"p{font-family:\"Times New Roman\", Times, serif;}\n",[38,999,997],{"__ignoreMap":109},[49,1001,1002],{"id":1002},"字体样式",[10,1004,1005],{},"主要是用于指定斜体文字的字体样式属性。",[10,1007,1008],{},"这个属性有三个值：",[57,1010,1011,1014,1017],{},[60,1012,1013],{},"正常 - 正常显示文本",[60,1015,1016],{},"斜体 - 以斜体字显示的文字",[60,1018,1019],{},"倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）",[101,1021,1024],{"className":1022,"code":1023,"language":106},[104],"p.normal {font-style:normal;}\np.italic {font-style:italic;}\np.oblique {font-style:oblique;}\n",[38,1025,1023],{"__ignoreMap":109},[1027,1028,1029],"h2",{"id":1029},"字体大小",[10,1031,1032],{},"font-size 属性设置文本的大小。",[10,1034,1035],{},"能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。",[10,1037,1038,1039,1042,1043,1046,1047,1050],{},"请务必使用正确的HTML标签，就",[38,1040,1041],{"code":1041},"\u003Ch1>"," - ",[38,1044,1045],{"code":1045},"\u003Ch6>","表示标题和",[38,1048,1049],{"code":1049},"\u003Cp>","表示段落：",[10,1052,1053],{},"字体大小的值可以是绝对或相对的大小。",[10,1055,1056],{},"绝对大小：",[57,1058,1059,1062,1065],{},[60,1060,1061],{},"设置一个指定大小的文本",[60,1063,1064],{},"不允许用户在所有浏览器中改变文本大小",[60,1066,1067],{},"确定了输出的物理尺寸时绝对大小很有用",[10,1069,1070],{},"相对大小：",[57,1072,1073,1076],{},[60,1074,1075],{},"相对于周围的元素来设置大小",[60,1077,1078],{},"允许用户在浏览器中改变文字大小",[10,1080,1081,1084],{},[30,1082],{"alt":522,"src":1083},"https:\u002F\u002Fi-blog.csdnimg.cn\u002Fblog_migrate\u002F11f2a2587510cf1d05f4c24bde4c9437.gif","如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）",[10,1086,1087],{},"第一篇教程完结。",[24,1089,1091],{"id":1090},"css-链接","CSS 链接",[10,1093,1094],{},"不同的链接可以有不同的样式。",[49,1096,1097],{"id":1097},"链接样式",[10,1099,1100],{},"链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。",[10,1102,1103],{},"特别的链接，可以有不同的样式，这取决于他们是什么状态。",[10,1105,1106],{},"这四个链接状态是：",[57,1108,1109,1112,1115,1118],{},[60,1110,1111],{},"a:link - 正常，未访问过的链接",[60,1113,1114],{},"a:visited - 用户已访问过的链接",[60,1116,1117],{},"a:hover - 当用户鼠标放在链接上时",[60,1119,1120],{},"a:active - 链接被点击的那一刻",[101,1122,1125],{"className":1123,"code":1124,"language":106},[104],"a:link {color:#000000;}      \u002F* 未访问链接*\u002F\na:visited {color:#00FF00;}  \u002F* 已访问链接 *\u002F\na:hover {color:#FF00FF;}  \u002F* 鼠标移动到链接上 *\u002F\na:active {color:#0000FF;}  \u002F* 鼠标点击时 *\u002F\n",[38,1126,1124],{"__ignoreMap":109},[10,1128,1129],{},"当设置为若干链路状态的样式，也有一些顺序规则：",[57,1131,1132,1135],{},[60,1133,1134],{},"a:hover 必须跟在 a:link 和 a:visited后面",[60,1136,1137],{},"a:active 必须跟在 a:hover后面",[49,1139,1140],{"id":1140},"常见的链接样式",[10,1142,1143],{},"根据上述链接的颜色变化的例子，看它是在什么状态。",[10,1145,1146],{},"让我们通过一些其他常见的方式转到链接样式：",[49,1148,708],{"id":1149},"文本修饰-1",[10,1151,1152],{},"text-decoration 属性主要用于删除链接中的下划线：",[101,1154,1157],{"className":1155,"code":1156,"language":106},[104],"a:link {text-decoration:none;}\na:visited {text-decoration:none;}\na:hover {text-decoration:underline;}\na:active {text-decoration:underline;}\n",[38,1158,1156],{"__ignoreMap":109},[49,1160,435],{"id":1161},"背景颜色-1",[10,1163,1164],{},"背景颜色属性指定链接背景色：",[101,1166,1169],{"className":1167,"code":1168,"language":106},[104],"a:link {background-color:#B2FF99;}\na:visited {background-color:#FFFF85;}\na:hover {background-color:#FF704D;}\na:active {background-color:#FF704D;}\n",[38,1170,1168],{"__ignoreMap":109},[24,1172,1174],{"id":1173},"css-列表","CSS 列表",[10,1176,1177],{},"CSS 列表属性作用如下：",[57,1179,1180,1183,1186],{},[60,1181,1182],{},"设置不同的列表项标记为有序列表",[60,1184,1185],{},"设置不同的列表项标记为无序列表",[60,1187,1188],{},"设置列表项标记为图像",[49,1190,1191],{"id":1191},"列表",[10,1193,1194],{},"在 HTML中，有两种类型的列表：",[10,1196,1197,1198,1201],{},"无序列表",[38,1199,1200],{"code":1200}," ul"," - 列表项标记用特殊图形（如小黑点、小方框等）",[10,1203,1204,1205,1208],{},"有序列表 ",[38,1206,1207],{"code":1207},"ol"," - 列表项的标记有数字或字母",[10,1210,1211],{},"使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。",[10,1213,1214],{},"无序列表如下所示:",[57,1216,1217,1220,1223],{},[60,1218,1219],{},"Coffee",[60,1221,1222],{},"Tea",[60,1224,1225],{},[1226,1227,1228],"del",{},"Coca Cola",[10,1230,1231],{},"有序列表如下所示:",[1207,1233,1234,1236,1238],{},[60,1235,1219],{},[60,1237,1222],{},[60,1239,1240],{},[1226,1241,1228],{},[49,1243,1244],{"id":1244},"不同的列表项标记",[10,1246,1247],{},"list-style-type属性指定列表项标记的类型是：",[101,1249,1252],{"className":1250,"code":1251,"language":106},[104],"ul.a {list-style-type: circle;}\nul.b {list-style-type: square;}\n",[38,1253,1251],{"__ignoreMap":109},[101,1255,1258],{"className":1256,"code":1257,"language":106},[104],"ol.c {list-style-type: upper-roman;}\nol.d {list-style-type: lower-alpha;}\n",[38,1259,1257],{"__ignoreMap":109},[10,1261,1262],{},"一些值是无序列表，以及有些是有序列表。",[49,1264,1265],{"id":1265},"作为列表项标记的图像",[10,1267,1268],{},"要指定列表项标记的图像，使用列表样式图像属性：",[101,1270,1273],{"className":1271,"code":1272,"language":106},[104],"ul\n{\n    list-style-image: url('sqpurple.gif');\n}\n",[38,1274,1272],{"__ignoreMap":109},[10,1276,1277],{},"上面的例子在所有浏览器中显示并不相同，IE 和 Opera 显示图像标记比火狐，Chrome 和 Safari更高一点点。",[10,1279,1280],{},"如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，过程如下",[10,1282,1283],{},"浏览器兼容性解决方案",[10,1285,1286],{},"同样在所有的浏览器，下面的例子会显示的图像标记：",[101,1288,1291],{"className":1289,"code":1290,"language":106},[104],"ul\n{\n    list-style-type: none;\n    padding: 0px;\n    margin: 0px;\n}\nul li\n{\n    background-image: url(sqpurple.gif);\n    background-repeat: no-repeat;\n    background-position: 0px 5px; \n    padding-left: 14px; \n}\n",[38,1292,1290],{"__ignoreMap":109},[10,1294,1295],{},"ui:",[10,1297,1298],{},"设置列表类型为没有列表项标记",[10,1300,1301],{},"设置填充和边距 0px（浏览器兼容性）",[10,1303,1304],{},"ul 中所有 li:",[10,1306,1307],{},"设置图像的 URL，并设置它只显示一次（无重复）",[10,1309,1310],{},"您需要的定位图像位置（左 0px 和上下 5px）",[10,1312,1313],{},"用 padding-left 属性把文本置于列表中",[10,1315,1316],{},"列表 - 简写属性",[10,1318,1319],{},"在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。",[10,1321,1322],{},"为列表使用简写属性，列表样式属性设置如下：",[101,1324,1327],{"className":1325,"code":1326,"language":106},[104],"ul\n{\n    list-style: square url(\"sqpurple.gif\");\n}\n",[38,1328,1326],{"__ignoreMap":109},[10,1330,1331],{},"可以按顺序设置如下属性：",[10,1333,1334],{},"list-style-type",[10,1336,1337],{},"list-style-position (有关说明，请参见下面的CSS属性表)",[10,1339,1340],{},"list-style-image",[10,1342,1343],{},"如果上述值丢失一个，其余仍在指定的顺序，就没关系。",[24,1345,1347],{"id":1346},"css-表格","CSS 表格",[10,1349,1350],{},"使用 CSS 可以使 HTML 表格更美观。",[49,1352,1353],{"id":1353},"表格边框",[10,1355,1356],{},"指定CSS表格边框，使用border属性。",[10,1358,1359],{},"下面的例子指定了一个表格的Th和TD元素的黑色边框：",[101,1361,1364],{"className":1362,"code":1363,"language":106},[104],"table, th, td\n{\n    border: 1px solid black;\n}\n",[38,1365,1363],{"__ignoreMap":109},[10,1367,1368],{},"请注意，在上面的例子中的表格有双边框。这是因为表和th\u002F td元素有独立的边界。",[10,1370,1371],{},"为了显示一个表的单个边框，使用 border-collapse属性。",[49,1373,1374],{"id":1374},"折叠边框",[10,1376,1377],{},"border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：",[101,1379,1382],{"className":1380,"code":1381,"language":106},[104],"table\n{\n    border-collapse:collapse;\n}\ntable,th, td\n{\n    border: 1px solid black;\n}\n",[38,1383,1381],{"__ignoreMap":109},[49,1385,1386],{"id":1386},"表格宽度和高度",[10,1388,1389],{},"Width和height属性定义表格的宽度和高度。",[10,1391,1392],{},"下面的例子是设置100％的宽度，50像素的th元素的高度的表格：",[101,1394,1397],{"className":1395,"code":1396,"language":106},[104],"table \n{\n    width:100%;\n}\nth\n{\n    height:50px;\n}\n",[38,1398,1396],{"__ignoreMap":109},[49,1400,1401],{"id":1401},"表格文字对齐",[10,1403,1404],{},"表格中的文本对齐和垂直对齐属性。",[10,1406,1407],{},"text-align属性设置水平对齐方式，向左，右，或中心",[101,1409,1412],{"className":1410,"code":1411,"language":106},[104],"td\n{\n    text-align:right;\n}\n",[38,1413,1411],{"__ignoreMap":109},[10,1415,1416],{},"垂直对齐属性设置垂直对齐，比如顶部，底部或中间：",[101,1418,1421],{"className":1419,"code":1420,"language":106},[104],"td\n{\n    height:50px;\n    vertical-align:bottom;\n}\n",[38,1422,1420],{"__ignoreMap":109},[49,1424,1425],{"id":1425},"表格颜色",[10,1427,1428],{},"下面的例子指定边框的颜色，和th元素的文本和背景颜色：",[101,1430,1433],{"className":1431,"code":1432,"language":106},[104],"table, td, th\n{\n    border:1px solid green;\n}\nth\n{\n    background-color:green;\n    color:white;\n}\n",[38,1434,1432],{"__ignoreMap":109},[24,1436,1438],{"id":1437},"css-盒子模型","CSS 盒子模型",[49,1440,1442],{"id":1441},"css-盒子模型box-model","CSS 盒子模型(Box Model)",[10,1444,1445],{},"所有HTML元素可以看作盒子，在CSS中，\"box model\"这一术语是用来设计和布局时使用。",[10,1447,1448],{},"CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。",[10,1450,1451],{},"盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。",[10,1453,1454],{},"下面的图片说明了盒子模型(Box Model)：",[10,1456,1457],{},[30,1458],{"alt":522,"src":1459},"https:\u002F\u002Fi-blog.csdnimg.cn\u002Fblog_migrate\u002F75b5e69cf300d3e89061c2a493cfc37f.gif",[10,1461,1462],{},"不同部分的说明：",[57,1464,1465,1468,1471,1474],{},[60,1466,1467],{},"Margin(外边距) - 清除边框外的区域，外边距是透明的。",[60,1469,1470],{},"Border(边框) - 围绕在内边距和内容外的边框。",[60,1472,1473],{},"Padding(内边距) - 清除内容周围的区域，内边距是透明的。",[60,1475,1476],{},"Content(内容) - 盒子的内容，显示文本和图像。",[10,1478,1479],{},"为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。",[49,1481,1482],{"id":1482},"元素的宽度和高度",[10,1484,1485],{},"Remark重要: 当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。",[10,1487,1488],{},"下面的例子中的元素的总宽度为 450px：",[101,1490,1493],{"className":1491,"code":1492,"language":106},[104]," \ndiv {\n    width: 300px;\n    border: 25px solid green;\n    padding: 25px;\n    margin: 25px;\n}\n",[38,1494,1492],{"__ignoreMap":109},[10,1496,1497],{},"让我们自己算算：",[10,1499,1500],{},"300px (宽)+ 50px (左 + 右填充)+ 50px (左 + 右边框)+ 50px (左 + 右边距)= 450px",[10,1502,1503],{},"试想一下，你只有 250 像素的空间。让我们设置总宽度为 250 像素的元素:",[101,1505,1508],{"className":1506,"code":1507,"language":106},[104],"div {\n   width: 220px;\n   padding: 10px;\n   border: 5px solid gray;\n   margin: 0; \n}\n",[38,1509,1507],{"__ignoreMap":109},[10,1511,1512],{},"最终元素的总宽度计算公式是这样的：",[101,1514,1517],{"className":1515,"code":1516,"language":106},[104],"总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距\n",[38,1518,1516],{"__ignoreMap":109},[10,1520,1521],{},"元素的总高度最终计算公式是这样的：",[101,1523,1526],{"className":1524,"code":1525,"language":106},[104],"总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距\n",[38,1527,1525],{"__ignoreMap":109},[49,1529,1530],{"id":1530},"浏览器的兼容性问题",[10,1532,1533],{},"一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。",[10,1535,1536],{},"虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。",[10,1538,1539],{},"IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。",[10,1541,1542,1543,1546],{},"解决IE8及更早版本不兼容问题可以在HTML页面声明 ",[38,1544,1545],{"code":1545},"\u003C!DOCTYPE html>","即可。",[24,1548,1550],{"id":1549},"css-边框","CSS 边框",[49,1552,1554],{"id":1553},"css-边框属性","CSS 边框属性",[10,1556,1557],{},"CSS边框属性允许你指定一个元素边框的样式和颜色。",[10,1559,1560],{},"边框样式",[10,1562,1563],{},"边框样式属性指定要显示什么样的边界。",[10,1565,1566,1569],{},[30,1567],{"alt":522,"src":1568},"https:\u002F\u002Fi-blog.csdnimg.cn\u002Fblog_migrate\u002F082cb5250cd493611a87ca98fe9d9ce9.gif","border-style属性用来定义边框的样式",[49,1571,1573],{"id":1572},"border-style-值","border-style 值:",[10,1575,1576],{},"none: 默认无边框",[10,1578,1579],{},"dotted: 定义一个点线边框",[10,1581,1582],{},"dashed: 定义一个虚线边框",[10,1584,1585],{},"solid: 定义实线边框",[10,1587,1588],{},"double: 定义两个边框。 两个边框的宽度和 border-width 的值相同",[10,1590,1591],{},"groove: 定义3D沟槽边框。效果取决于边框的颜色值",[10,1593,1594],{},"ridge: 定义3D脊边框。效果取决于边框的颜色值",[10,1596,1597],{},"inset:定义一个3D的嵌入边框。效果取决于边框的颜色值",[10,1599,1600],{},"outset: 定义一个3D突出边框。 效果取决于边框的颜色值",[49,1602,1603],{"id":1603},"边框宽度",[10,1605,1606],{},"您可以通过 border-width 属性为边框指定宽度。",[10,1608,1609],{},"为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。",[10,1611,1612],{},"注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。",[101,1614,1617],{"className":1615,"code":1616,"language":106},[104],"p.one\n{\n   border-style:solid;\n   border-width:5px;\n}\np.two\n{\n   border-style:solid;\n   border-width:medium;\n}\n\n",[38,1618,1616],{"__ignoreMap":109},[49,1620,1621],{"id":1621},"边框颜色",[10,1623,1624],{},"border-color属性用于设置边框的颜色。可以设置的颜色：",[10,1626,1627],{},"name - 指定颜色的名称，如 \"red\"",[10,1629,1630],{},"RGB - 指定 RGB 值, 如 \"rgb(255,0,0)\"",[10,1632,1633],{},"Hex - 指定16进制值, 如 \"#ff0000\"",[10,1635,1636],{},"您还可以设置边框的颜色为\"transparent\"。",[10,1638,1639],{},"注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。",[101,1641,1644],{"className":1642,"code":1643,"language":106},[104],"p.one\n{\n   border-style:solid;\n   border-color:red;\n}\np.two\n{\n   border-style:solid;\n   border-color:#98bf21;\n}\n",[38,1645,1643],{"__ignoreMap":109},[49,1647,1648],{"id":1648},"边框-单独设置各边",[10,1650,1651],{},"在CSS中，可以指定不同的侧面不同的边框：",[101,1653,1656],{"className":1654,"code":1655,"language":106},[104],"p\n{\n   border-top-style:dotted;\n   border-right-style:solid;\n   border-bottom-style:dotted;\n   border-left-style:solid;\n}\n",[38,1657,1655],{"__ignoreMap":109},[10,1659,1660],{},"上面的例子也可以设置一个单一属性：",[10,1662,1663],{},"border-style:dotted solid;",[10,1665,1666],{},"border-style属性可以有1-4个值：",[57,1668,1669,1672,1675,1678,1681],{},[60,1670,1671],{},"border-style:dotted solid double dashed",[60,1673,1674],{},"上边框是 dotted",[60,1676,1677],{},"右边框是 solid",[60,1679,1680],{},"底边框是 double",[60,1682,1683],{},"左边框是 dashed",[1685,1686],"hr",{},[57,1688,1689,1692,1694,1697],{},[60,1690,1691],{},"border-style:dotted solid double;",[60,1693,1674],{},[60,1695,1696],{},"左、右边框是 solid",[60,1698,1680],{},[10,1700,1663],{},[10,1702,1703],{},"上、底边框是 dotted",[10,1705,1706],{},"右、左边框是 solid",[10,1708,1709],{},"border-style:dotted;",[10,1711,1712],{},"四面边框是 dotted",[10,1714,1715],{},"上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。",[1027,1717,1718],{"id":1718},"边框-简写属性",[10,1720,1721],{},"上面的例子用了很多属性来设置边框。",[10,1723,1724],{},"你也可以在一个属性中设置边框。",[10,1726,1727],{},"你可以在\"border\"属性中设置：",[101,1729,1732],{"className":1730,"code":1731,"language":106},[104],"border-width\nborder-style (required)\nborder-color\n \nborder:5px solid red;\n",[38,1733,1731],{"__ignoreMap":109},[24,1735,1737],{"id":1736},"css-轮廓outline","CSS 轮廓（outline）",[10,1739,1740],{},"轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。",[10,1742,1743],{},"CSS outline 属性规定元素轮廓的样式、颜色和宽度。",[10,1745,1746],{},[30,1747],{"alt":522,"src":1748},"https:\u002F\u002Fi-blog.csdnimg.cn\u002Fblog_migrate\u002F8d31ec6a1edec3c4e96cbcfeeed7ee0c.gif",[24,1750,1752],{"id":1751},"css-margin外边距","CSS margin(外边距)",[10,1754,1755],{},"CSS margin(外边距)属性定义元素周围的空间。",[49,1757,1758],{"id":1758},"margin",[10,1760,1761],{},"margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。",[10,1763,1764],{},"margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。",[10,1766,1767],{},[30,1768],{"alt":522,"src":1769},"https:\u002F\u002Fi-blog.csdnimg.cn\u002Fblog_migrate\u002F1b3c1847de4740c7136d8d8e428d6202.png",[49,1771,1772],{"id":1772},"可能的值",[587,1774,1775,1784],{},[590,1776,1777],{},[593,1778,1779,1782],{},[596,1780,1781],{},"值",[596,1783,934],{},[603,1785,1786,1794,1802],{},[593,1787,1788,1791],{},[608,1789,1790],{},"auto",[608,1792,1793],{},"设置浏览器边距。这样做的结果会依赖于浏览器",[593,1795,1796,1799],{},[608,1797,1798],{},"length",[608,1800,1801],{},"定义一个固定的margin（使用像素，pt，em等）",[593,1803,1804,1807],{},[608,1805,1806],{},"%",[608,1808,1809],{},"定义一个使用百分比的边距",[10,1811,1812,1815],{},[30,1813],{"alt":522,"src":1814},"https:\u002F\u002Fi-blog.csdnimg.cn\u002Fblog_migrate\u002F08bfb8ee5c4b59ab48bcd3faf08f1f62.gif"," Margin可以使用负值，重叠的内容。",[49,1817,1819],{"id":1818},"margin-单边外边距属性","Margin - 单边外边距属性",[10,1821,1822],{},"在CSS中，它可以指定不同的侧面不同的边距：",[101,1824,1827],{"className":1825,"code":1826,"language":106},[104],"- margin-top:100px;\n- margin-bottom:100px;\n- margin-right:50px;\n- margin-left:50px;\n\n",[38,1828,1826],{"__ignoreMap":109},[10,1830,1831],{},"margin属性可以有一到四个值。",[57,1833,1834],{},[60,1835,1836],{},"margin:25px 50px 75px 100px;",[10,1838,1839],{},"上边距为25px",[10,1841,1842],{},"右边距为50px",[10,1844,1845],{},"下边距为75px",[10,1847,1848],{},"左边距为100px",[57,1850,1851],{},[60,1852,1853],{},"margin:25px 50px 75px;",[10,1855,1839],{},[10,1857,1858],{},"左右边距为50px",[10,1860,1845],{},[57,1862,1863],{},[60,1864,1865],{},"margin:25px 50px;",[10,1867,1868],{},"上下边距为25px",[10,1870,1858],{},[57,1872,1873],{},[60,1874,1875],{},"margin:25px;",[10,1877,1878],{},"所有的4个边距都是25px",[24,1880,1882],{"id":1881},"css-padding填充","CSS padding（填充）",[10,1884,1885],{},"CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。",[49,1887,1889],{"id":1888},"padding填充","padding（填充）",[10,1891,1892],{},"当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。",[10,1894,1895],{},"单独使用 padding 属性可以改变上下左右的填充。",[10,1897,1898],{},[30,1899],{"alt":522,"src":1900},"https:\u002F\u002Fi-blog.csdnimg.cn\u002Fblog_migrate\u002F1f79dd351e9c42571b1f91353f870e37.png",[10,1902,1903],{},"填充- 单边内边距属性",[10,1905,1906],{},"在CSS中，它可以指定不同的侧面不同的填充：",[101,1908,1911],{"className":1909,"code":1910,"language":106},[104],"padding-top:25px;\npadding-bottom:25px;\npadding-right:50px;\npadding-left:50px;\n",[38,1912,1910],{"__ignoreMap":109},[57,1914,1915,1918,1921,1924],{},[60,1916,1917],{},"上内边距是 25px",[60,1919,1920],{},"右内边距是 50px",[60,1922,1923],{},"下内边距是 25px",[60,1925,1926],{},"左内边距是 50px",[49,1928,1930],{"id":1929},"填充-简写属性","填充 - 简写属性",[10,1932,1933],{},"为了缩短代码，它可以在一个属性中指定的所有填充属性。",[10,1935,1936,1937,1940],{},"这就是所谓的简写属性。所有的填充属性的简写属性是 ",[38,1938,1939],{"code":1939},"padding"," :",[101,1942,1945],{"className":1943,"code":1944,"language":106},[104],"padding:25px 50px;\n",[38,1946,1944],{"__ignoreMap":109},[10,1948,1949],{},"Padding属性，可以有一到四个值。",[10,1951,1952],{},[186,1953,1954],{},"padding:25px 50px 75px 100px;",[57,1956,1957,1960,1963,1966],{},[60,1958,1959],{},"上填充为25px",[60,1961,1962],{},"右填充为50px",[60,1964,1965],{},"下填充为75px",[60,1967,1968],{},"左填充为100px",[10,1970,1971],{},[186,1972,1973],{},"padding:25px 50px 75px;",[57,1975,1976,1978,1981],{},[60,1977,1959],{},[60,1979,1980],{},"左右填充为50px",[60,1982,1965],{},[10,1984,1985],{},[186,1986,1987],{},"padding:25px 50px;",[57,1989,1990,1993],{},[60,1991,1992],{},"上下填充为25px",[60,1994,1980],{},[24,1996,1998,1999,2002,2003,2006],{"id":1997},"css-分组-和-嵌套-选择器","CSS ",[195,2000,2001],{},"分组"," 和 ",[195,2004,2005],{},"嵌套"," 选择器",[49,2008,2009],{"id":2009},"分组选择器",[10,2011,2012],{},"在样式表中有很多具有相同样式的元素。",[101,2014,2017],{"className":2015,"code":2016,"language":106},[104],"h1 {\n    color:green;\n}\nh2 {\n    color:green;\n}\np {\n    color:green;\n}\n",[38,2018,2016],{"__ignoreMap":109},[10,2020,2021],{},"为了尽量减少代码，你可以使用分组选择器。",[10,2023,2024],{},"每个选择器用逗号分隔。",[10,2026,2027],{},"在下面的例子中，我们对以上代码使用分组选择器：",[101,2029,2032],{"className":2030,"code":2031,"language":106},[104],"h1,h2,p\n{\n    color:green;\n}\n",[38,2033,2031],{"__ignoreMap":109},[49,2035,2036],{"id":2036},"嵌套选择器",[10,2038,2039],{},"它可能适用于选择器内部的选择器的样式。",[10,2041,2042],{},"在下面的例子设置了四个样式：",[57,2044,2045,2048,2051,2054],{},[60,2046,2047],{},"p{ }: 为所有 p 元素指定一个样式。",[60,2049,2050],{},".marked{ }: 为所有 class=\"marked\" 的元素指定一个样式。",[60,2052,2053],{},".marked p{ }: 为所有 class=\"marked\" 元素内的 p 元素指定一个样式。",[60,2055,2056],{},"p.marked{ }: 为所有 class=\"marked\" 的 p 元素指定一个样式。",[101,2058,2061],{"className":2059,"code":2060,"language":106},[104],"p\n{\n    color:blue;\n    text-align:center;\n}\n.marked\n{\n    background-color:red;\n}\n.marked p\n{\n    color:white;\n}\np.marked{\n    text-decoration:underline;\n}\n",[38,2062,2060],{"__ignoreMap":109},[24,2064,2066],{"id":2065},"css-display显示-与-visibility可见性","CSS Display(显示) 与 Visibility（可见性）",[10,2068,2069],{},"display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。",[49,2071,2073],{"id":2072},"隐藏元素-displaynone或visibilityhidden","隐藏元素 - display:none或visibility:hidden",[10,2075,2076],{},"隐藏一个元素可以通过把display属性设置为\"none\"，或把visibility属性设置为\"hidden\"。但是请注意，这两种方法会产生不同的结果。",[10,2078,2079],{},"visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。",[101,2081,2084],{"className":2082,"code":2083,"language":106},[104],"h1.hidden {visibility:hidden;}\n",[38,2085,2083],{"__ignoreMap":109},[10,2087,2088],{},"display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。",[101,2090,2093],{"className":2091,"code":2092,"language":106},[104],"h1.hidden {display:none;}\n",[38,2094,2092],{"__ignoreMap":109},[24,2096,2098],{"id":2097},"css-网页布局","CSS 网页布局",[49,2100,2101],{"id":2101},"网页布局",[10,2103,2104,2105],{},"网页布局有很多种方式，一般分为以下几个部分：",[186,2106,2107],{},"头部区域、菜单导航区域、内容区域、底部区域。",[10,2109,2110],{},[30,2111],{"alt":522,"src":2112},"https:\u002F\u002Fi-blog.csdnimg.cn\u002Fblog_migrate\u002F2fd65c514c329c6773b56c64bb067da5.jpeg",[49,2114,2115],{"id":2115},"头部区域",[10,2117,2118],{},"头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：",[101,2120,2123],{"className":2121,"code":2122,"language":106},[104],".header {\n  background-color: #F1F1F1;\n  text-align: center;\n  padding: 20px;\n}\n",[38,2124,2122],{"__ignoreMap":109},[49,2126,2127],{"id":2127},"菜单导航区域",[10,2129,2130],{},"菜单导航条包含了一些链接，可以引导用户浏览其他页面：",[101,2132,2135],{"className":2133,"code":2134,"language":106},[104],"\u002F* 导航条 *\u002F\n.topnav {\n  overflow: hidden;\n  background-color: #333;\n}\n \n\u002F* 导航链接 *\u002F\n.topnav a {\n  float: left;\n  display: block;\n  color: #f2f2f2;\n  text-align: center;\n  padding: 14px 16px;\n  text-decoration: none;\n}\n \n\u002F* 链接 - 修改颜色 *\u002F\n.topnav a:hover {\n  background-color: #ddd;\n  color: black;\n}\n",[38,2136,2134],{"__ignoreMap":109},[49,2138,2139],{"id":2139},"内容区域",[10,2141,2142],{},"内容区域一般有三种形式:",[10,2144,2145],{},"1 列：一般用于移动端",[10,2147,2148],{},"2 列：一般用于平板设备",[10,2150,2151],{},"3 列：一般用于 PC 桌面设备",[10,2153,2154],{},[30,2155],{"alt":522,"src":2156},"https:\u002F\u002Fi-blog.csdnimg.cn\u002Fblog_migrate\u002F6eb93ccfffac4ba91534886cfa8f255f.jpeg",[10,2158,2159],{},"我们将创建一个 3 列布局，在小的屏幕上将会变成 1 列布局（响应式）：",[101,2161,2164],{"className":2162,"code":2163,"language":106},[104],"\u002F* 创建三个相等的列 *\u002F\n.column {\n  float: left;\n  width: 33.33%;\n}\n \n\u002F* 列后清除浮动 *\u002F\n.row:after {\n  content: \"\";\n  display: table;\n  clear: both;\n}\n \n\u002F* 响应式布局 - 小于 600 px 时改为上下布局 *\u002F\n@media screen and (max-width: 600px) {\n  .column {\n    width: 100%;\n  }\n}\n",[38,2165,2163],{"__ignoreMap":109},[2167,2168,2169],"blockquote",{},[10,2170,2171],{},"提示:要设置两列可以设置 width 为 50%。创建 4 列可以设置为 25%。",[2167,2173,2174],{},[10,2175,2176],{},"提示:如果你想了解更多 @media 的规则可以查看 CSS3 多媒体查询。",[2167,2178,2179],{},[10,2180,2181],{},"提示: 现在更高级的方式是使用 CSS Flexbox 来创建列的布局，但 Internet Explorer 10 及更早的版本不支持该方式， IE6-10 可以使用浮动方式。",[10,2183,2184],{},"CSS Flexbox 的更多内容可以查看 CSS3 弹性盒子(Flex Box)。",[49,2186,2187],{"id":2187},"不相等的列",[10,2189,2190],{},"不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。",[101,2192,2195],{"className":2193,"code":2194,"language":106},[104],".column {\n  float: left;\n}\n \n\u002F* 左右侧栏的宽度 *\u002F\n.column.side {\n  width: 25%;\n}\n \n\u002F* 中间列宽度 *\u002F\n.column.middle {\n  width: 50%;\n}\n \n\u002F* 响应式布局 - 宽度小于600px时设置上下布局 *\u002F\n@media screen and (max-width: 600px) {\n  .column.side, .column.middle {\n    width: 100%;\n  }\n}\n",[38,2196,2194],{"__ignoreMap":109},[49,2198,2199],{"id":2199},"底部区域",[10,2201,2202],{},"底部区域在网页的最下方，一般包含版权信息和联系方式等。",[101,2204,2207],{"className":2205,"code":2206,"language":106},[104],".footer {\n  background-color: #F1F1F1;\n  text-align: center;\n  padding: 10px;\n}\n",[38,2208,2206],{"__ignoreMap":109},[49,2210,2211],{"id":2211},"响应式网页布局",[10,2213,2214],{},"通过以上等学习我们来创建一个响应式等页面，页面的布局会根据屏幕的大小来调整：",[101,2216,2219],{"className":2217,"code":2218,"language":106},[104],"* {\n  box-sizing: border-box;\n}\n \nbody {\n  font-family: Arial;\n  padding: 10px;\n  background: #f1f1f1;\n}\n \n\u002F* 头部标题 *\u002F\n.header {\n  padding: 30px;\n  text-align: center;\n  background: white;\n}\n \n.header h1 {\n  font-size: 50px;\n}\n \n\u002F* 导航条 *\u002F\n.topnav {\n  overflow: hidden;\n  background-color: #333;\n}\n \n\u002F* 导航条链接 *\u002F\n.topnav a {\n  float: left;\n  display: block;\n  color: #f2f2f2;\n  text-align: center;\n  padding: 14px 16px;\n  text-decoration: none;\n}\n \n\u002F* 链接颜色修改 *\u002F\n.topnav a:hover {\n  background-color: #ddd;\n  color: black;\n}\n \n\u002F* 创建两列 *\u002F\n\u002F* Left column *\u002F\n.leftcolumn {   \n  float: left;\n  width: 75%;\n}\n \n\u002F* 右侧栏 *\u002F\n.rightcolumn {\n  float: left;\n  width: 25%;\n  background-color: #f1f1f1;\n  padding-left: 20px;\n}\n \n\u002F* 图像部分 *\u002F\n.fakeimg {\n  background-color: #aaa;\n  width: 100%;\n  padding: 20px;\n}\n \n\u002F* 文章卡片效果 *\u002F\n.card {\n  background-color: white;\n  padding: 20px;\n  margin-top: 20px;\n}\n \n\u002F* 列后面清除浮动 *\u002F\n.row:after {\n  content: \"\";\n  display: table;\n  clear: both;\n}\n \n\u002F* 底部 *\u002F\n.footer {\n  padding: 20px;\n  text-align: center;\n  background: #ddd;\n  margin-top: 20px;\n}\n \n\u002F* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 *\u002F\n@media screen and (max-width: 800px) {\n  .leftcolumn, .rightcolumn {   \n    width: 100%;\n    padding: 0;\n  }\n}\n \n\u002F* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 *\u002F\n@media screen and (max-width: 400px) {\n  .topnav a {\n    float: none;\n    width: 100%;\n  }\n}\n",[38,2220,2218],{"__ignoreMap":109},[24,2222,2224],{"id":2223},"css-总结","CSS 总结",[10,2226,2227],{},"本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。",[10,2229,2230],{},"你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。",[10,2232,2233],{},"同时，你也学会了如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后，以及向某些选择器添加特殊的效果，比如链接。",[49,2235,2237],{"id":2236},"你已经学习了css下一步学习什么呢","你已经学习了CSS,下一步学习什么呢?",[10,2239,2240],{},"下一步应该学习 JavaScript 。",[10,2242,2243],{},"JavaScript 是最流行的语言之一。",[10,2245,2246],{},"JavaScript 属于 web 语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。",[10,2248,2249],{},"JavaScript可以使您的网站更具活力。",[10,2251,2252,2253,2256,2257,2260,2261,2264],{},"许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有",[1226,2254,2255],{},"非常简单的","语法。几乎每个人都",[1226,2258,2259],{},"没","有能力将",[1226,2262,2263],{},"小","的 JavaScript 片段添加到网页中。",[10,2266,2267],{},[1226,2268,2269],{},"其实我连JS都不会",{"title":109,"searchDepth":2271,"depth":2271,"links":2272},4,[2273,2275,2276,2277,2278,2279,2280,2281,2282,2283,2284,2285,2286,2287,2288,2289,2290,2291,2292,2293,2294,2295,2296,2297,2298,2299,2322],{"id":51,"depth":2274,"text":52},3,{"id":87,"depth":2274,"text":88},{"id":155,"depth":2274,"text":156},{"id":165,"depth":2274,"text":166},{"id":200,"depth":2274,"text":201},{"id":264,"depth":2274,"text":264},{"id":303,"depth":2274,"text":303},{"id":319,"depth":2274,"text":319},{"id":334,"depth":2274,"text":334},{"id":370,"depth":2274,"text":370},{"id":435,"depth":2274,"text":435},{"id":473,"depth":2274,"text":473},{"id":491,"depth":2274,"text":492},{"id":516,"depth":2274,"text":517},{"id":548,"depth":2274,"text":549},{"id":585,"depth":2274,"text":585},{"id":655,"depth":2274,"text":655},{"id":690,"depth":2274,"text":690},{"id":708,"depth":2274,"text":708},{"id":738,"depth":2274,"text":738},{"id":753,"depth":2274,"text":753},{"id":765,"depth":2274,"text":766},{"id":893,"depth":2274,"text":893},{"id":931,"depth":2274,"text":931},{"id":1002,"depth":2274,"text":1002},{"id":1029,"depth":2300,"text":1029,"children":2301},2,[2302,2303,2304,2305,2306,2307,2308,2309,2310,2311,2312,2313,2314,2315,2316,2317,2318,2319,2320,2321],{"id":1097,"depth":2274,"text":1097},{"id":1140,"depth":2274,"text":1140},{"id":1149,"depth":2274,"text":708},{"id":1161,"depth":2274,"text":435},{"id":1191,"depth":2274,"text":1191},{"id":1244,"depth":2274,"text":1244},{"id":1265,"depth":2274,"text":1265},{"id":1353,"depth":2274,"text":1353},{"id":1374,"depth":2274,"text":1374},{"id":1386,"depth":2274,"text":1386},{"id":1401,"depth":2274,"text":1401},{"id":1425,"depth":2274,"text":1425},{"id":1441,"depth":2274,"text":1442},{"id":1482,"depth":2274,"text":1482},{"id":1530,"depth":2274,"text":1530},{"id":1553,"depth":2274,"text":1554},{"id":1572,"depth":2274,"text":1573},{"id":1603,"depth":2274,"text":1603},{"id":1621,"depth":2274,"text":1621},{"id":1648,"depth":2274,"text":1648},{"id":1718,"depth":2300,"text":1718,"children":2323},[2324,2325,2326,2327,2328,2329,2330,2331,2332,2333,2334,2335,2336,2337,2338,2339],{"id":1758,"depth":2274,"text":1758},{"id":1772,"depth":2274,"text":1772},{"id":1818,"depth":2274,"text":1819},{"id":1888,"depth":2274,"text":1889},{"id":1929,"depth":2274,"text":1930},{"id":2009,"depth":2274,"text":2009},{"id":2036,"depth":2274,"text":2036},{"id":2072,"depth":2274,"text":2073},{"id":2101,"depth":2274,"text":2101},{"id":2115,"depth":2274,"text":2115},{"id":2127,"depth":2274,"text":2127},{"id":2139,"depth":2274,"text":2139},{"id":2187,"depth":2274,"text":2187},{"id":2199,"depth":2274,"text":2199},{"id":2211,"depth":2274,"text":2211},{"id":2236,"depth":2274,"text":2237},[2341],"开发","2024-08-31 21:01:00","本文是一篇CSS入门教程，系统介绍了层叠样式表的基础知识。首先阐明CSS用于为HTML文档添加样式、实现内容与表现分离，并提高工作效率。语法部分说明声明以分号结束、大括号包裹，支持\u002F \u002F注释。选择器方面，id以定义且建议……",false,"md",null,{"slots":2348},{},true,"\u002Fpost\u002Fhtml-css-quick-start",{"text":2352,"minutes":2353,"time":2354,"words":2355},"40 min read",39.25,2355000,7850,{"title":2357,"description":2343},[5],{"loc":2350,"images":2359},[2360,2361,2362,2363,2364,2365,2366,2367,2368,2369,2370,2371,2372,2373,2374],{"loc":33},{"loc":523},{"loc":686},{"loc":734},{"loc":898},{"loc":903},{"loc":1083},{"loc":1459},{"loc":1568},{"loc":1748},{"loc":1769},{"loc":1814},{"loc":1900},{"loc":2112},{"loc":2156},"post\u002Fhtml-css-quick-start",[],"tech","2026-08-01 23:28:39","EEFh55Okt5CvC7nieK0DKx1J5DsWxK74RRcBKjLWu3E",[2381,2386],{"title":2382,"path":2383,"stem":2384,"date":2385,"type":2377,"children":-1},"HTML基础教程","\u002Fpost\u002Fhtml-quick-start","post\u002Fhtml-quick-start","2024-08-31 20:57:00",{"title":2387,"path":2388,"stem":2389,"date":2390,"type":2377,"children":-1},"Python基础教程1","\u002Fpost\u002Fpython-1","post\u002Fpython-1","2024-08-31 21:04:00",1793526966716]