搜索到
7
篇与
的结果
-
响应式布局 一、什么是响应式设计1.1 定义真正的响应式设计方法不仅仅是根据可视区域大小而改变网页布局，而是要从整体上颠覆当前网页的设计方法，是针对任意设备的网页内容进行完美布局的一种显示机制。1.2 响应式设计的优势开发、维护、运营成本优势:页面只有一个，只是针对不同的分辨率、 不同的设备环境进行了一些不同的设计，所以在开发、维护和运营上，相对多个版本，能节约成本。 兼容性优势:移动设备新的尺寸层出不穷，定制的版本通常只适用于某些规格的设备，如果新的设备分辨率变化较大，则往往不能兼容，而开发新的版本需要时间，这段时间内的访问就是个问题，但是响应式Web设计可以提前预防这个问题。 操作灵活:响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。二、屏幕的相关概念2.1 分辨率 resolutio 是指显示器所能显示的像素的多少像素密度 单位: dpi(dots per inch) ppi 像素密度(pixels per inch)也称PPi，即每英寸屏幕所拥有的像素数，像素密度越大，显示画面细节就越丰富。 像素密度=√{ (长度像素数^2+宽度像素数^2) }/ 屏幕尺寸 iphone3G 165dpi 320px 480px iphone4 326 dpi 640px960px iphone6s 326dpi 1334px*750px每像素包含点的数量(dppx) 用 iPhone4 举个例子，它有 326 DPI 显示屏，根据上表，智能手机的典型观看距离大概16.8英寸，基准像素为 160 DPI。所以要显示一个 CSS 像素，苹果选择将像素比设置为2，所以看起来就和 163 DPI 手机中显示的一样了。 设备像素比(dip或dpr) 同 dppx视网膜(Retina)屏幕是苹果公司在部分移动产品使用的一种屏幕。第一次被人们熟知，是苹果将其用在iphone 4手机上，它将960x640的分辨率压缩到一个3.5英寸的显示屏内。也就是说，该屏幕的像素密度达到326像素/英寸(ppi)，称之为“视网膜屏幕”。通常电脑显示屏幕的分辨率为72ppi，iPhone 4的分辨率为电脑的4倍多。由于其具备超高像素密度的液晶屏，因此屏幕显示异常清晰、锐利。三、viewport视口3.1 什么是viewportviewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做"视区"。 手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中，通常这个虚拟的"窗口"(viewport)比屏幕宽，这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局)，用户可以通过平移和缩放来看网页的不同部分。3.2 设置viewportwidth:控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素) height:和 width 相对应，指定高度。 initial-scale:初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale:允许用户缩放到的最大比例 minimum-scale:允许用户缩放到的最小比例 user-scalable:用户是否可以手动缩放。四、媒体查询 @media4.1 媒体类型4.2 媒体特性aspect-ratio 可视窗囗宽高比 min/max device-aspect-ratio 设备的宽高比 min/max orientation 设备的使用方向 landscape(水平方向) portrait(垂直方向) width 可视窗口的宽度 max/min device-width 设备的宽度 max/min height 可视窗口的高度 max/min device-height 设备的高度 max/min resolution 屏幕密度 单位dppx max/min webkit内核请使使用 -webkit-min-device-pixel-ratio4.3 媒体查询用法用法一：<link rel="stylesheet" media="mediatype" href="mystylesheet.css"> <link rel="stylesheet" media="mediatype and (media feature)" href="mystylesheet.css">用法二：@import url(css文件) mediaType 用法三：@media mediatype and (media feature) { CSS-Code; } @media (media feature) { CSS-Code; }4.4 媒体查询语法运算符and 并且 , 或者 not 否定 一定要指定媒体类型，因为媒体类型默认al，not后永远返回假 only only + 媒体类型五、断点设置5.1 常用设置一三个断点:768px 992px 1200px 手机 超小屏幕 <= 768px 平板 小屏幕 769px ~ 992px 中等屏幕 993px ~ 1200px 大屏幕 >1200px5.2 常用设置二四个断点:576px 768px 992px 1200px 超小屏幕 <= 576px 小屏幕 577px ~ 768px 中等屏幕 769px ~ 992px 大屏幕 993px ~ 1200px 超大屏幕 > 1200px5.3 推荐设置三两个断点: 640px 1024px 小屏幕 <= 640pX 中等屏幕 641px ~ 1024px 大屏幕 > 1024px六、响应式图片设置图片宽度百分比 使用背景图片 paddint-top background-size 使用H5 <picture>标签 使用picturefill插件 -
css基础布局 一、布局相关的标签<div></div>定义文档中的分区或节 <span></span> 这是一个行内元素，没有任何意义 <header></header> HTML5新增 定义 section 或 page 的页眉 <footer></footer> HTML5新增 定义 section 或 page 的页脚 <mainx/main> HTML5新增 标签规定文档的主要内容。<main>元素中的内容对于文档来说应当是唯一的。它不应包含在 文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。IE都不识别 <nav>/nav> HTML5新增 表示链接导航部分 如果文档中有”前后”按钮，则应该把它放到元素中 <sectionx/section> HTML5新增 定义文档中的节 通常不推荐那些没有标题的内容使用section <article></article> HTML5新增 定义文章 论坛帖子 报纸文章 博客条目 用户评论 <aside></aside>HTML5新增 相关内容，相关辅助信息，如侧边栏二、盒子模型2.1 什么是盒子模型所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括:边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。Margin(外边距) 清除边框外的区域，外边距是透明的。Border(边框)围绕在内边距和内容外的边框。Padding(内边距)清除内容周围的区域，内边距是透明的。Content(内容)盒子的内容，显示文本和图像。2.2 块级元素和内联元素（行内元素）块级元素和其他元素都在一行上 高，行高及外边距和内边距部分可改变 宽度只与内容有关 行内元素只能容纳文本或者其他行内元素 外边界只能对左右起作用，内边距都起作用块级元素和内联元素的转换display: block | inline | inline-block2.3 盒子模型之间的关系document树父元素 子元素 后代元素 祖先元素 兄弟元素标准文档流1.行内元素不占据单独的空间，依附于块级元素，行内元素没有自己的区域。它同样是DOM树中的一个节点，在这一点上行内元素和块级元素是没有区别的。 2.块级元素总是以块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右自动伸展，直到包含它的元素的边界，在水平方向不能并排。盒子在标准流中的定位原则行内元素之间的水平margin 块级元素之间的竖直margin(margin的塌陷) 嵌套盒子之间的margin,(子元素父元素margin合并) 将margin设置为负值2.4 盒子模型相关css属性2.4.1 布局属性display| 值 | 描述 | | ------------ | ---------------------------------------------------- | | none | 此元素不会被显示。 | | block | 此元素将显示为块级元素，此元素前后会带有换行符。 | | inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 | | inline-block | 行内块元素。（CSS2.1 新增的值） |float| 值 | 描述 | | ------- | ---------------------------------------------------- | | left | 元素向左浮动。 | | right | 元素向右浮动。 | | none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 | | inherit | 规定应该从父元素继承 float 属性的值。 |clear| 值 | 描述 | | ------- | ------------------------------------- | | left | 在左侧不允许浮动元素。 | | right | 在右侧不允许浮动元素。 | | both | 在左右两侧均不允许浮动元素。 | | none | 默认值。允许浮动元素出现在两侧。 | | inherit | 规定应该从父元素继承 clear 属性的值。 |visibility| 值 | 描述 | | -------- | ------------------------------------------------------------ | | visible | 默认值。元素是可见的。 | | hidden | 元素是不可见的。 | | collapse | 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。 | | inherit | 规定应该从父元素继承 visibility 属性的值。 |overflow| 值 | 描述 | | ------- | -------------------------------------------------------- | | visible | 默认值。内容不会被修剪，会呈现在元素框之外。 | | hidden | 内容会被修剪，并且其余内容是不可见的。 | | scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 | | auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 | | inherit | 规定应该从父元素继承 overflow 属性的值。 |overflow-xoverflow-y2.4.2 尺寸width/max-width/min-width height/max-height /min-height2.4.3 内补白padding /padding-left/padding-right/ padding-top /padding-bottom2.4.4 外边距margin margin-left margin-right margin-top margin-bottom三、浮动3.1 什么是浮动CSS的Float(浮动)，元素可以围绕其他元素向左或向右被推动 设置浮动，脱离普通文档流 浮动元素都会变为块级元素 如果不设置宽度，会尽可能的窄 浮动元素之后的元素将围绕它 浮动元素之前的元素将不会受到影响.3.2 设置浮动.item { float:left } .item { float:right } /*float 属性的默认值是 none 表示没有浮动*/3.3 清除浮动浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。 因此，创建浮动框可以使文本围绕图像：要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。clear: both clear: left clear: right3.4 浮动实验实现以下实现 1.设置第一浮动的div 2.设置第2个浮动div 3.设置第3个浮动div 4.改变第三个浮动方向 5.改变第二个浮动方向 6.全部向左浮动,增加第一个的高度 7.使用clear属性清楚浮动的影响 8. 扩展盒子的高度(元素高度和浮动的元素) 9.段落首字母浮动 10.图片浮动 11.简单浮动布局3.5 浮动相关css属性总结float 值: none(默认) /left /right clear 值: none(默认) /both /left /right3.6 浮动布局小案例
-
css基础样式 一、文字样式文字样式是用来控制字体或文本的显示方式的。/*字族：STSong作为首选字体, 微软雅黑作为备用字体*/ font-family: "STSong", "微软雅黑"; /*字体大小*/ font-size: 40px; /*字重：100、200、300、400、500、600、700、800、900，值越大字越粗*/ font-weight: 900; /*行高: 字体文本默认在行高中垂直居中显示*/ line-height: 200px; /*字划线: overline(上划线) | line-through(中划线) | underline(下划线) | none(取消划线) */ text-decoration: overline; /*字间距*/ letter-spacing: 2px; /*词间距*/ word-spacing: 5px; /*首行缩进：1em相当于一个字的宽度*/ text-indent: 2em; /*字体颜色*/ color: red; /* 文本水平排列方式：left(水平居左) | center(水平居中) | right(水平居右) */ text-align: center;二、背景样式标签的背景除了背景颜色还可以有背景图片，而背景图片又有很多相关设置。/*背景图片：url函数可以链接网络或本地图片*/ background-image: url('https://www.baidu.com/favicon.ico'); /*平铺:repeat-x(x轴平铺) | repeat-y(y轴平铺) | repeat(双轴平铺) | no-repeat*/(不平铺) background-repeat: no-repeat; /*x轴背景图片位置偏移：正值往右偏移，负值往左偏移*/ background-position-x: 10px; /*y轴背景图片位置偏移：正值往下偏移，负值往上偏移*/ background-position-y: 10px;三、显示样式HTML5预定义了很多系统标签，大家学习了html标签部分的时候，肯定注意到了，不同的标签在页面中的显示效果是不一样的，比如两个div之间默认会换行显示，而两个span标签却在一行来显示，到底是什么样式控制着标签这种显示效果呢，那就是显示样式display来控制的。display:block;<div style="display: block;"></div> <span style="display: block;"></span> <i style="display: block;"></i> <!-- 1. 任意标签的display样式值均可以设置为block，那么该标签就会以block方式来显示 2. block方式显示的标签，默认会换行 3. block方式显示的标签，支持所有的css样式 4. block方式显示的标签，可以嵌套所有显示方式的标签 注：标题标签和段落标签虽然也是block显示类标签，但不建议嵌套block显示类标签 -->display:inline;<div style="display: inline;"></div> <span style="display: inline;"></span> <i style="display: inline;"></i> <!-- 1. 任意标签的display样式值均可以设置为inline，那么该标签就会以inline方式来显示 2. inline方式显示的标签，默认不会换行 3. inline方式显示的标签，不支持所有css样式(如：不支持手动设置该标签的宽高) 4. inline方式显示的标签，建议只用来嵌套所有inline显示方式的标签 -->display:inline-block;<div style="display: inline-block;"></div> <span style="display: inline-block;"></span> <i style="display: inline-block;"></i> <!-- 1. 任意标签的display样式值均可以设置为inline-block，那么该标签就会以inline-block方式来显示 2. inline-block方式显示的标签，具有inline特性，默认不换行 3. inline-block方式显示的标签，也具备block特征，支持所有css样式 4. inline-block方式显示的标签，不建议嵌套任意显示方式的标签 -->
-
css选择器 什么是css选择器？css选择器本质就是css与html两种语法建立关联的特定标识符: 就是在css语法中，通过html中标签的某种名字，与html具体的标签建立关联，从而使写在对应css选择器后的css样式能控制html中关联的标签或标签们 而表示标签名字的方式有多种，每一种名字在css语法中都对应这一种特定标识符，下面我们就来详细介绍一、基础选择器 1.1 通配选择器/* 特定标识符 星号(*) -- 可以表示页面所有标签的名字 */ /* 通配选择器控制页面中所有的标签(不建议使用) */ * { /* 样式块 */ }<!-- 页面中所有标签都能被匹配 --> <html></html> <body></body> <div></div> <p></p> <i></i>1.2 标签选择器/* 特定标识符 标签名 */ /* 标签选择器控制页面中标签名为标签选择器名的所有标签*/ div { /* 控制页面中所有div标签的样式 */ /* 样式块 */ }<!-- 页面中所有的div标签都能被匹配 --> <div></div> <div class="sup"> <div id='inner'></div> </div>1.3 class选择器（提倡使用） /* 特定标识符 点(.) */ /* class选择器控制页面中标签全局属性class值为class择器名的所有标签*/ .box { /* 控制页面中所有标签全局属性class值为box标签的样式 */ /* 样式块 */ }<!-- 页面中class属性值为box的标签都能被匹配 --> <div class="box"></div> <p class="box"> <i class="box"></i> </p>1.4 id选择器/* 特定标识符 井号(#) */ /* id选择器控制页面中标签全局属性id值为id择器名的唯一标签*/ #box { /* 控制页面中唯一标签全局属性id值为box标签的样式 */ /* 样式块 */ }<!-- 页面中id属性值为box的唯一标签备匹配，id具有唯一性：一个页面中所有标签的id属性值不能重名 --> <div id="box"></div>1.5 基础选择器优先级在一个页面中，难免会出现页面中的某一个标签的某一个样式被不同的选择器下的样式同时控制，也就是出现了多种方式下对目标标签的同一样式出现了重复控制，那到底是哪种选择器下的样式最终控制了目标标签，一定会有一套由弱到强的控制级别规则，这种规则就叫做优先级，下面的例子就很好的解释了各种基础选择器的优先级关系:<head> <style> * { width: 50px; height: 50px; background-color: red; color: pink; } div { width: 60px; height: 60px; background-color: orange; } .box { width: 70px; height: 70px; } #ele { width: 80px; } </style> </head> <body> <div class="box" id="ele">文字内容</div> </body> <!-- 1. 四种选择器都控制目标标签的宽度，最终目标标签宽度为80px，所以id选择器优先级最高 2. 三种选择器都控制目标标签的高度，最终目标标签宽度为70px，所以class选择器优先级其次 3. 二种选择器都控制目标标签的背景颜色，最终目标标签背景颜色为orange，所以标签选择器优先级再次 4. 只有一种选择器控制目标标签的字体颜色，目标标签字体颜色一定为pink 优先级：通配选择器 < 标签选择器 < class选择器 < id选择器 -->二、复杂选择器 2.1 群组选择器/* 连接标识符 逗号(,) */ /* 群组选择器就是一套样式块同时控制用逗号连接(,)的所有目标标签 */ div, p, .box, #ele { /* 样式块 */ }<!-- 页面中所有div标签、所有p标签、所有class属性值为box、唯一id属性值为ele的标签都能被匹配 --> <div> <div></div> </div> <p></p> <p></p> <i class="box"></i> <span class="box"></span> <b id="ele"></b>2.2 后代选择器/* 连接标识符 空格( ) */ /* 后代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */ body .box i { /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/ /* 样式块 */ }<!-- body标签内部的class属性值为box内部的i标签们都能被匹配，所以只匹配i标签，其他都是修饰 --> <body> <div class='box'> <span><i></i></span><!-- body与.box是直接父子关系，.box与i是间接父子关系，能被匹配 --> </div> <div> <span class='box'><i></i></span><!-- body与.box是间接父子关系，.box与i是直接父子关系，能被匹配 --> </div> </body> <!-- 标签的嵌套结构形成父子代标签，后代选择器可以匹配直接父子关系或间距父子关系形成的层次，所以两个i标签均能被匹配 -->2.3 子代选择器/* 连接标识符 大于号(>) */ /* 子代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */ body>.box>i { /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/ /* 样式块 */ }<!-- body>.box>i：同理body和.box都是修饰位，i才是目标匹配位 --> <body> <div class='box'> <span><i></i></span><!-- body与.box是直接父子关系，.box与i是间接父子关系，不能被匹配 --> </div> <div> <span class='box'><i></i></span><!-- body与.box是间接父子关系，.box与i是直接父子关系，不能被匹配 --> </div> <div class='box'> <i></i><!-- body与.box是直接父子关系，.box与i是直接父子关系，能被匹配 --> </div> </body> <!-- 子代选择器只能匹配直接父子关系，所以只能匹配最后一个i标签 -->2.4 兄弟选择器/* 连接标识符 波浪号(~) */ /* 兄弟选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */ #ele~div~i { /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/ /* 样式块 */ }<!-- #ele~div~i：同理#ele和div都是修饰位，i才是目标匹配位 --> <h3 id="ele"></h3> <div></div><!-- #ele与div是直接兄弟关系 --> <i></i><!-- div与i是直接兄弟关系，能被匹配 --> <div></div><!-- #ele与div是间距兄弟关系 --> <i></i><!-- div与i是直接兄弟关系，能被匹配 --> <!-- 标签的上下结构形成兄弟标签，兄弟选择器可以匹配直接兄弟关系或间距兄弟关系形成的层次，所以两个i标签均能被匹配 -->2.5 相邻选择器/* 连接标识符 加号(+) */ /* 相邻选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */ #ele+div+i { /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/ /* 样式块 */ }<!-- #ele+div+i：同理#ele和div都是修饰位，i才是目标匹配位 --> <h3 id="ele"></h3> <div></div><!-- #ele与div是直接兄弟关系 --> <i></i><!-- div与i是直接兄弟关系，能被匹配 --> <div></div><!-- #ele与div是间距兄弟关系 --> <i></i><!-- div与i是直接兄弟关系，不能被匹配 --> <!-- 相邻选择器只能匹配直接兄弟关系，所以只能匹配第一个i标签 -->2.6 交叉选择器/* 连接标识符 紧挨着(没有任何连接符) */ /* 交叉选择器本质上是对一个目标标签的多个名字的同时表示 */ div.box#ele.tag { /*div是标签名，box和tag都是class属性值，ele是id属性值*/ /* 样式块 */ }<!-- 标签名div、class名box及tag和id名ele都是对一个目标标签的修饰空格隔开 <!-- class属性拥有多个值时，多个值之间用空格隔开 --> <div class="box tag" id="ele"></div>2.7 基础选择器优先级简单选择器存在优先级，优先级的前提就是不同选择器同时控制同一标签的同一属性，那么在复杂选择器下，一定会出现这种同时控制同一标签的同一属性情况，那复杂选择器的优先级又是如何来规定的呢?1. 复杂选择器的种类并不会影响优先级 -- 后代：div #ele | 兄弟：div~#ele | 交叉：div#ele 优先级一样 2. 复杂选择器本质是通过同类型(简单选择器)的个数来确定优先级 -- 三层标签选择器后代：body div i 大于 两层标签选择器后代：div i | body i 3. 简单选择器的优先级起关键性作用，也就是一个id选择器要大于无限个class选择器，一个class选择器要大于无限个标签选择器 -- id选择器：#i 大于 n层class选择器：.box .i -- class选择器：.box 大于 n层标签选择器：body div总结选择器是一个庞大的家族，还有很多css选择器等待大家自己去挖掘，掌握已上选择器也已足够帮助我们完成简单前端开发了 我们有了css与html建立联系的选择器基础，那么建立联系后，css语言除了控制标签的宽高背景颜色字体颜色外，还有哪些丰富的样式控制呢?下面我们就一起来学习一下具体的样式设置。
-
css基础 一、css3是什么CSS3就是css语言，数字3是该语言的版本号;css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式(css语言代码也可以直接写在html文件中)，采用的语言是级联样式表(Cascading Style Sheet)，也属于标记语言。二、css3如何学习学习方向:从css代码书写位置、css选择器和css具体样式设置三部分进行学习 学习目的:完成页面样式布局和位置布局三、css代码书写位置css是来控制页面标签的样式，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种。 3.1 行间试 css样式书写在标签的style全局属性中，一条样式格式为 样式名: 样式值 单位;，可以同时出现多条样式<!-- 关键代码 --> <!-- 给div标签设置宽高背景颜色 --> <div style="width: 200px; height: 200px; background-color: orange;">内容</div>3.2 内联式 css样式书写在head标签内的style标签中，样式格式为 css选择器{样式块}，样式块由一条条样式组成<!-- 关键代码 --> <head> <style> /* css语法下的注释语法 */ /* 设置页面中所有h2标签宽高背景颜色 */ h2 { width: 50px; height: 50px; background-color: orange; } /* 设置页面中所有h3标签宽高背景颜色 */ h3 { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <h2></h2> <h2></h2> <h3></h3> <h3></h3> </body>3.3 外联式 css样式的写法同内联式，但样式书写在css文件中，在html页面中用link标签引入css文件(建议在head标签中引入)css文件夹下的my.css/* html文件会引入该css文件，设置所有引入了html文件中的所有p标签宽高背景颜色 */ p { width: 50px; height: 50px; background-color: orange; }根目录下的first.html<!-- 关键代码 --> <head> <!-- rel="stylesheet"：引入的是层级样式表，也就是css文件 type="text/css"：引入文件采用的是css语法书写文本类型代码 href="css/my.css"：采用相当路径引入目标css文件 --> <link rel="stylesheet" type="text/css" href="css/my.css"> </head> <body> <!-- 该页面中的p标签样式都被my.css文件控制 --> <p></p> <p></p> </body>根目录下的second.html<head> <link rel="stylesheet" type="text/css" href="css/my.css"> </head> <body> <!-- 该页面中的p标签样式也都被my.css文件控制 --> <p></p> <p></p> </body>总结行间式控制样式最直接，但是样式多了直接导致页面可读性变差，且样式相同的标签样式也需要各自设置，复用性差; 内联式可以用一套样式块同时控制多个标签，具有样式的复用性，但是css样式代码还是写在html文件中，在项目开发下，代码量剧增，导致html文件变得臃肿，不利于代码维护 外联式将css样式移到外部css文件中，不仅避免项目开发下html文件的臃肿问题，同时具有一套代码块控制多个标签，一个css样式文件服务于多个html两种复用性的好处，但是在学习阶段代码量不大时，样式不需要服务于多个html页面时，前面两种方式显然显得更便利。 在行间式中，写在标签内部的样式自然是用来控制该标签的样式，那写在内联式和外联式中的样式又是通过什么样的联系来控制对应页面中标签的样式呢?答案就是用于建立css与html之间联系的css选择器
