前言
最近在学习牛腩老师的视频,同时也看了网上的电子书,写下这篇总结。有错误之处多多指点。
概述
CSS有个别致的名字:层叠样式表(Cascading Style Sheets)。它的功能十分的强大。它是和我们的Web语言结合在一起使用的,它的主要目的就是为Web服务。如果没有Web文档,那么CSS就没有用武之地了。并且如果你的界面只是一些简单的元素,那么CSS也没有使用的必要。
强大
对比下面向对象的思想。
封装是它的强大之处,我们想要给一大堆元素加上某些效果。我们只需要把这些效果代码封装到一个CSS文件中。这一大堆元素就可以达到我们想要的效果了。下面我们要为上万个元素文本加上颜色。那么看下面代码。
<h2><font color ="red" 这是红色!</font></h2> //我们需要些上万个类似于这样的代码
而使用CSS后,我们只需要加上类选择器就可以了。
继承是它的强大之处,元素的样式会传递到它的下有元素,就想面向对象里的父类和子类一样,父类元素会把它的样式效果传递给子类元素,直到最后。
多态也是它的强大之处。这里的层叠是什么意思呢。就像是面向对象里的子类和父类一样。CSS里有类选择器(class)和ID选择器(id),在他们的下面还可以继续拥有类选择器和ID选择器。而且新的样式会依据CSS的规则覆盖旧的样式,就像子类的多态一样。
类选择器和ID选择器
类选择器:关键字是class,其中标记为 点。类选择器不是唯一的,可以运用到不同的元素上。
ID选择器:关键字是 id,其中标记为#。ID选择器是唯一的,像卡号一样是唯一的。只能运用到一种元素上。
行内元素和块级元素
行内元素:在界面生成一个行内元素时,该元素只占据它内容的大小。
块级元素:在界面生成一个块级元素时,该元素占据网页一行。
两个元素单独很好理解,但是放到一块就难理解了,两个元素的之间转换的确是一个难点啊。需要多多实践才能体会。
盒子模型
为什么叫做盒子呢,因为这么多的元素都是方块吗。盒子模型是指网页上每个元素的内外边距,边框的大小组合成的一个方状盒子。非常喜欢这个模型,每次界面的文本框对不齐了就找它。
浮动和定位
浮动类似于VB格式中的左对齐等。在界面我们都会使用到让元素左对齐或右对齐等。而浮动就是干对其这个事的。我们可以理解为把元素移动到对齐的地方。不过浮动是讲规则的。每个浮动元素都不可超过前一个浮动元素的边界。
定位就是把原有的元素重新安排位置,来达到我们的某种效果。
列表与表格
当然也少不了这两个东西了。这两个东西用的还是很频繁的,不过在设计表格和列表时多少多少都有些麻烦。一般都是和控件结合一起来用。比如数据库中的信息,每个数据库中的表不就是一个表格吗?把datagridview控件和网页中的表格结合在一起,很简单的就显示了数据库中的信息。
总结:CSS和html的结合使Web的设计走向了一个新的起点,用好CSS选择器,让自己的界面更加华丽。