【Web前端】 CSS简介(上)

简介: CSS 的主要使用场景就是美化网页,布局页面。

1、CSS简介


CSS 的主要使用场景就是美化网页,布局页面。

(1)HTML的局限性

他只关注内容的语义。 比如

表明这是一个大标题,

表明这是一个段落, 表明这儿有一个图片, 表示此处有链接。

HTML 可以做简单的样式,但是很臃肿和繁琐……


(2)CSS美化网页

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.

有时我们也会称之为 CSS 样式表或级联样式表。

CSS 是也是一种标记语言,主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。

CSS 让我们的网页更加丰富多彩,布局更加灵活自如。

简单理解:CSS 可以美化 HTML , 让 HTML 更漂亮,让页面布局更简单 (由 HTML 专注去做结构呈现,样式交给 CSS,即结构 ( HTML ) 与样式( CSS ) 相分离)


(3)CSS 语法规范

CSS 规则由两个主要的部分构成:选择器以及一条或多条声明。

选择器是用于指定 CSS 样式的 HTML 标签,花括号内是对该对象设置的具体样式

属性和属性值以“键值对”的形式出现

属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等

属性和属性值之间用英文“:”分开

多个“键值对”之间用英文“;”进行区分

所有的样式,都包含在  标签内,表示是样式表。<style> 一般写到 </head> 上方。</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Chead%3E%5Cn%20%3Cstyle%3E%5Cn%20%20%20h4%20%7B%5Cn%20%20%20%20%20%20color%3A%20blue%3B%5Cn%20%20%20%20%20%20font-size%3A%20100px%3B%5Cn%20%20%20%7D%5Cn%20%3C%2Fstyle%3E%5Cn%3C%2Fhead%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22r4JFU%22%7D"></div><div><br /></div><div>(4)CSS 代码风格</div><div>1)样式格式书写</div><div>紧凑格式:</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22h3%20%7B%20color%3A%20deeppink%3Bfont-size%3A%2020px%3B%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22aIFg9%22%7D"></div><div>展开格式:(推荐:更直观)</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22h3%20%7B%5Cn%20color%3A%20pink%3B%5Cn%20font-size%3A%2020px%3B%20%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22BY53h%22%7D"></div><div><br /></div><div>2)样式大小写(推荐样式选择器,属性名,属性值关键字全部使用小写字母)</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22h3%20%7B%20color%3A%20pink%3B%20%7D%5CnH3%20%7B%20COLOR%3A%20PINK%3B%20%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22luphH%22%7D"></div><div><br /></div><div>3)空格规范</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22h3%20%7B%5Cn%20color%3A%20pink%3B%20%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22VYPxP%22%7D"></div><div>属性值前面,冒号后面,保留一个空格</div><div>选择器(标签)和大括号中间保留空格</div><div><br /></div><h1 id="wndNk">2、CSS 基础选择器</h1><div data-card-type="block" data-ready-card="hr"></div><div>(1)CSS 选择器的作用</div><div>选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说,就是选择标签用的。</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22h1%20%7B%20color%3A%20deeppink%3Bfont-size%3A%2020px%3B%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22p68Y8%22%7D"></div><div>h1就是选择器</div><div>color为属性,deeppink为值</div><div>(2)选择器分类</div><div>选择器分为基础选择器和复合选择器两个大类(这里学习基础选择器)</div><div>基础选择器是由单个选择器组成的</div><div>基础选择器又包括:标签选择器、类选择器、id 选择器和通配符选择器</div><div>(3)标签选择器</div><div>标签选择器(元素选择器)是指用HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS 样式。</div><div><br /></div><div>语法:</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%E6%A0%87%E7%AD%BE%E5%90%8D%20%7B%5Cn%20%E5%B1%9E%E6%80%A71%3A%20%E5%B1%9E%E6%80%A7%E5%80%BC1%3B%20%5Cn%20%E5%B1%9E%E6%80%A72%3A%20%E5%B1%9E%E6%80%A7%E5%80%BC2%3B%20%5Cn%20%E5%B1%9E%E6%80%A73%3A%20%E5%B1%9E%E6%80%A7%E5%80%BC3%3B%20%5Cn%20...%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22ILGFS%22%7D"></div><div>作用:标签选择器可以把某一类标签全部选择出来,比如所有的<div> 标签和所有的 <span> 标签。</div><div>优点:能快速为页面中同类型的标签统一设置样式。</div><div>缺点:不能设计差异化样式,只能选择全部的当前标签。</div><div><br /></div><div>(4)类选择器</div><div>如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器</div><div><br /></div><div>语法:</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.%E7%B1%BB%E5%90%8D%20%7B%5Cn%20%E5%B1%9E%E6%80%A71%3A%20%E5%B1%9E%E6%80%A7%E5%80%BC1%3B%20%5Cn%20...%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22YLN1j%22%7D"></div><div><br /></div><div>如:将所有拥有 red 类的 HTML 元素均为红色。</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.red%20%7B%5Cn%20color%3A%20red%3B%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22czNt1%22%7D"></div><div><br /></div><div>结构需要用class属性来调用class 类的意思</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cdiv%20class%3D%5C%22red%5C%22%3E%20%E5%8F%98%E7%BA%A2%E8%89%B2%20%3C%2Fdiv%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%220pBra%22%7D"></div><div><br /></div><div>类选择器在 HTML 中以 class 属性表示,在 CSS 中,类选择器以一个点“.”号显示</div><div><br /></div><div>类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。</div><div>可以理解为给这个标签起了一个名字,来表示。</div><div>长名称或词组可以使用中横线来为选择器命名。</div><div>不要使用纯数字、中文等命名,尽量使用英文字母来表示。</div><div>命名要有意义,尽量使别人一眼就知道这个类名的目的。</div><div>案例:利用类选择器画三个盒子</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en%5C%22%3E%5Cn%3Chead%3E%5Cn%20%20%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1.0%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20http-equiv%3D%5C%22X-UA-Compatible%5C%22%20content%3D%5C%22ie%3Dedge%5C%22%3E%5Cn%20%20%20%20%3Ctitle%3E%E5%88%A9%E7%94%A8%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8%E7%94%BB%E4%B8%89%E4%B8%AA%E7%9B%92%E5%AD%90%3C%2Ftitle%3E%5Cn%20%20%20%20%3Cstyle%3E%5Cn%20%20%20%20%20%20%20%20.red%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100px%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20100px%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F*%20%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2%20*%2F%5Cn%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20red%3B%5Cn%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20.green%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100px%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20100px%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20green%3B%5Cn%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%3C%2Fstyle%3E%5Cn%3C%2Fhead%3E%5Cn%3Cbody%3E%5Cn%20%20%20%20%3Cdiv%20class%3D%5C%22red%5C%22%3E%E7%BA%A2%E8%89%B2%3C%2Fdiv%3E%5Cn%20%20%20%20%3Cdiv%20class%3D%5C%22green%5C%22%3E%E7%BB%BF%E8%89%B2%3C%2Fdiv%3E%5Cn%20%20%20%20%3Cdiv%20class%3D%5C%22red%5C%22%3E%E7%BA%A2%E8%89%B2%3C%2Fdiv%3E%5Cn%3C%2Fbody%3E%5Cn%3C%2Fhtml%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22rUHNk%22%7D"></div><div><br /></div><div>效果展示</div><div>1)多类名使用方式</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cdiv%20class%3D%5C%22red%20font20%5C%22%3E%E4%BA%AE%E7%82%B9%3C%2Fdiv%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22PdSmG%22%7D"></div><div>在标签class 属性中写多个类名</div><div>多个类名中间必须用空格分开</div><div>这个标签就可以分别具有这些类名的样式</div><div><br /></div><div>2)多类名开发中使用场景</div><div>可以把一些标签元素相同的样式(共同的部分)放到一个类里面.</div><div>这些标签都可以调用这个公共的类,然后再调用自己独有的类.</div><div>从而节省CSS代码,统一修改也非常方便</div><div><br /></div><div>(5)id 选择器</div><div>id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。</div><div>HTML 元素以 id 属性 来设置 id 选择器,CSS 中 id 选择器以“#" 来定义。</div><div>语法:</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%23id%E5%90%8D%20%7B%5Cn%20%E5%B1%9E%E6%80%A71%3A%20%E5%B1%9E%E6%80%A7%E5%80%BC1%3B%20%5Cn%20...%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22nHMAr%22%7D"></div><div><br /></div><div>示例:</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en%5C%22%3E%5Cn%3Chead%3E%5Cn%20%20%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1.0%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20http-equiv%3D%5C%22X-UA-Compatible%5C%22%20content%3D%5C%22ie%3Dedge%5C%22%3E%5Cn%20%20%20%20%3Ctitle%3Eid%E9%80%89%E6%8B%A9%E5%99%A8%3C%2Ftitle%3E%5Cn%20%20%20%20%3Cstyle%3E%5Cn%20%20%20%20%20%20%20%20%2F*%20id%E9%80%89%E6%8B%A9%E5%99%A8%E7%9A%84%E5%8F%A3%E8%AF%80%3A%20%E6%A0%B7%E5%BC%8F%23%E5%AE%9A%E4%B9%89%2C%20%E7%BB%93%E6%9E%84id%E8%B0%83%E7%94%A8%2C%20%E5%8F%AA%E8%83%BD%E8%B0%83%E7%94%A8%E4%B8%80%E6%AC%A1%2C%20%E5%88%AB%E4%BA%BA%E5%88%87%E5%8B%BF%E4%BD%BF%E7%94%A8%20*%2F%5Cn%20%20%20%20%20%20%23pink%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20color%3A%20pink%3B%5Cn%20%20%20%20%20%20%7D%5Cn%20%20%20%5Cn%20%20%20%20%3C%2Fstyle%3E%5Cn%3C%2Fhead%3E%5Cn%3Cbody%3E%5Cn%20%20%20%20%3Cdiv%20id%3D%5C%22pink%5C%22%3E%E8%BF%88%E5%85%8B%E5%B0%94%C2%B7%E6%9D%B0%E5%85%8B%E9%80%8A%3C%2Fdiv%3E%5Cn%3C%2Fbody%3E%5Cn%3C%2Fhtml%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22BbFQX%22%7D"></div><div><br /></div><div>(6)通配符选择器</div><div>在 CSS 中,通配符选择器使用“*”定义,它表示选取页面中所有元素(标签)。</div><div><br /></div><div>语法:</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22*%20%7B%5Cn%20%E5%B1%9E%E6%80%A71%3A%20%E5%B1%9E%E6%80%A7%E5%80%BC1%3B%20%5Cn%20...%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22UETOJ%22%7D"></div><div><br /></div><div>通配符选择器不需要调用, 自动就给所有的元素使用样式</div><div>特殊情况才使用</div><div>示例:清除所有的元素标签的内外边距</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22*%20%7B%5Cn%20margin%3A%200%3B%5Cn%20padding%3A%200%3B%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22TtSSu%22%7D"></div><div><br /></div><h1 id="3uEER">3、CSS 字体属性</h1><div data-card-type="block" data-ready-card="hr"></div><div>CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。</div><div><br /></div><div>(1)字体系列</div><div>CSS 使用 font-family 属性定义文本的字体系列。</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22p%20%7B%20font-family%3A%5C%22%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91%5C%22%3B%7D%20%5Cndiv%20%7Bfont-family%3A%20Arial%2C%5C%22Microsoft%20Yahei%5C%22%2C%20%5C%22%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91%5C%22%3B%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22BhT9E%22%7D"></div><div>各种字体之间必须使用英文状态下的逗号隔开</div><div>一般情况下,如果有空格隔开的多个单词组成的字体,加引号.</div><div>尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示</div><div>最常见的几个字体:body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }</div><div><br /></div><div>(2)字体大小</div><div>CSS 使用 font-size 属性定义字体大小。</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22p%20%7B%20%5Cn%20font-size%3A%2020px%3B%20%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22jRRF0%22%7D"></div><div>px(像素)大小是我们网页的最常用的单位</div><div>谷歌浏览器默认的文字大小为16px</div><div>不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小</div><div>可以给 body 指定整个页面文字的大小</div><div><br /></div><div>(3)字体粗细</div><div>CSS 使用 font-weight 属性设置文本字体的粗细。</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22p%20%7B%20%5Cn%20font-weight%3A%20bold%3B%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22fWXXa%22%7D"></div><div>学会让加粗标签(比如 h 和 strong 等) 不加粗,或者其他标签加粗</div><div>实际开发时,我们更喜欢用数字表示粗细</div><div><br /></div><div>(4) 文字样式</div><div>CSS 使用 font-style 属性设置文本的风格。</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22p%20%7B%20%5Cn%20font-style%3A%20normal%3B%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22oHQzp%22%7D"></div><div>注意: 平时我们很少给文字加斜体,反而要给斜体标签(em,i)改为不倾斜字体。</div><div><br /></div><div>(5)字体复合属性</div><div>字体属性可以把以上文字样式综合来写, 这样可以更节约代码:。</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22body%20%7B%20%5Cn%20font%3A%20font-style%20font-weight%20font-size%2Fline-height%20font-family%3B%20%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%226dRvP%22%7D"></div><div>使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开</div><div>不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用</div><div>示例:</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en%5C%22%3E%5Cn%3Chead%3E%5Cn%20%20%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1.0%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20http-equiv%3D%5C%22X-UA-Compatible%5C%22%20content%3D%5C%22ie%3Dedge%5C%22%3E%5Cn%20%20%20%20%3Ctitle%3ECSS%E5%AD%97%E4%BD%93%E5%B1%9E%E6%80%A7%E4%B9%8B%E5%A4%8D%E5%90%88%E5%B1%9E%E6%80%A7%3C%2Ftitle%3E%5Cn%20%20%20%20%3Cstyle%3E%5Cn%20%20%20%20%20%20%20%2F*%20%E6%83%B3%E8%A6%81div%E6%96%87%E5%AD%97%E5%8F%98%E5%80%BE%E6%96%9C%20%E5%8A%A0%E7%B2%97%20%E5%AD%97%E5%8F%B7%E8%AE%BE%E7%BD%AE%E4%B8%BA16%E5%83%8F%E7%B4%A0%20%E5%B9%B6%E4%B8%94%20%E6%98%AF%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91%20*%2F%5Cn%20%20%20%20%20%20%20div%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%2F*%20font-style%3A%20italic%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20700%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2016px%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20'Microsoft%20yahei'%3B%20*%2F%5Cn%20%20%20%20%20%20%20%20%20%20%20%2F*%20%E5%A4%8D%E5%90%88%E5%B1%9E%E6%80%A7%3A%20%E7%AE%80%E5%86%99%E7%9A%84%E6%96%B9%E5%BC%8F%20%20%E8%8A%82%E7%BA%A6%E4%BB%A3%E7%A0%81%20*%2F%5Cn%20%20%20%20%20%20%20%20%20%20%20%2F*%20font%3A%20font-style%20%20font-weight%20%20font-size%2Fline-height%20%20font-family%3B%20*%2F%5Cn%20%20%20%20%20%20%20%20%20%20%20%2F*%20font%3A%20italic%20700%2016px%20'Microsoft%20yahei'%3B%20*%2F%5Cn%20%20%20%20%20%20%20%20%20%20%20font%3A%2020px%20'%E9%BB%91%E4%BD%93'%3B%5Cn%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%3C%2Fstyle%3E%5Cn%3C%2Fhead%3E%5Cn%3Cbody%3E%5Cn%20%20%20%3Cdiv%3E%E4%B8%89%E7%94%9F%E4%B8%89%E4%B8%96%E5%8D%81%E9%87%8C%E6%A1%83%E8%8A%B1%2C%E4%B8%80%E5%BF%83%E4%B8%80%E6%84%8F%E7%99%BE%E8%A1%8C%E4%BB%A3%E7%A0%81%3C%2Fdiv%3E%5Cn%3C%2Fbody%3E%5Cn%3C%2Fhtml%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22LQbew%22%7D"></div><div><br /></div><h1 id="jv78K">4、CSS 文本属性</h1><div data-card-type="block" data-ready-card="hr"></div><div>CSS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。</div><div>(1)文本颜色</div><div>color 属性用于定义文本的颜色</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22div%20%7B%20%5Cn%20color%3A%20red%3B%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22AeH3M%22%7D"></div><div>开发中常用十六进制表示</div><div><br /></div><div>(2)对齐文本</div><div>text-align 属性用于设置元素内文本内容的水平对齐方式</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22div%20%7B%20%5Cn%20text-align%3A%20center%3B%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22Dfywr%22%7D"></div><div><br /></div><div>(3) 装饰文本</div><div>text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22div%20%7B%20%5Cn%20text-decoration%EF%BC%9Aunderline%EF%BC%9B%20%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22WBOai%22%7D"></div><div><br /></div><div>(4)文本缩进</div><div>text-indent 属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22div%20%7B%20%5Cn%20text-indent%3A%2010px%3B%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22OGbXs%22%7D"></div><div><br /></div><div>通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22p%20%7B%20%5Cn%20text-indent%3A%202em%3B%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22SKka5%22%7D"></div><div><br /></div><div>em 是一个相对单位,就是当前元素(font-size) 1 个文字的大小, 如果当前元素没有设置大小,则会按照父元</div><div>素的 1 个文字大小</div><div><br /></div><div>(5)行间距</div><div>line-height 属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22p%20%7B%20%5Cn%20line-height%3A%2026px%3B%5Cn%7D%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22R3GcH%22%7D"></div><div><br /></div><div>示例:</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en%5C%22%3E%5Cn%3Chead%3E%5Cn%20%20%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1.0%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20http-equiv%3D%5C%22X-UA-Compatible%5C%22%20content%3D%5C%22ie%3Dedge%5C%22%3E%5Cn%20%20%20%20%3Ctitle%3ECSS%E6%96%87%E6%9C%AC%E5%A4%96%E8%A7%82%E4%B9%8B%E8%A1%8C%E9%97%B4%E8%B7%9D%3C%2Ftitle%3E%5Cn%20%20%20%20%3Cstyle%3E%5Cn%20%20%20%20%20%20%20div%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20line-height%3A%2026px%3B%5Cn%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20p%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20line-height%3A%2025px%3B%5Cn%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%3C%2Fstyle%3E%5Cn%3C%2Fhead%3E%5Cn%3Cbody%3E%5Cn%20%20%20%20%3Cdiv%3E%E4%B8%AD%E5%9B%BD%E4%BA%BA%3C%2Fdiv%3E%5Cn%20%20%20%20%20%20%20%3Cp%3E%E6%89%93%E5%BC%80%E5%8C%97%E4%BA%AC%E3%80%81%E4%B8%8A%E6%B5%B7%E4%B8%8E%E5%B9%BF%E5%B7%9E%E7%9A%84%E5%9C%B0%E9%93%81%E5%9C%B0%E5%9B%BE%EF%BC%8C%E4%BD%A0%E4%BC%9A%E7%9C%8B%E8%A7%81%E4%B8%89%E5%BC%A0%E7%BA%B5%E6%A8%AA%E4%BA%A4%E9%94%99%E7%9A%84%E7%BA%BF%E8%B7%AF%E7%BD%91%E7%BB%9C%EF%BC%8C%E8%BF%99%E4%BB%A3%E8%A1%A8%E4%BA%86%E4%B8%AD%E5%9B%BD%E6%9C%80%E6%88%90%E7%86%9F%E7%9A%84%E4%B8%89%E5%A5%97%E5%9F%8E%E5%B8%82%E8%BD%A8%E9%81%93%E4%BA%A4%E9%80%9A%E7%B3%BB%E7%BB%9F%E3%80%82%3C%2Fp%3E%5Cn%20%20%20%20%20%20%20%3Cp%3E%20%E5%8F%AF%E5%8D%B3%E4%BD%BF%E8%BF%99%E6%A0%B7%EF%BC%8C%E5%9C%A8%E5%8C%97%E4%B8%8A%E5%B9%BF%E7%94%9F%E6%B4%BB%E7%9A%84%E4%BA%BA%E4%BE%9D%E7%84%B6%E5%B0%91%E4%B8%8D%E4%BA%86%E5%AF%B9%E5%9C%B0%E9%93%81%E7%9A%84%E6%8A%B1%E6%80%A8%EF%BC%8C%E5%85%B6%E4%B8%AD%E8%B0%88%E5%8F%8A%E6%9C%80%E5%A4%9A%E7%9A%84%E9%97%AE%E9%A2%98%E4%BE%BF%E6%98%AF%E6%8B%A5%E6%8C%A4%E2%80%94%E2%80%94%E5%AF%B9%E5%BE%88%E5%A4%9A%E4%BA%BA%E8%80%8C%E8%A8%80%EF%BC%8C%E6%AF%8F%E6%AC%A1%E6%8C%A4%E5%9C%B0%E9%93%81%E7%9A%84%E8%BF%87%E7%A8%8B%EF%BC%8C%E9%83%BD%E5%83%8F%E6%98%AF%E4%B8%80%E5%9C%BA%E7%A1%AC%E4%BB%97%E3%80%82%E6%9B%B4%E4%BD%95%E5%86%B5%EF%BC%8C%E8%BF%98%E9%83%BD%E6%98%AF%E8%B4%A5%E4%BB%97%E5%B1%85%E5%A4%9A%E3%80%82%3C%2Fp%3E%5Cn%20%20%20%20%20%20%20%5Cn%20%20%20%20%20%20%20%3Cp%3E%20%E9%82%A3%E4%B9%88%EF%BC%8C%E5%BD%93%E8%B6%8A%E6%9D%A5%E8%B6%8A%E5%A4%9A%E7%9A%84%E4%BA%8C%E7%BA%BF%E7%94%9A%E8%87%B3%E4%B8%89%E7%BA%BF%E5%9F%8E%E5%B8%82%E8%BF%8E%E6%8E%A5%E6%9D%A5%E4%BA%86%E8%87%AA%E5%B7%B1%E7%9A%84%E5%9C%B0%E9%93%81%EF%BC%8C%E4%B8%AD%E5%9B%BD%E5%93%AA%E9%87%8C%E7%9A%84%E5%9C%B0%E9%93%81%E6%98%AF%E6%9C%80%E6%8B%A5%E6%8C%A4%E7%9A%84%E5%91%A2%EF%BC%9F%3C%2Fp%3E%5Cn%3C%2Fbody%3E%5Cn%3C%2Fhtml%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%2246xFP%22%7D"></div><div><br /></div><h1 id="vNPtD">5、CSS 的引入方式</h1><div data-card-type="block" data-ready-card="hr"></div><div>按照 CSS 样式书写的位置(或者引入的方式),CSS 样式表可以分为三大类:行内样式表(行内式), 内部样式表(嵌入式), 外部样式表(链接式)</div><div>(1)行内样式表</div><div>行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cdiv%20style%3D%5C%22color%3A%20red%3B%20font-size%3A%2012px%3B%5C%22%3E%5Cn%20%20%E9%9D%92%E6%98%A5%E4%B8%8D%E5%B8%B8%E5%9C%A8%5Cn%3C%2Fdiv%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%225HrnZ%22%7D"></div><div><br /></div><div>style 其实就是标签的属性</div><div>在双引号中间,写法要符合 CSS 规范</div><div>可以控制当前的标签设置样式</div><div>由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用</div><div>使用行内样式表设定 CSS,通常也被称为行内式引入</div><div><br /></div><div>(2)内部样式表</div><div>内部样式表(内嵌样式表)是写到html页面内部. 是将所有的 CSS 代码抽取出来,单独放到一个 <style> 标签中</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cstyle%3E%5Cn%20div%20%7B%5Cn%20%20%20color%3A%20red%3B%5Cn%20%20%20font-size%3A%2012px%3B%5Cn%20%7D%5Cn%3C%2Fstyle%3E%60%E5%9C%A8%E8%BF%99%E9%87%8C%E6%8F%92%E5%85%A5%E4%BB%A3%E7%A0%81%E7%89%87%60%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22RNUAJ%22%7D"></div><div><br /></div><div><style> 标签理论上可以放在 HTML 文档的任何地方,但一般会放在文档的<head>标签中</div><div>通过此种方式,可以方便控制当前整个页面中的元素样式设置</div><div>代码结构清晰,但是并没有实现结构与样式完全分离</div><div>使用内部样式表设定 CSS,通常也被称为嵌入式引入,这种方式是我们练习时常用的方式</div><div><br /></div><div>(3)外部样式表</div><div>核心是:样式单独写到CSS 文件中,之后把CSS文件引入</div><div>到 HTML 页面中使用.(开发中常用)</div><div>引入外部样式表分为两步:</div><div>新建一个后缀名为 .css 的样式文件,把所有 CSS 代码都放入此文件中。</div><div>在 HTML 页面中,使用<link> 标签引入这个文件。</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Clink%20rel%3D%5C%22stylesheet%5C%22%20href%3D%5C%22css%E6%96%87%E4%BB%B6%E8%B7%AF%E5%BE%84%5C%22%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22nhDmd%22%7D"></div><div><br /></div><h1 id="u8l7c">6、综合案例:新闻页面</h1><div data-card-type="block" data-ready-card="hr"></div><div>分析:1. 搭建html结构页面. 2. 修改CSS样式</div><div><br /></div><div>示例:</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en%5C%22%3E%5Cn%3Chead%3E%5Cn%20%20%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1.0%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20http-equiv%3D%5C%22X-UA-Compatible%5C%22%20content%3D%5C%22ie%3Dedge%5C%22%3E%5Cn%20%20%20%20%3Ctitle%3EDocument%3C%2Ftitle%3E%5Cn%20%20%20%20%3Cstyle%3E%5Cn%20%20%20%20%20%20%20body%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20font%3A%2016px%2F28px%20'Microsoft%20YaHei'%3B%5Cn%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20h1%20%7B%5Cn%20%20%20%20%20%20%20%20%2F*%20%E6%96%87%E5%AD%97%E4%B8%8D%E5%8A%A0%E7%B2%97%20*%2F%5Cn%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20400%3B%20%5Cn%20%20%20%20%20%20%20%20%20%20%20%2F*%20%E8%AE%A9h1%E9%87%8C%E9%9D%A2%E7%9A%84%E6%96%87%E5%AD%97%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD%E5%AF%B9%E9%BD%90%20*%2F%5Cn%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%5Cn%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20a%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20text-decoration%3A%20none%3B%5Cn%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20.gray%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23888888%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2012px%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%5Cn%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20.search%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23666%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%2F*%20%23666666%20%20%20%20%20%23666%5Cn%20%20%20%20%20%20%20%20%20%20%20%23ff00ff%20%20%20%20%23f0f%20*%2F%5Cn%20%20%20%20%20%20%20%20%20%20%20width%3A%20170px%3B%5Cn%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20.btn%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20700%3B%5Cn%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20p%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%2F*%20%E9%A6%96%E8%A1%8C%E7%BC%A9%E8%BF%9B2%E4%B8%AA%E5%AD%97%E7%9A%84%E8%B7%9D%E7%A6%BB%20*%2F%5Cn%20%20%20%20%20%20%20%20%20%20%20text-indent%3A%202em%3B%5Cn%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20.pic%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%2F*%20%E6%83%B3%E8%A6%81%E5%9B%BE%E7%89%87%E5%B1%85%E4%B8%AD%E5%AF%B9%E9%BD%90%2C%E5%88%99%E6%98%AF%E8%AE%A9%E5%AE%83%E7%9A%84%E7%88%B6%E4%BA%B2%20p%E6%A0%87%E7%AD%BE%E6%B7%BB%E5%8A%A0%20%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD%E7%9A%84%E4%BB%A3%E7%A0%81%20*%2F%5Cn%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%5Cn%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20.footer%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23888888%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2012px%3B%5Cn%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%3C%2Fstyle%3E%5Cn%3C%2Fhead%3E%5Cn%3Cbody%3E%5Cn%20%20%20%20%20%20%20%3Ch1%3E%20%E5%8C%97%E6%96%B9%E9%AB%98%E6%B8%A9%E6%98%8E%E6%97%A5%E8%BE%BE%E9%BC%8E%E7%9B%9B%20%E4%BA%AC%E6%B4%A5%E5%86%80%E5%A4%9A%E5%9C%B0%E5%9C%B0%E8%A1%A8%E6%B8%A9%E5%BA%A6%E5%B0%86%E8%B6%8560%E2%84%83%3C%2Fh1%3E%5Cn%20%20%20%20%20%20%20%3Cdiv%20class%3D%5C%22gray%5C%22%3E%202019-07-03%2016%3A31%3A47%20%E6%9D%A5%E6%BA%90%3A%20%3Ca%20href%3D%5C%22%23%5C%22%3E%E4%B8%AD%E5%9B%BD%E5%A4%A9%E6%B0%94%E7%BD%91%3C%2Fa%3E%20%20%5Cn%20%20%20%20%20%20%20%20%3Cinput%20type%3D%5C%22text%5C%22%20value%3D%5C%22%E8%AF%B7%E8%BE%93%E5%85%A5%E6%9F%A5%E8%AF%A2%E6%9D%A1%E4%BB%B6...%5C%22%20class%3D%5C%22search%5C%22%3E%20%20%3Cbutton%20class%3D%5C%22btn%5C%22%3E%E6%90%9C%E7%B4%A2%3C%2Fbutton%3E%5Cn%20%20%20%20%3C%2Fdiv%3E%5Cn%20%20%20%20%20%20%20%20%3Chr%3E%20%5Cn%20%20%20%20%20%20%20%20%3Cp%3E%E4%B8%AD%E5%9B%BD%E5%A4%A9%E6%B0%94%E7%BD%91%E8%AE%AF%20%E4%BB%8A%E5%A4%A9%EF%BC%883%E6%97%A5%EF%BC%89%EF%BC%8C%E5%8D%8E%E5%8C%97%E3%80%81%E9%BB%84%E6%B7%AE%E5%A4%9A%E5%9C%B0%E5%87%BA%E7%8E%B0%E9%AB%98%E6%B8%A9%E5%A4%A9%E6%B0%94%EF%BC%8C%E6%88%AA%E8%87%B3%E4%B8%8B%E5%8D%882%E7%82%B9%EF%BC%8C%E5%8C%97%E4%BA%AC%E3%80%81%E5%A4%A9%E6%B4%A5%E3%80%81%E9%83%91%E5%B7%9E%E7%AD%89%E5%9C%B0%E6%B0%94%E6%B8%A9%E7%AA%81%E7%A0%B435%E2%84%83%E3%80%82%E9%A2%84%E6%8A%A5%E6%98%BE%E7%A4%BA%EF%BC%8C%E4%BB%8A%E5%90%8E%E4%B8%89%E5%A4%A9%EF%BC%883-5%E6%97%A5%EF%BC%89%EF%BC%8C%E8%BF%99%E4%B8%80%E5%B8%A6%E7%9A%84%E9%AB%98%E6%B8%A9%E5%A4%A9%E6%B0%94%E5%B0%86%E7%BB%A7%E7%BB%AD%E5%8F%91%E9%85%B5%EF%BC%8C%E9%AB%98%E6%B8%A9%E8%8C%83%E5%9B%B4%E4%BB%A5%E5%8F%8A%E5%BC%BA%E5%BA%A6%E5%B0%86%E5%9C%A84%E6%97%A5%E8%BE%BE%E5%88%B0%E9%BC%8E%E7%9B%9B%EF%BC%8C%E9%A2%84%E8%AE%A1%E5%8C%97%E4%BA%AC%E3%80%81%E5%A4%A9%E6%B4%A5%E3%80%81%E7%9F%B3%E5%AE%B6%E5%BA%84%E3%80%81%E6%B5%8E%E5%8D%97%E7%AD%89%E5%9C%B0%E6%98%8E%E5%A4%A9%E7%9A%84%E6%9C%80%E9%AB%98%E6%B0%94%E6%B8%A9%E6%9C%89%E6%9C%9B%E7%AA%81%E7%A0%B438%E2%84%83%EF%BC%8C%E5%85%B6%E4%B8%AD%E5%8C%97%E4%BA%AC%E5%92%8C%E7%9F%B3%E5%AE%B6%E5%BA%84%E7%9A%84%E6%9C%80%E9%AB%98%E6%B0%94%E6%B8%A9%E8%BF%98%E6%9C%89%E6%9C%9B%E5%88%9B%E4%BB%8A%E5%B9%B4%E4%BB%A5%E6%9D%A5%E7%9A%84%E6%96%B0%E9%AB%98%E3%80%82%3C%2Fp%3E%5Cn%20%20%20%20%20%20%20%5Cn%20%20%20%20%20%20%20%20%3Ch4%3E%E6%B0%94%E6%B8%A941.4%E2%84%83%EF%BC%81%E5%9C%B0%E6%B8%A966.5%EF%BC%81%E5%8C%97%E4%BA%AC%E5%BC%BA%E5%8A%BF%E8%BF%8E%E4%B8%83%E6%9C%88%E9%A6%96%E4%B8%AA%E9%AB%98%E6%B8%A9%E6%97%A5%3C%2Fh4%3E%5Cn%20%20%20%20%20%20%20%20%3Cp%20class%3D%5C%22pic%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3Cimg%20src%3D%5C%22images%2Fpic.jpeg%5C%22%20alt%3D%5C%22%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%3C%2Fp%3E%5Cn%20%20%20%20%20%20%20%20%3Cp%3E%E4%BB%8A%E5%A4%A9%EF%BC%8C%E5%8D%8E%E5%8C%97%E3%80%81%E9%BB%84%E6%B7%AE%E4%B8%80%E5%B8%A6%E7%9A%84%E9%AB%98%E6%B8%A9%E6%8C%81%E7%BB%AD%E5%8F%91%E9%85%B5%EF%BC%8C%E6%88%AA%E8%87%B3%E4%BB%8A%E5%A4%A9%E4%B8%8B%E5%8D%882%E7%82%B9%EF%BC%8C%E9%99%95%E8%A5%BF%E5%8C%97%E9%83%A8%E3%80%81%E5%B1%B1%E8%A5%BF%E8%A5%BF%E5%8D%97%E9%83%A8%E3%80%81%E6%B2%B3%E5%8C%97%E5%8D%97%E9%83%A8%E3%80%81%E5%8C%97%E4%BA%AC%E3%80%81%E5%A4%A9%E6%B4%A5%E3%80%81%E5%B1%B1%E4%B8%9C%E8%A5%BF%E9%83%A8%E3%80%81%E6%B2%B3%E5%8D%97%E5%8C%97%E9%83%A8%E6%9C%80%E9%AB%98%E6%B0%94%E6%B8%A9%E5%B7%B2%E6%99%AE%E9%81%8D%E8%B6%85%E8%BF%8735%E2%84%83%E3%80%82%E5%A4%A7%E5%9F%8E%E5%B8%82%E4%B8%AD%EF%BC%8C%E5%8C%97%E4%BA%AC%E3%80%81%E5%A4%A9%E6%B4%A5%E3%80%81%E9%83%91%E5%B7%9E%E5%9D%87%E8%BF%8E%E6%9D%A5%E9%AB%98%E6%B8%A9%E6%97%A5%E3%80%82%3C%2Fp%3E%5Cn%20%20%20%20%20%20%20%5Cn%20%20%20%20%20%20%20%5Cn%20%20%20%20%20%20%20%5Cn%20%20%20%20%20%20%20%20%3Cp%3E%E5%9C%A8%E9%98%B3%E5%85%89%E6%9A%B4%E6%99%92%E4%B8%8B%EF%BC%8C%E5%9C%B0%E8%A1%A8%E6%B8%A9%E5%BA%A6%E4%B9%9F%E9%80%90%E6%B8%90%E8%B5%B0%E9%AB%98%E3%80%82%E4%BB%8A%E5%A4%A9%E4%B8%8B%E5%8D%882%E7%82%B9%EF%BC%8C%E5%8D%8E%E5%8C%97%E9%BB%84%E6%B7%AE%E5%A4%A7%E9%83%A8%E5%9C%B0%E5%8C%BA%E7%9A%84%E5%9C%B0%E8%A1%A8%E6%B8%A9%E5%BA%A6%E9%83%BD%E5%9C%A850%E2%84%83%E4%BB%A5%E4%B8%8A%EF%BC%8C%E9%83%A8%E5%88%86%E5%9C%B0%E5%8C%BA%E5%9C%B0%E8%A1%A8%E6%B8%A9%E5%BA%A6%E7%94%9A%E8%87%B3%E8%B6%85%E8%BF%8760%E2%84%83%E3%80%82%E5%85%B6%E4%B8%AD%EF%BC%8C%E6%B2%B3%E5%8C%97%E8%A1%A1%E6%B0%B4%E5%9C%B0%E8%A1%A8%E6%B8%A9%E5%BA%A6%E9%AB%98%E8%BE%BE68.3%E2%84%83%EF%BC%8C%E5%A4%A9%E6%B4%A5%E7%AB%99%E5%92%8C%E5%8C%97%E4%BA%AC%E7%AB%99%E9%99%84%E8%BF%91%E7%9A%84%E5%9C%B0%E8%A1%A8%E6%B8%A9%E5%BA%A6%E5%88%86%E5%88%AB%E9%AB%98%E8%BE%BE66.6%E2%84%83%E5%92%8C66.5%E2%84%83%E3%80%82%3C%2Fp%3E%5Cn%20%20%20%20%20%20%20%5Cn%20%20%20%20%20%20%20%20%3Ch4%3E%E6%98%8E%E6%97%A5%E7%83%AD%E5%BA%A6%E5%86%8D%E5%8D%87%E7%BA%A7%EF%BC%81%E4%BA%AC%E6%B4%A5%E5%86%80%E6%90%BA%E6%89%8B%E5%86%B2%E5%87%BB38%E2%84%83%2B%3C%2Fh4%3E%5Cn%20%20%20%20%20%20%20%20%3Cp%3E%E4%B8%AD%E5%9B%BD%E5%A4%A9%E6%B0%94%E7%BD%91%E6%B0%94%E8%B1%A1%E5%88%86%E6%9E%90%E5%B8%88%E7%8E%8B%E4%BC%9F%E8%B7%83%E4%BB%8B%E7%BB%8D%EF%BC%8C%E6%98%8E%E5%A4%A9%EF%BC%884%E6%97%A5%EF%BC%89%EF%BC%8C%E5%8D%8E%E5%8C%97%E3%80%81%E9%BB%84%E6%B7%AE%E5%9C%B0%E5%8C%BA35%E2%84%83%E4%BB%A5%E4%B8%8A%E7%9A%84%E9%AB%98%E6%B8%A9%E5%A4%A9%E6%B0%94%E8%BF%98%E5%B0%86%E7%BB%A7%E7%BB%AD%E5%8D%87%E7%BA%A7%EF%BC%8C%E5%B9%B6%E8%BF%9B%E5%85%A5%E9%BC%8E%E7%9B%9B%E9%98%B6%E6%AE%B5%EF%BC%8C%E9%AB%98%E6%B8%A9%E5%BC%BA%E5%BA%A6%E5%92%8C%E8%8C%83%E5%9B%B4%E9%83%BD%E5%B0%86%E5%8F%91%E5%B1%95%E5%88%B0%E6%9C%80%E5%BC%BA%E3%80%82%20%E6%98%8E%E5%A4%A9%EF%BC%8C%E5%8C%97%E4%BA%AC%E5%8D%97%E9%83%A8%E3%80%81%E5%A4%A9%E6%B4%A5%E5%A4%A7%E9%83%A8%E3%80%81%E6%B2%B3%E5%8C%97%E4%B8%AD%E9%83%A8%E5%92%8C%E5%8D%97%E9%83%A8%E3%80%81%E5%B1%B1%E4%B8%9C%E4%B8%AD%E9%83%A8%E5%92%8C%E8%A5%BF%E9%83%A8%E3%80%81%E5%B1%B1%E8%A5%BF%E5%8D%97%E9%83%A8%E5%B1%80%E5%9C%B0%E3%80%81%E6%B2%B3%E5%8D%97%E5%8C%97%E9%83%A8%E3%80%81%E4%B8%9C%E5%8C%97%E9%83%A8%E5%88%86%E5%9C%B0%E5%8C%BA%E7%9A%84%E6%9C%80%E9%AB%98%E6%B0%94%E6%B8%A9%E9%83%BD%E5%B0%86%E8%BE%BE%E5%88%B0%E6%88%96%E8%B6%85%E8%BF%8735%E2%84%83%E3%80%82%3C%2Fp%3E%5Cn%20%20%20%20%20%20%20%5Cn%20%20%20%20%20%20%20%3Cp%3E%20%E4%B8%8D%E8%BF%87%EF%BC%8C%E4%B8%93%E5%AE%B6%E6%8F%90%E9%86%92%EF%BC%8C%E6%B5%8E%E5%8D%97%E8%A2%AB%E9%9B%A8%E6%B0%B4%E5%A4%A9%E6%B0%94%E5%AE%8C%E7%BE%8E%E7%BB%95%E5%BC%80%EF%BC%8C%E5%9B%A0%E6%AD%A4%E6%9C%AA%E6%9D%A5%E4%B8%80%E5%91%A8%EF%BC%8C%E5%BD%93%E5%9C%B0%E7%9A%84%E9%AB%98%E6%B8%A9%E8%BF%98%E4%BC%9A%E5%A4%A9%E5%A4%A9%E4%B8%8A%E5%B2%97%E3%80%82%E5%9C%A8%E6%AD%A4%E6%8F%90%E9%86%92%E5%BD%93%E5%9C%B0%E5%B1%85%E6%B0%91%E6%B3%A8%E6%84%8F%E9%98%B2%E6%9A%91%E9%99%8D%E6%B8%A9%EF%BC%8C%E9%98%B2%E8%8C%83%E6%8C%81%E7%BB%AD%E9%AB%98%E6%B8%A9%E5%B8%A6%E6%9D%A5%E7%9A%84%E5%90%84%E7%A7%8D%E4%B8%8D%E5%88%A9%E5%BD%B1%E5%93%8D%E3%80%82%EF%BC%88%E6%96%87%2F%E5%BC%A0%E6%85%A7%20%E6%95%B0%E6%8D%AE%E6%94%AF%E6%8C%81%2F%E7%8E%8B%E4%BC%9F%E8%B7%83%20%E8%83%A1%E5%95%B8%20%E5%AE%A1%E6%A0%B8%2F%E5%88%98%E6%96%87%E9%9D%99%20%E5%BC%A0%E6%96%B9%E4%B8%BD%EF%BC%89%3C%2Fp%3E%5Cn%20%20%20%20%20%20%20%5Cn%20%20%20%20%20%20%20%3Cp%20class%3D%5C%22footer%5C%22%3E%20%E6%9C%AC%E6%96%87%E6%9D%A5%E6%BA%90%EF%BC%9A%E4%B8%AD%E5%9B%BD%E5%A4%A9%E6%B0%94%E7%BD%91%20%E8%B4%A3%E4%BB%BB%E7%BC%96%E8%BE%91%EF%BC%9A%E5%88%98%E4%BA%AC_NO5631%3C%2Fp%3E%5Cn%3C%2Fbody%3E%5Cn%3C%2Fhtml%3E%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22I0kQC%22%7D"></div><div><br /></div><h1 id="jIAMp">7、Chrome 调试工具</h1><div data-card-type="block" data-ready-card="hr"></div><div>打开 Chrome 浏览器,按下 F12 键或者右击页面空白处——检查。</div><div><br /></div><div>使用调试工具</div><div>① Ctrl+滚轮 可以放大开发者工具代码大小。</div><div>② 左边是 HTML 元素结构,右边是 CSS 样式。</div><div>③ 右边 CSS 样式可以改动数值(左右箭头或者直接输入)和查看颜色。</div><div>④ Ctrl + 0 复原浏览器大小。</div><div>⑤ 如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误。</div><div>⑥ 如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误。</div><div><br /></div>


目录
相关文章
|
2月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
69 3
|
2月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
44 6
|
2月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
40 5
|
2月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
2月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
2月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
35 4
|
2月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
42 3
|
2月前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
67 2
|
3月前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!