多语言展示
当前在线:129今日阅读:2今日分享:38

怎样学习css,与css布局?

CSS(Cascading Style Sheet,可译为“层叠样式表”或“级联样式表”)是一组格式设置规则,用于控制Web页面的外观。通过使用CSS样式设置页面的格式,可将页面的内容与表现形式分离。页面内容存放在HTML文档中,而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分,通常为文件头部分。将内容与表现形式分离,不仅可使维护站点的外观更加容易,而且还可以使HTML文档代码更加简练,缩短浏览器的加载时间。
css层叠样式的特点
1

便于页面的修改。

2

便于页面风格的统一。

3

减少网页的体积。

4

层叠样式表极大地提高了工作效率  样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。   由于允许同时控制多重页面的样式和布局,CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者,你能够为每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。

5

表现和内容相分离   将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。

6

提高页面浏览速度   对于同一个页面视觉效果,采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。

7

易于维护和改版   你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

css层叠样式语法
1

css语法: selector {property: value} (选择符 {属性:值})   例子:body {color: black},此例的效果是使页面中的文字为黑色。

2

选择符组    你可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义:   h1, h2, h3, h4, h5, h6 { color: green } (这个组里包括所有的标题元素,每个标题元素的文字都为绿色)

3

类选择符    用类选择符你能够把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。假如你想要两个不同的段落,一个段落向右对齐,一个段落居中,你可以先定义两个类:   p.right {text-align: right}

4

ID选择符    在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式。   ID选择符的应用和类选择符类似,只要把CLASS换成ID即可。将上例中类用ID替代,ID只能在一个页面中出现一次,而class可以多次运用.

注意事项
1

用class_name方式写类名。    以前喜欢用class-name写,不过好像两样也没什么差别。但我比较反对用className写类名,因为始终对浏览器大小写敏感的问题抱有怀疑态度。但是id我会写成驼峰式,

2

样式都用class而不用id。    有三个理由,一,id不可以重复,所以用class的话,可以肆无忌惮的用无数次。二,id的优先级太高,若是写了一个#page_contenta {color:#f60},那你完蛋了,里面要改链接颜色,都必须加上#page_content才能越过这个优先级。三,id专门留给JS用,这样才符合表现与行为分离的原则。所以id我用驼峰式,也是为了体现这一点。

3

margin和padding,尽量省略最后一个值。    比如margin: 20px 10px 5px 10px; ,左右值是一样的,就应该省略掉最后一个值,写成margin: 20px 10px5px; 这样到时候要改左右间距,改一个就好,免得改漏了。其实这个问题虽然很细小,但是可以看得出对margin四个值省略规则的熟练程度。对于有的浏览器如果把margin:20px 10px 5px; ,这样浏览器会解析成上下间距为20px跟5px; 左右间距均为10px;。

推荐信息