Css杂谈

CSS是Cascading Style Sheets（级联样式表）的缩写。

CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

HTML可以用于为网站添加布局效果，但有可能被误用。而CSS则提供了更多选择，而且更为精确、完善。

制作CSS样式表为网站增添花样。

 

HTML用于结构化内容；CSS用于格式化结构化的内容。

 

采用CSS有哪些好处？

CSS是Web设计界的一次革命。CSS的具体优点包括：

通过单个样式表控制多个文档的布局；

更精确的布局控制；

为不同的媒体类型（屏幕、打印等）采取不同的布局；

无数高级、先进的技巧

----------------------------------------------------------------------------------------颜色与背景五属性---（颜色、图片，平铺、附着，位置）--------------------------------------------------------------------------------------------------------------------------

CSS属性color用于指定元素的前景色。

CSS属性background-color用于指定元素的背景色。

十六进制表示（比如#ff0000）

颜色名称（比如“red”）

RGB值（比如rgb(255,0,0)）

 

CSS属性background-image用于设置背景图像。

CSS属性background-repeat就是用于控制平铺的。

background-repeat:repeat-x
图像横向平铺

background-repeat:repeat-y
图像纵向平铺

background-repeat:repeat
图像横向和纵向都平铺

background-repeat:no-repeat
图像不平铺

 

CSS属性background-attachment用于指定背景图像是固定在屏幕上的、还是随着它所在的元素而滚动的。

background-attachment:scroll
图像会跟随页面滚动——非固定的

background-attachment:fixed
图像是固定在屏幕上的

CSS属性background-position来修改这一缺省设置，将背景图像摆放在屏幕上你觉得满意的地方。

background-position:2cm 2cm
图像被放置在页面内距左边2厘米、顶部2厘米的地方

background-position:50% 25%
图像被放置在页面内水平居中、离顶部四分之一处

background-position:top right
图像被放置在页面的右上角

 

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

 

 

------------------------------------------------字体---------------------------------------------------------------

 

font-style | font-variant | font-weight | font-size | font-family

样式|变化|浓淡|大小|族类

-------------------------------------------------文本-----------------------------------------------------------------

文本缩进[text-indent]

文本对齐[text-align]

文本装饰[text-decoration]

字符间距[letter-spacing]

文本转换[text-transform]

--------------------------------------------------------链接--------------------------------------------------------------------------

------------------------------------------------------盒模型---------------------------------------------------------------------------

网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

每个盒子都有：边界、边框、填充、内容四个属性；

每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。

内容（CONTENT）就是盒子里装的东西；

而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；

边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

填充只有宽度属性，可以理解为生活中盒子每个HTML标记都可看作一个盒子；