前端开发 04 CSS属性

前端开发 04 CSS属性

CSS的属性是实现各种CSS效果的关键.通过对不同的标签应用不同的属性以及将其组合起来,就可以实现各种效果. CSS的属性很多,但最重要的是搞清楚CSS的盒模型,以及这些属性会在什么程度上在盒模型内展示,从而达到自己想要的效果. 字体属性 font-family 使用字体家族,浏览器会按照字体顺序查

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盒模型 在浏览器中,每一个标签实际展现,都是一个盒子.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的百分比是按照父元素宽度来的,使用好了可以很方便的排版.
LICENSED UNDER CC BY-NC-SA 4.0
Comment