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=”命名锚记名”>