网站qq临时会话,电子技术网,百度免费网站建设,做怎么网站推广7.29.2019 1. CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中#xff0c;是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一… 7.29.2019 1. CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 2. 一般而言所有的样式会根据下面的规则层叠于一个新的虚拟样式表中按优先级升序排列 浏览器缺省设置 外部样式表 内部样式表位于 head 标签内部 内联样式在 HTML 元素内部 3.选择器可分组同组选择器就可以分享相同的声明。 h1,h2,h3,h4,h5,h6 { color: green; } 4. 派生选择器根据文档的上下文关系来确定某个标签的样式。 h2 strong { color: blue; } h2This subhead is also red./h2 h2The strongly emphasized word in this subhead isstrongblue/strong./h2 5. id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式以 # 来定义。 id 属性只能在每个 HTML 文档中出现一次。 #red {color:red;} p idred这个段落是红色。/p 6. id 选择器常常用于建立派生选择器。 即使id为 sidebar 的元素只能在文档中出现一次这个 id 选择器作为派生选择器也可以被使用很多次。 #sidebar p { font-style: italic; text-align: right; } #sidebar h2 { font-size: 1em; font-weight: normal; } 7. id 选择器即使不被用来创建派生选择器它也可以独立发挥作用 div#sidebar { border: 1px dotted #000; padding: 10px; } 8. 在 CSS 中类选择器以一个点号显示 .center {text-align: center} 注意类名的第一个字符不能使用数字它无法在 Mozilla 或 Firefox 中起作用。 9.类选择器可以用作派生选择器类也可基于它们的类而被选择。 .fancy td { color: #f60; background: #666; } td.fancy { color: #f60; background: #666; } 10.属性选择器可以为拥有指定属性的 HTML 元素设置样式。 注释只有在规定了 !DOCTYPE 时IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中不支持属性选择。 CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attributevalue] 用于选取带有指定属性和值的元素。 [attribute~value] 用于选取属性值中包含指定词汇的元素。 [attribute|value] 用于选取带有以指定值开头的属性值的元素该值必须是整个单词。 [attribute^value] 匹配属性值以指定值开头的每个元素。 [attribute$value] 匹配属性值以指定值结尾的每个元素。 [attribute*value] 匹配属性值中包含指定值的每个元素。 11.插入样式表的方法 11.1外部样式表 当样式需要应用于很多页面时使用外部样式表。在使用外部样式表的情况下通过改变一个文件来改变整个站点的外观。每个页面使用 link 标签链接到样式表。link 标签在文档的头部 head link relstylesheet typetext/css hrefmystyle.css / /head 外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。不要在属性值与单位之间留有空格。下面是一个样式表文件的例子 hr {color: sienna;} p {margin-left: 20px;} body {background-image: url(images/back40.gif);} 11.2内部样式表 当单个文档需要特殊的样式时使用内部样式表。使用 style 标签在文档头部定义内部样式表 head style typetext/css hr {color: sienna;} p {margin-left: 20px;} body {background-image: url(images/back40.gif);} /style /head 11.3内联样式 使用内联样式需要在相关的标签内使用样式style属性。Style 属性可以包含任何 CSS 属性。 由于要将表现和内容混杂在一起内联样式会损失掉样式表的许多优势。请慎用这种方法例如当样式仅需要在一个元素上应用一次时。 p stylecolor: sienna; margin-left: 20px This is a paragraph /p 12. background-color 不能继承所有背景属性都不能继承其默认值是 transparent。transparent 有“透明”之意。也就是说如果一个元素没有指定背景色那么背景就是透明的这样其祖先元素的背景才能可见。 13. 要把图像放入背景需要使用 background-image 属性。background-image 属性的默认值是 none表示背景上没有放置任何图像。大多数背景都应用到 body 元素不过并不仅限于此。 下面例子为一个段落应用了一个背景而不会对文档的其他部分应用背景 p.flower {background-image: url(/i/eg_bg_03.gif);} 可以为行内元素设置背景图像下面的例子为一个链接设置了背景图像 a.radio {background-image: url(/i/eg_bg_07.gif);} 14. 如果需要在页面上对背景图像进行平铺可以使用 background-repeat 属性。 属性值 repeat 导致图像在水平垂直方向上都平铺就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复no-repeat 则不允许图像在任何方向上平铺。默认地背景图像将从一个元素的左上角开始。 15. 可以利用 background-position 属性改变图像在背景中的位置。关键字top、bottom、left、right 和 center。还可以使用长度值如 100px 或 5cm最后也可以使用百分数值。 百分数值同时应用于元素和图像。也就是说图像中描述为 50% 50% 的点中心点与元素中描述为 50% 50% 的点中心点对齐。如果有两个值则分别为水平方向和垂直方向。如果只提供一个百分数值所提供的这个值将用作水平值垂直值将假设为 50%。 长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。注意这一点与百分数值不同因为偏移只是从一个左上角到另一个左上角。也就是说图像的左上角与 background-position 声明中的指定的点对齐。 16. 如果文档比较长那么当文档向下滚动时背景图像也会随之滚动。当文档滚动到超过图像的位置时图像就会消失。 可以通过 background-attachment 属性防止这种滚动。通过这个属性可以声明图像相对于可视区是固定的fixed因此不会受到滚动的影响。 转载于:https://www.cnblogs.com/zccfrancis/p/11267517.html
