CSS笔录

2018-02-03 10:27:36来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

今天系统回顾下CSS,做个笔记,以后做ppt参考下

 

1.(简介)

CSS 指层叠样式表 (Cascading Style Sheets)

 

2.(语法)

①【层叠次序】

内联样式 > 内部样式表 > 外部样式表 > 浏览器中缺省设置(默认设置)

②【大小写】

与 XHTML 不同,CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的

③【选择器的分组】

被分组的选择器就可以分享相同的样式,用逗号将需要分组的选择器分开

④【继承及相关问题】

在CSS里子元素从父元素继承属性,在大多数浏览器都符合,例如:

body  {     font-family: Verdana, sans-serif;     }

兼容问题:

      但是在那个浏览器大战的血腥年代里,这种情况就未必会发生,那时候对标准的支持并不是企业的优先选择。比方说,Netscape 4 就不支持继承,它不仅忽略继承,而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题,在表格内的字体样式会被忽略。这时又该如何是好呢?

解决方案:

      可以通过使用我们称为 "Be Kind to Netscape 4" 的冗余法则来处理旧式浏览器无法理解继承的问题

body  {font-family: Verdana, sans-serif;}p, td, ul, ol, li, dl, dt, dd  {font-family: Verdana, sans-serif;}

      4.0 浏览器无法理解继承,不过他们可以理解组选择器。这么做虽然会浪费一些用户的带宽,但是如果需要对 Netscape 4 用户进行支持,就不得不这么做

 ⑤【摆脱继承】

针对去创建样式即可摆脱继承

 

3.(选择器)

①派生选择器

又叫上下文关系选择器(CSS1时称呼),从CSS2开始改名为派生选择器,主要根据文档的上下文关系来确定某个标签的样式;

包含子元素选择器,后代选择器和相邻兄弟选择器,具体在后面讲解

比方说,你希望列表中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:

li strong {    font-style: italic;    font-weight: normal;  }

 而在HTML里:

<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p><ol><li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li><li>我是正常的字体。</li></ol>

 只有 li 元素中的 strong 元素的样式为斜体字,无需为 strong 元素定义特别的 class 或 id,代码更加简洁

 ② id选择器(唯一性);

 ③ 类选择器;

 ④属性选择器

  对带有指定属性的 HTML 元素设置样式

【注释:】只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择

关于选择器,在下面会有详细介绍

 

 

 4 .(CSS样式)

①【背景】

 1. 背景色:

background-color不能继承,其默认值是 transparent透明。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见

 2 .背景图片:

background-image 属性的默认值是 none,表示背景上没有放置任何图像

另外还要补充一点,background-image 也不能继承。事实上,所有背景属性都不能继承

 3 .背景重复;

 4 .背景定位;

 5 .背景关联: (background-attachment背景附件:fixed)

【适用场景:广告框,例如网页下滑到一定高度后,部分广告栏始终固定在顶部,这个是暂时想到的,有时间测试下】

作用:设置图像相对于可视区固定,不受页面滚动影响

例:

<style type="text/css">body {background-image:url(http://www.w3school.com.cn/i/eg_bg_02.gif);background-repeat:no-repeat;background-attachment:fixed}p{height:200px;margin:200px 0;}</style><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p>

【注意】background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动

 ② 【文本】

 1. 缩进

 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值

属性值有三种:

  length       定义固定的缩进。默认值:0

  %               定义基于父元素宽度的百分比的缩进

  inherit       规定应该从父元素继承 text-indent 属性的值

【注意:1.任何版本均IE不支持属性值inherit(继承);2.不支持行内元素】

 2. 水平对齐

值描述
left把文本排列到左边。默认值:由浏览器决定。
right把文本排列到右边。
center把文本排列到中间。
justify实现两端对齐文本效果。
inherit规定应该从父元素继承 text-align 属性的值。

text-algin:justify在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。两端对齐文本在打印领域很常见

具体使用场景及注意事项我在后面文章里做了总结

 

 

 

【总结】

①所有背景属性(背景色,背景图片)都不能继承

 

 

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台