CSS

当前位置:主页 > 网页制作 > CSS >

css学习归纳总结

时间:2020-05-11|栏目:CSS|点击:

默认的宽为浏览器的100%,比如在火狐下是131px,在所有被!important标记的样式,即使它后来被重写,浏览器也只会采用被标记的那条。!important:IE7/IE8/IE9/FireFox可以识别上面附加!important的语句,看到附加!important的语句后,就不会再去执行 第二句,尽管他们也“认识”第二句,但是附加“!important”的语句拥有绝对优先级,只要有它存在,第二句就不允许执行。IE6会执行!important的语句后,再去执行第二句“height!900px”,用后面的样式覆盖了前面的样式,所以在IE6下,最终的height值是900px。在决定使用使用哪种方法去包含你的样式表之前,你应该明白这两种方法被用来干嘛?link就是把外部CSS与网页连接起来,将其加在head头部标签中,具体形式如下:通过两个或以上的css文件共同部分,在css页面引入css文件,通过@import url(” “)块级元素是可以设置宽高的,但是它的实际宽高是本身宽高+padding。block元素要单独占一行。内联元素不单独占一行,给他设置宽高是没有用的。em为相对长度单位,相对于当前对象内文本的字体尺寸(font-size)。比如:Web页面中body的文字大小在用户浏览器下默认渲染是16px,所以,此时的1em = 16px;em` 标签一样,用于强调文本,但它强调的程度更强一些。 `em` 是 斜体强调标签,更强烈强调,表示内容的强调点。相当于html元素中的 `i ` 是视觉要素,分别表示无意义的加粗,无意义的斜体。 em 和 strong 是表达要素(phrase elements)。b 元素现在描述为在普通文章中仅从文体上突出的不包含任何额外的重要性的一段文本。 例如:文档概要中的关键字,评论中的产品名。或者代表强调的排版方式。 i 元素现在描述为在普通文章中突出不同意见或语气或其他的一段文本, 例如:一个分类名称,一个技术术语,一个外语中的谚语,css怎么学一个想法等。或者代表斜体的排版方式。一个class值中可能包含一个词列表,各个词之间用空格分隔。例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作:元素透明度时常是个恼人的问题,下面这种方式可以实现所有浏览器下的透明度设置:Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发IE的hasLayout属性,清除浮动、清除margin的重叠等。当一个元素的hasLayout属性值为true时,我们说这个元素有一个布局(layout)float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。使用浮动(float)的一个比较疑惑的事情是他们怎么影响包含他们的父元素的。如果父元素只包含浮动元素,那么它的高度就会塌缩为零。如果父元素不包含任何的可见背景,这个问题会很难被注意到如果你很明确的知道接下来的元素会是什么,可以使用clear!both; 来清除浮动。这个方法很不错,它不需要hack,不添加额外的元素也使得它有良好的语义性。优雅降级和渐进增强印象中是随着css3流出来的一个概念。由于低级浏览器不支持css3,但css3的效果又太优秀不忍放弃,所以在高级浏览中使用css3而低级浏览器只保证最基本的功能。咋一看两个概念差不多,都是在关注不同浏览器下的不同体验,以及这种不同造成的 工作流程的差异。渐进增强progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。使用CSSdisplay!none属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility!hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。注释:允许使用负值。如果使用负值,那么首行会被缩进到左边。使用一个较大的负值进行缩进的话,文字将被隐藏,如-9999emletter-spacing属性与word-spacing的区别在于,前者是修改字母的间隔,后者是修改单词或单个文字的间隔text-transform属性处理文本的大小写。这个属性有 4 个值:p标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别。p、div等指的是HTML分隔符,而元素则是由一对开始结束标签构成的,用来包含某一些内容“伪元素”,顾名思义。它创建了一个虚假的元素,并插入到目标元素内容之前或之后。插入的元素默认情况下是内联元素,如果你要为其设置宽高等属性,你需要将他定义为块级元素注入的内容将是有关联的目标元素的子元素,但它会被置于这个元素的任何内容的“前”或“后”。那么如何让关键选择器更有效,性能化更高呢?其实很简单,主要把握一点“越具体的关键选择器,其性能越高”浏览器读取你的选择器,遵循的原则是从选择器的右边到左边读取。换句话说,浏览器读取选择器的顺序是由右到左进行我们在ul下设置color属性,并不会使ullia下的a的字体发生样式的改变,但会使li下的字体样式发生改变对内联元素设置float和absolute属性,可以让元素脱离文档流,并且可以设置其宽高。浮动框可以左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘。因为浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。不仅性能低下而且代码很脆弱,html代码和css代码严重耦合,html代码结构发生变化时,CSS也得修改,这是多么糟糕,特别是在大公司里,写html和css的往往不是同一个人。在谷歌和火狐浏览器下,div与ul的默认顶底部间距为20px,ul始终包裹着li,ul的高度由li撑起,块级元素的宽度默认为浏览器宽度。li距离ul左边有一小段间距,用来存放无序列表的小圆点(这里设置了list-style !none)。定义一张图片也要为其设置宽高属性,否则无法进行定位设置,同理,很多元素必须设置其宽高属性才能进行定位块级元素盒子会扩展到与父元素同宽,所有块级元素的父元素都是body,而它的宽度默认与浏览器窗口一样宽(当然有少量边距)。css怎么学因为块级元素始终与浏览器窗口同宽。这样一来,一个块级元素旁边也就没有空间容纳另一个块级元素了。父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%,或者子元素相对左移动-50%也就可以了。嵌入的css样式是放在HTML文档的head元素中的,这点想必大家都知道,这里就不赘述了。链接样式的作用范围可以是整个网站。只要使用link标签把样式表链接到每个页面,相应的页面就可以使用其中的样式,除了link方法外,还可以使用@import指令@import指令必须出现在样式表中其他样式之前,否则该链接的文件不会被加载不要像使用ID一样,为每个类都指定一个不同的类名,然后再为每个类编写规则。如果你有这种随意使用类的习惯的话,那么,你还不了解继承和上下文选择符的作用。继承和上下文选择符(后代选择器)能让不同的标签共享样式,从而降低你需要编写和维护的css量。每一个元素都会在页面上生成一个盒子,因此,HTML页面实际上就上由一堆盒子组成的。默认情况下,每个盒子的边框是不可见的,背景也是透明的。垂直方向上的外边距会叠加,假设有3个段落,前后相接,而且都应用以下规则:第一段的下外边距与第二段的上外边距相邻,你可能认为它们之间的外边距是80px,但实际的间距却是50px。像这样的上下外边距相遇时,它们就会相互重叠,直至一个外边距碰到另一个元素的边框。因此,在这里,第二段较宽的上外边距就会碰到第一段的边框。也就是说,css怎么学较宽的外边距决定两个元素最终离多远。这个过程就是外边距叠加。从现在开始,“元素”和“盒子”从现在起代表了同一个意思。如果我们不设置块级元素的width属性,那么这个属性的默认值是auto,结果会让元素的宽度扩展到与父元素等宽。- 固定宽度布局的大小不会随着用户调整浏览器窗口大小而变化,一般是900到1350px像素宽。其中960像素最常见,因为这个宽度适合所有现代显示器,而且能被16,12,css学10,8,6,5,4和3整除,容易计算等宽分栏。 - 流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能更好地适应大屏幕,但同时也意味着放弃会页面某些方面的控制,比如随着页面宽度变化,文本行的长度和页面元素之间的位置关系都可能变化。 - 弹性布局是在浏览器窗口变宽时,不仅布局变宽,而且所有内容元素的大小也会变化,不过这种布局太过复杂,不好实现。习归纳总结CSSsprites是指把网页中很多小图片(很多图标文件)做成按规律排列的一张大图上,在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。使用CSS sprites,会将所有的小图片整合到一张图片中,网页加载只需要对一张图片进行请求,CSS再通过坐标的形式定位每一个小图片显示出来。这样做的好处是,大大减少http请求数,提高网页加载速度。隐藏网页元素的方法有很多,比如设置display!none,或是使用全透明(opacity)。在设置文本的时候,有时并不希望文本丢失,而通常是把文字转移到屏幕外面,浏览器是可以检测到的。rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,而rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)EnjoyCSS能创建活跃,超棒的实例,EnjoyCSS生成器大大简化了自定义类声明。EnjoyCSS是众多CSS工具中非常有用的,也是开发者和设计师工具箱必备的利器之一。它能加快工作流,简单易用,不需要编码就能整合丰富的图形样式到简单的UI。

上一篇:怎样学?“数字化教育与未来大讲堂”开讲?疫

栏    目:CSS

下一篇:学习DIV+CSS网页制作的流程及如何学习CSS?

本文标题:css学习归纳总结

本文地址:http://www.intnet.net/wangyezhizuo/CSS/1489.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:78955 | 邮箱:78955#qq.com(#换成@)

Copyright © 2011-2020 intnet编程教程网 版权所有