前端学习随笔4 背景,边框,列表样式,链接样式

一 心得体会

前面学习了HTML元素构建网页结构,学习了css文字属性和文本属性,今天在页面修饰方面更进一步,学习到了背景、边框、列表、链接这些方面的样式设置,发现了一些以前遗漏的知识点,比如背景样式中的background-attachment属性,这个以前基本没用到,看了之后觉得效果还是可以的,再今后的页面中可以使用到。最大的收获还是image的使用,突然发现image还可以用到边框、文本甚至列表中,觉得很神奇了,这个可以单独写一篇学习笔记了。

二相关知识点

1 背景(background)

要了解背景应用,我们需要先搞清楚盒模型。盒模型分为标准盒模型和怪异盒模型(ie盒模型)。

  1. 标准盒模型中width/height为内容的宽/高,盒子总宽度/高度=width/height+padding+border+margin。
  2. 怪异盒模型中width/height为内容+padding+border的宽/高,盒子总宽度/高度=width/height+margin。

在最初的浏览器中,不同浏览器会根据自己来选择盒模型模式,为了达到兼容的目的,我们一般在页面上加上一个DOCTYPE的声明标签,这样就都默认使用标准盒模型(不考虑ie8及以下远古版本)。那如果我们需要使用怪异模型怎么办呢?css3给我们增加了一个很棒的属性——box-sizing,其语法为

box-sizing :  content-box  || border-box || inherit;

当属性值为content-box时,盒模型为标准盒模型;为border-box |时,盒模型为怪异盒模型;为inherit时,将从父元素继承。
注:width/height/border/padding都是单独占用空间的,而margin并非单独占用空间,比如两个相邻的div的margin都是200px,那么这两个div中间的间距只有200px。

有了上述的相关知识后我们再来看背景,背景应用的范围时box-sizing的范围,其主要属性及属性值如下:

/*为背景设置一个纯色*/
background-color:  | transparent(默认) | inherit
/*指定在元素的背景中出现的背景图像(这可以是静态文件,也可以是生成的渐变)*/
background-image:  | none(默认) |inherit
/*指定背景应该出现在元素背景中的位置*/
background-position: position-x position-y
/*指定背景是否应该被重复(平铺)*/
background-repeat: repeat(默认) | repeat-x | repeat-y | no-repeat | inherit
/*当内容滚动时,指定元素背景的行为,例如,它是滚动的内容,还是固定的?*/
background-attachment: scoll(默认) | fixed | local
/*在一行中指定以上五个属性的缩写*/
background:[||||||||] | inherit
/*允许动态调整背景图像的大小*/
background-size: contain | cover | 

注:

  1. 所有背景属性不能继承!!!
  2. 背景还可以时渐变色,示例代码如下(更多信息请查找gradient属性):
/* linear-gradient属性为css3属性,对浏览器版本有要求,不过可以满足目前大部份最新浏览器,ie8及以下版本浏览器请自行查找兼容方法*/
background: linear-gradient(to bottom,  #000000 0%,#ffffff 100%);
  1. 背景图和背景色应同时指定,这样背景图不可用时背景色会替代
  2. 背景位置background-position通常情况为两个参数:横向位移和竖向位移,可以是数值或者百分比(默认均为0%),偏移后的坐标点为背景图中心的坐标点。当然也可以用top/bottom/center,left/right/center这两组参数替代;甚至还可以只用top/bottom/center/left/righ中的一个参数替代,这样意味着另外一个方向上的参数为center。例如background-position:top的含义其实是background-position:top center或者background-position:center top

2 边框(border)

1.边框可以分开写(border-width),也可以合并写(border),还可以单边写(border-top)。
边框常用属性有:

border-width:  | inherit
border-style: none | hidden | dotted | solid | dashed | double | groove | ridge | inset | outset | inherit
border-color: 

合并的语法为:

border: border-width border-style border-color

单边(以上边框为例)的语法为:

border-top: border-width border-style border-color

注:当边框样式为 groove | ridge | inset | outset时,边框的颜色要适当淡一点,否则看不出效果

2.边框还可以加(椭)圆角,其语法为:

border-radius:  | 

length用数值表示圆形的半径(单数值)或者椭圆的半长轴,半短轴(双数值并用“/”分开),负值无效:

border-radius: 30px;  /*圆形*/
border-radius: 30px/60px;  /*椭圆*/

percrntage用百分比表示圆形的半径(单数值)或者椭圆的半长轴,半短轴(双数值并用“/”分开),负值无效:

border-radius: 30%;  /*圆形*/
border-radius: 30%/60%;  /*椭圆*/

注:当百分比有两个数值是,第一个数值是width的百分比,第二个数值是height的百分比。

定义(椭)圆角顺序是以左上角开始,按顺时间方向,跟padding/margin一样,border-radius可以简写。下面举两个例子可以清楚的看出border-radius的用法:

border-radius: 1em/5em;
/* 等价于: */
border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;
border-radius: 4px 3px 6px / 2px 4px;
/* 等价于: */
border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

3.边框图像(border-image)
这个暂时用的不多,准备下次总结图像的特殊使用方法时详解。

3 列表样式

基本属性如下:

  1. 符号样式(list-style-type):列表前标记的类型,其在ol和ul中有效,在dl中无效;主要属性值有 none | circle | square | decimal 等等,更多可以查看相关文档。注:ol和dl本质上就是list-style-type属性值不同。
  2. 列表符号位置(list-style-position):表明列表前面符号的位置,其属性值为 outside(默认)| inside。当属性值为outside时,列表符号不占内容位置,其位于padding中;当属性值为inside时,列表符号占用内容位置。
  3. 列表标记图像(list-style-image):用图像替代列表符号,其属性值为图片的url。注:list-style-image会覆盖掉list-style-type;我们也尽量不要使用这个属性,因为其尺寸不能改变,不能自适应屏幕大小,可以使用背景替代。

4 链接样式

链接样式其实就是该链接在不同的状态下显示的文本样式,具体的文本样式我们之前有讲过,这里就不赘述了,具体我们来说一说链接的几个状态及表示方式。

  1. a:link - 普通的、未被访问的链接
  2. a:visited - 用户已访问的链接
  3. a:hover - 鼠标指针位于链接的上方
  4. a:active - 链接被点击的时刻

通过以上伪类+样式可以设置链接在不同状态下的显示形式。

你可能感兴趣的:(前端学习随笔4 背景,边框,列表样式,链接样式)