浏览器在将资源加载下来之后，则开始将资源进行解析和渲染。对于chromium来讲，它对网页有个默认的CSS，或者说缺省CSS。
一. 缺省样式表的形成
这些CSS有哪几个呢？我们来看看blink中文件：CSSDefaultStyleSheets.h
在这个文件中定义了几个成员变量：
OwnPtrWillBeMember<RuleSet> m_defaultStyle;OwnPtrWillBeMember<RuleSet> m_defaultViewportStyle;OwnPtrWillBeMember<RuleSet> m_defaultQuirksStyle;OwnPtrWillBeMember<RuleSet> m_defaultPrintStyle;OwnPtrWillBeMember<RuleSet> m_defaultViewSourceStyle;OwnPtrWillBeMember<RuleSet> m_defaultXHTMLMobileProfileStyle;OwnPtrWillBeMember<RuleSet> m_defaultTransitionStyle;RefPtrWillBeMember<StyleSheetContents> m_defaultStyleSheet;RefPtrWillBeMember<StyleSheetContents> m_viewportStyleSheet;RefPtrWillBeMember<StyleSheetContents> m_quirksStyleSheet;RefPtrWillBeMember<StyleSheetContents> m_svgStyleSheet;RefPtrWillBeMember<StyleSheetContents> m_mathmlStyleSheet;RefPtrWillBeMember<StyleSheetContents> m_mediaControlsStyleSheet;RefPtrWillBeMember<StyleSheetContents> m_fullscreenStyleSheet;从名字中，我们也大体也能知道其是作用于什么场景或者功能的。
这里，我们来看看m_defaultStyleSheet，这个样式表关系着整个网页的显示风格。
1. 我们来看看这个变量的初始化。
在类CSSDefaultStyleSheets的构造函数中，有代码段：
String defaultRules = String(htmlCss, sizeof(htmlCss)) + RenderTheme::theme().extraDefaultStyleSheet();m_defaultStyleSheet = parseUASheet(defaultRules);m_defaultStyle->addRulesFromSheet(defaultStyleSheet(), screenEval());2. 我们来分析下上面代码段中defaultRules的构成。
其由两部分构成：String(htmlCss, sizeof(htmlCss)) 和 RenderTheme::theme().extraDefaultStyleSheet()3. 我们先来看看第一部分：String(htmlCss, sizeof(htmlCss)) 这里有个变量是htmlCss，这个变量定义在文件：UserAgentStyleSheets.h
这个文件是在out目录下，编译过程中形成的。
我们接着看看这个文件的形成。
先看看文件：core_generated.gyp
其中有代码段：
{'action_name': 'UserAgentStyleSheets','variables': {'scripts': ['../build/scripts/make-file-arrays.py',],'stylesheets': ['css/html.css','css/quirks.css','css/view-source.css','css/themeChromium.css','css/themeChromiumAndroid.css','css/themeChromiumLinux.css','css/themeChromiumSkia.css','css/themeInputMultipleFields.css','css/themeMac.css','css/themeWin.css','css/themeWinQuirks.css','css/svg.css','css/navigationTransitions.css','css/mathml.css','css/mediaControls.css','css/mediaControlsAndroid.css','css/fullscreen.css','css/xhtmlmp.css','css/viewportAndroid.css',],},'inputs': ['<@(scripts)','<@(stylesheets)'],'outputs': ['<(blink_core_output_dir)/UserAgentStyleSheets.h','<(blink_core_output_dir)/UserAgentStyleSheetsData.cpp',],'action': ['python','<@(scripts)','–namespace','blink','–out-h=<(blink_core_output_dir)/UserAgentStyleSheets.h','–out-cpp=<(blink_core_output_dir)/UserAgentStyleSheetsData.cpp','<@(stylesheets)',],}, 通过这段python代码我们知道，UserAgentStyleSheetsData.cpp和其头文件是通过该段编译脚本形成。我们要找的htmlCSS与这里面的文件：html.css有关系。其他的css与其他的样式表有关。
感兴趣的同学可以看看html.css内容。
4. 我们来看看第二部分：RenderTheme::theme().extraDefaultStyleSheet()
这个方法在文件RenderTheme.cpp中：
String RenderTheme::extraDefaultStyleSheet(){StringBuilder runtimeCSS;if (RuntimeEnabledFeatures::dialogElementEnabled()) {runtimeCSS.appendLiteral("dialog:not([open]) { display: none; }");runtimeCSS.appendLiteral("dialog { position: absolute; left: 0; right: 0; width: -webkit-fit-content; height: -webkit-fit-content; margin: auto; border: solid; padding: 1em; background: white; color: black;}");runtimeCSS.appendLiteral("dialog::backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.1); }");}if (RuntimeEnabledFeatures::contextMenuEnabled()) {runtimeCSS.appendLiteral("menu[type=\&;popup\&; i] { display: none; }");}return runtimeCSS.toString();}
这个缺省样式表，这里介绍了它的组成，，有兴趣的同学可以继续研究下。通过缺省样式表的更改，可以做好多事。
接下来我们来看看这个缺省样式表的创建逻辑。
二. 缺省样式表的创建逻辑
我们从DocumentLoader::finishedLoading方法来看起。
方法DocumentLoader::finishedLoading，会调用同文件中方法：DocumentLoader::endWriting
从该方法开始的调用堆栈如下：
有勇气并不表示恐惧不存在，而是敢面对恐惧、克服恐惧
