CSS基础（二）

CSS基础（二）

• 核心属性
• 盒子模型
• 定位
• 锚点
• 滤镜

---

核心属性

(1)文本样式

{font-size:12px/14px/16px;}
//字号
//属性值为数值型时，必须给属性值加单位，属性值为0时除外。
//单位还可以是pt，9pt=12px。
//单位还可以是em,1em=16px,0.75em=12px。


{font-family:"字体1","字体2";}
//文本字体
//当字体是中文字体时需加引号。
//当英文字体中有空格时需加引号如“Times New Roman”。


{font-weight:bolder/bold/normal/100-900;}
//加粗
//其中100对应最轻的字体变形，而900对应最重的字体变形。
//100-500常规字体。
//600-900加粗字体。


{font-style:normal常规字体/italic/oblique倾斜;}
//倾斜
//italic和oblique都表示倾斜，oblique的幅度要大一点。


{line-height:normal/数值;}
//行高
//将行高设置成元素的高度可以实现字体垂直居中。
//当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位。
//当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下任意位置的定位。


{color:颜色值;}
//颜色
//当表示三原色的三组数字同时相同时，可以缩写为三位。
//当用十六进制表示颜色值时，需要在颜色值前加“#”。


{text-decoration:none/underline/overline/line-through/blink;}
//文本修饰
//none:没有修饰
//underline:添加下划线
//overline:添加上划线
//line-through:添加删除线
//blink：闪烁


{text-transform:none/capitalize/uppercase/lowercase;}
//none无转换
//capitalize首字母大写
//uppercase全都大写
//lowercase全都小写


{text-align:left/right/center/justify;}
//水平对齐方式。


{vertical-align:top/bottom/middle;}
//垂直对齐方式。


{text-indent:value;}
//首行缩进
//text-indent可以取负值。
//text-indent属性只对第一行起作用。


{letter-spacing:value;}
//字间距
//控制英文字母或汉字的字距。


{word-spacing:value;}
//词间距
//控制英文单词词距。


{layout-flow:horizontal/vertical-ideographic;}
//文本流控制
//horizontal:自左向右
//vertical-ideographic:自上而下


//font属性的简写：字号，加粗，行高，字体
//顺序: font-style font-weight font-size/line-height font-family
//简写时,font-size和line-height只能通过斜杠/组成一个值，不能分开写。
//这种简写法只有在同时指定font-size和font-family属性时才一起作用。
//如果没有设定font-weight,font-style,他们会使用缺省值。

(2)列表的样式

{list-style-type:disc/circle/square/none;}
//列表符号样式
//disc(实心圆)
//circle（空心圆）
//square(实心方块)
//none(去掉列表符号)
//不要样式时简写list-style:none;

{list-style-image:url(所使用图片的路径及全称);}
//使用图片作为列表符号


{list-style-position:outside/inside;}
//定义列表符号位置

(3)边框

{border-style:solid/dashed/dotted/double/none;}
//solid:实线，dashed:虚线，dotted:点状线
//double:双线，none:没有边框


{border-width:value;}
//边框的粗细


{border-color:颜色值;}
//边框的颜色


//border-top：上边框
//border-bottom:下边框
//border-left:左边框
//border-right:右边框


//简写：粗细+线性+颜色

(4)背景

{background-color:颜色值;}
//背景颜色


{background-image:url(背景图片的路径及全称);}
//背景图片
//容器尺寸等于图片尺寸，背景图片正好显示在容器中。
//容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素。
//容器尺寸小于图片尺寸，只显示容器/元素/范围以内的背景图。


{background-repeat:no-repeat/repeat/repeat-x/repeat-y;}
//背景图平铺
//no-repeat:不平铺
//repeat：平铺
//repeat-x：横向平铺
//repeat-y ：纵向平铺


{background-position:left/center/right/数值 top/center/bottom/数值;}
//背景图位置
//第一个值表示水平位置，第二个值表示垂直位置。
//当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置都在中间
//当元素小图片大时，向右方向，向下方向是负值


{background-attachment:scroll(滚动)/fixed(固定);}
//背景图的固定


//简写：背景颜色+背景图+平铺属性+位置

(5)浮动

{float:none/left/right;}
//浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
//浮动框是脱离了普通的文档流

盒子模型

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都以拥有可像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。

(1)margin

边界：margin,在元素外边的空白区域，被称为边距。

margin-left:左边界
margin-right:右边界
margin-top:上边界
margin-bottom:下边界

属性值的4种方式：

四个值：上 右 下 左
三个值：上 左右 下
二个值：上下 左右
一个值：四个方向

可单独设置一方向边界，如：margin-top:10px;

*margin值的解析：左右边界累加，上下边界重合。

(2)padding

填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白。

padding-left:左填充
padding-right:右填充
padding-top:上填充
padding-bottom:下填充

属性值的4种方式：

四个值：上 右 下 左
三个值：上 左右 下
二个值：上下 左右
一个值：四个方向

可单独设置一方向填充，如：上方向padding-top:10px;

padding属性需要添加在父元素上。

padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值。

(3)border

边框：border,网页中很多修饰性线条都是由边框来实现的。
属性见核心属性(3)边框。

定位

1.语法：

{position：static /absolute/relative/fixed;}
//static：默认值
//absolute：绝对定位
//relative ：相对定位
//fixed：固定定位

2.属性

(1)static：默认值，无特殊定位，对象遵循HTML原则。

(2)absolute：绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据html(根元素)，而其层叠通过z-index属性定义。

(3)relative ：相对定位，对象不可层叠，将依据right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置(相对自己原来的位置偏移)。

(4)fixed：固定定位，对象定位遵从绝对定位方式（absolute）；但是要遵守一些规范（IE6浏览器不支持此定位）根据浏览器的窗口来定义自己的位置。

3.绝对定位和相对定位的区别

(1)参照物不同绝对定位的参照物是包含块，相对定位的参照物是元素本身位置。

(2)绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

4.定位元素层叠属性：

语法：z-index : auto | number，检索或设置对象的层叠顺序。

auto：默认值。遵从其父对象

number:无单位的整数值。可为负数

说明：

(1)较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。
(2)此属性仅仅作用于 position 属性值为 relative 或 absolute,fixed 的对象。

锚点

定义：是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。

命名锚点链接的应用：

1)命名锚点的作用：在同一页面内的不同位置进行跳转。

2)给元素定义命名锚记名

语法：<标记 id=”命名锚记名”>