CSS的属性是实现各种CSS效果的关键.通过对不同的标签应用不同的属性以及将其组合起来,就可以实现各种效果.
CSS的属性很多,但最重要的是搞清楚CSS的盒模型,以及这些属性会在什么程度上在盒模型内展示,从而达到自己想要的效果.
| 字体属性 | |
| font-family | 使用字体家族,浏览器会按照字体顺序查找可用字体,如果都找不到,就采用默认字体 |
| font-size | 字体大小可以用比例或者像素px表示,如果设置inherit表示继承父类的字体 |
| font-weight | 设置字的粗细,可以设置100-900粗细值,具体是什么效果,需要看字体文件的支持程度,此外还可以指定bold,bolder,normal,light等 |
| color | 表示文字的颜色(不是其他颜色比如背景色),可以用文字,RGB或者#6位16进制数字表示,还可以用rgba来指定颜色和透明度 |
| 文本属性 | |
| text-align | 设置文本的水平对齐方式,默认是左对齐,可以设置为right靠右,center居中和justify两端对齐 |
| text-decoration | 设置文本的装饰效果,none表示去掉装饰效果,可以增加上划线,下划线,删除线,blink闪烁文本,也可以设定继承.最常用的是去掉a标签的下划线 |
| text-indent | 设置首行缩进,凡是表示大小的东西,都可以用百分比,像素,cm等方式表示.要看页面是如何设置的 |
| 背景属性 | |
| background-color | 设置背景颜色.内联元素的背景就是自己的宽度,而块级默认是填满整个盒子外框的内部区域的 |
| background-image | 设置图片的url,以使用背景图片 |
| background-repeat | 结合背景图片来使用,默认为repeat,平铺图片,可以repeat-x,repeat-y仅水平或者垂直重复,no-repeat不重复.重复背景可以用很小的一块背景去填充整个页面背景,而没有必要采用一张大背景图 |
| background-position | 这个是设置背景图片的起始位置,详细看这里 |
| background-attachment | 设置背景图片是否随着页面滚动 |
| 边框属性 | |
| border-color | 设置边框的颜色 |
| border-style | 设置边框的样式 |
| border-width | 设置边框的粗细 |
| border-radius | 设置边角的曲度,可以将直角边框改成圆角边框 |
| 单独设置 | 上边的这些属性,都可以单独应用在一边上,通过border-bottom/top/left/right来对一个边框指定样式 |
| 定位属性 | |
| display | 这是个非常重要的属性,设置为none,该元素不会显示,也不会占用任何页面空间.设置为block,表示显示为块级元素,之后可以对其设置宽和高,如果设置的宽度小于页面宽,默认靠左,右边会用margin来填满.设置为inline表示显示为行内元素,此时设置元素的width、height、margin-top、margin-bottom和float属性等都不起作用.设置为inline-block则同时具有两种特点.在盒子模型的时候还会解释 |
| margin | margin也是盒模型非常重要的元素,用以控制外边距,一般可以按照上右左下的顺序用margin来写,上下居中对其一般用margin: 0 auto |
| padding | 内填充,用法和margin一样,其他定位属性都非常重要,需要单独来讲 |
CSS盒模型
在浏览器中,每一个标签实际展现,都是一个盒子.CSS盒模型是页面排版的关键要素.如果是内联元素,是无法设置width和height的.对于块级元素,如果设置的width小于页面宽度,是会自动用右边距填充,因为这个因素,所以可以用两侧margin为auto来实现块级元素的居中.如果让内联元素想居中,可以用块级元素包含,然后对其设置左右margin.
如果标签嵌套,上一个标签内的element的部分,就是被嵌套标签的边框以内的部分,这也是要记住的一点.
浮动
浮动主要是为了解决布局问题,一个块级元素,如果不浮动,则默认占据整个宽度,即使设置宽度,也会用margin来占据一行.如果想要实现块级元素占据同一行,肯定不可能用display:inline,这样就没法设置高度和宽度.
浮动就可以解决这个问题:在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。块级框是可以设置浮动的方向,向左或者向右,直到外边缘碰到另外一个块级框或者浮动框边上.这样可以实现块级元素显示在一行内的效果.此外,浮动的元素会从页面的普通流里剔除,因此会阻挡那些不浮动的块级元素,不过行级元素不受影响.
clear属性也是很重要的,是指定左侧,右侧或者两侧都不允许出现浮动元素.通常用来插入一个无内容的div,使用clear来解决父元素塌陷的问题.
Overflow标签
overflow标签是解决内容溢出的问题,经常用来处理一些特殊效果.常用的就是用div套一个图片,设置div的边框,然后设置overflow为hidden,显露出裁剪后的样子的图片
| 值 | 内容 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
定位 position 属性
position属性的使用方法是,先用position属性规定定位的方式,然后用top,left,right,bottom等来指定具体的位置.
默认的值是static,浏览器会将这种对齐的元素一个接一个的解释并排列在页面中,是处于文档流中的元素.static元素是不能作为绝对定位的参照物,而且设置top.left等对齐属性是没有效果的.
相对定位relative,指的是相对自己的位置往x或者y方向移动,注意元素依然占据原来自己的位置,也就是依然处于文档流中,只不过显示出的地方进行了偏移.也就是说元素原来的位置,其他普通流元素是无法覆盖的.
绝对定位absolute是指将元素从文档流中去除,然后直接根据最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置就相对于最初的包含块（即body元素).绝对定位的元素会变成块级元素,不管原来标签的性质.
绝对定位根据最近的已定位祖先元素定位,这里的已定位祖先元素包括绝对定位,相对定位和固定定位.绝对定位和固定定位都好理解,对于相对定位,绝对定位的起始点不是相对定位元素的原来位置,而是其实际位置的左上角.
固定定位fixed是指元素脱离文档流,此时top left right 等属性,是相对于窗口的定位.一般用于一些返回顶部或者固定的链接,也用于弹出一些特效.
Opacity 透明度属性
取值从0-1,设置之后,元素和子元素都可以改变透明度.是整个元素改变透明度.
rgba里的透明度,只能修改背景色的透明度.
Z-index
这个表示竖向的深度,数值越大,显示的越靠近用户.只能作用于定位过的元素.
一般多用在盖板模态框使用,比如跳出来一个登陆框,页面其他部分会被较暗的灰色覆盖.
编写BLOG和小米页面的心得
在html和body里加上height = 100%,即可解决页面颜色不填充到最底部的问题.
多个类安排:在定义类名的时候,可以用空格区分多个类,比如所有需要浮动的类,都可以加上fl,fr类,然后就可以减少大量重复的CSS代码.
使用好line-height与高度搭配,可以让居中简单一些.然后width的百分比是按照父元素宽度来的,使用好了可以很方便的排版.
