css table 固定列_「Web前端开发进阶篇」CSS高级语法

在CSS高级语法中,我们将不再用最直接的样式属性来定义文档元素的样式,我们将结合多种属性来完成多样化的样式添加,使得页面布局更加灵活多变。

【引言】

比如说CSS居中,我们不再用text-align:center这样的属性让元素内容居中,那么想让元素居中,得配合其他属性来完成,因为在CSS定位中,它是无法单一的完成我们想要的居中效果和其它的对齐效果。其次,还有CSS尺寸问题,比如说如何定义元素尺寸,让它跟着你想要的效果走。还有别的语法,例如:CSS分类CSS导航栏CSS图片库CSS图片透明CSS媒介类型、还有其他一些注意事项等等语法,具体的我下面跟大家详说。

css table 固定列_「Web前端开发进阶篇」CSS高级语法_第1张图片

CSS高级语法

CSS对齐

在CSS中,可以使用多种属性来水平垂直对齐元素。

1、使用 margin 属性来水平对齐

可通过将左边距和右边距设置为“auto”来对齐元素。但前提是必须声明!DOCTYPE,否则在IE8是无效的。这样就可以居中元素了,例如:

css table 固定列_「Web前端开发进阶篇」CSS高级语法_第2张图片

使用 margin 属性来水平对齐

提示:如果宽度是 100%,则对齐没有效果。

2、使用 position 属性进行左和右对齐

使用这种方法在兼容性这一块无疑是最好的方法了,但当使用 position 属性时,请始终设置 !DOCTYPE 声明,在IE8 以及更早的版本存在一个问题。如果容器元素(在我们的案例中是

)设置了指定的宽度,并且省略了 !DOCTYPE 声明,那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。例如:
css table 固定列_「Web前端开发进阶篇」CSS高级语法_第3张图片

使用 position 属性进行左和右对齐

3、使用 float 属性来进行左和右对齐

当使用 float 属性时,IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明,那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时,请始终设置 !DOCTYPE 声明:例如:

css table 固定列_「Web前端开发进阶篇」CSS高级语法_第4张图片

使用 float 属性来进行左和右对齐

CSS 尺寸

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。

1、使用像素值或百分比设置图像的宽度、高度

其实就使用CSS的widthheight属性来设置元素的宽和高,单位用“px”,很简单,例如:

css table 固定列_「Web前端开发进阶篇」CSS高级语法_第5张图片

2、使用像素值或百分比设置元素的最大/最小宽度、高度

当然,CSS中也有给元素设置最大/最小宽度高度的属性,分别是max-width、max-height和min-width、min-height。也可以使用不同的单位来设置,例如:

css table 固定列_「Web前端开发进阶篇」CSS高级语法_第6张图片

3、使用像素值或百分比设置元素的行间距

CSS中也可以使用line-height属性来设置元素内容的行间距,让其内容排版更加的整洁。例如:

css table 固定列_「Web前端开发进阶篇」CSS高级语法_第7张图片

CSS分类

CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。

1、CSS display 属性

display 属性规定元素应该生成的框的类型。下面我来说说display:具体的值。

display:

1.1、none:此元素不会被显示。

1.2、block:此元素将显示为块级元素,此元素前后会带有换行符。

1.3、inline:默认。此元素会被显示为内联元素,元素前后没有换行符。

1.4、inline-block:行内块元素。(CSS2.1 新增的值)

1.5、list-item:此元素会作为列表显示。

1.6、run-in:此元素会根据上下文作为块级元素或内联元素显示。

1.7、compact:CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。

1.8、marker:CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。

1.9、table:此元素会作为块级表格来显示(类似

2.0、inline-table:此元素会作为内联表格来显示(类似

2.1、table-row-group:此元素会作为一个或多个行的分组来显示(类似

)。

2.2、table-header-group:此元素会作为一个或多个行的分组来显示(类似 )。

2.3、table-footer-group:此元素会作为一个或多个行的分组来显示(类似

)。

2.4、table-row:此元素会作为一个表格行显示(类似

)。

2.5、table-column-group:此元素会作为一个或多个列的分组来显示(类似

)。

2.6、table-column:此元素会作为一个单元格列显示(类似

)

2.7、table-cell:此元素会作为一个表格单元格显示(类似

和 )

2.8、table-caption:此元素会作为一个表格标题显示(类似

)

2.9、inherit:规定应该从父元素继承 display 属性的值。

2、改变鼠标光标

可以用一些特有的属性来改变鼠标光标,例如:

css table 固定列_「Web前端开发进阶篇」CSS高级语法_第8张图片

CSS 图像透明度

定义透明效果的 CSS3 属性是 opacity。首先,我们将展示如何通过 CSS 来创建透明图像。例如:

css table 固定列_「Web前端开发进阶篇」CSS高级语法_第9张图片

效果如下:

css table 固定列_「Web前端开发进阶篇」CSS高级语法_第10张图片

opacity对比

CSS2 媒介类型

说白了就是我们的响应式设计了,在不同的终端媒体显示不同内容,让我们的网页在任何终端媒体上能够良好的显示,保证页面在不同的媒体不走样。

@media 规则使你有能力在相同的样式表中,使用不同的样式规则来针对不同的媒介。例如:

css table 固定列_「Web前端开发进阶篇」CSS高级语法_第11张图片

1、不同的媒介类型

1.1、all:用于所有的媒介设备。

1.2、aural:用于语音和音频合成器。

1.3、braille:用于分页的盲人用点字法打印机。

1.4、embossed:用于分页的盲人用点字法打印机。

1.5、handheld:用于小的手持的设备。

1.6、print:用于打印机。

1.7、projection:用于方案展示,比如幻灯片。

1.8、screen:用于电脑显示器。

1.9、tty:用于使用固定密度字母栅格的媒介,比如电传打字机和终端。

2.0、tv:用于电视机类型的设备。

CSS 注意事项

说一下使用CSS是尽量避免使用的技术。

1、Internet Explorer Behaviors

Internet Explorer 5 引入了行为 (behaviors)。behaviors 是一种通过使用 CSS 向 HTML 元素添加行为的方法。

为什么要避免它?只有 Internet Explorer 支持 behavior 属性。例如:

h1 { behavior: url(behave.htc) }

2、尽量避免多个样式表

在开发中,我们很多小白会去这样写,就是一个页面一个CSS,导致最后写完的时候,有很多的样式表,应用起来相当麻烦,对优化也是不友好的,我们应该尽可能的去优化我们的CSS,比如,公共的样式放在一个样式表里,头部放一起,底部放一起,总之找相同点来定义我们的CSS样式表。

3、写出“好”的CSS

不能用“对”和“错”来评判,我们会用“好”、“比较好”、“很烂”、“非常棒”这样的字眼来评判。我们在使用CSS样式表的时候,经常按下面来分类。按功能划分:控制字体的css集中在font.css文件里。按控制颜色的css集中在color.css文件里。按控制布局的css集中在layout.css文件里。按区块划分:将头部的css放在head.css中。
将底部放在foot.css中。
将侧边栏放在sidebar.css中。
将主体放在main.css中。


CSS高级语法今天就讲解到这里了,下一篇讲解CSS优先级,希望大家不要放弃学习哦!

PS:

本文为‘Web前端进阶指南’原创,手动码字不易,小伙伴们别忘了顺手点个赞加个关注哈,有什么不懂的下方留言评论或私信。谢谢大家哈!

你可能感兴趣的:(css,table,固定列)