Web培训

亿元级外企Web培训企业

  • 全国服务监督电话400-111-8989
  • CSS笔记整理

    发布:杜潮阳  来源:达内  时间: 2015年07月28日

  • 首先是长度单位:A.宽度、高度用px(像素),也可以用%(百分比)。建议使用固定值:width:200px;height:200px...

  • 整理于CSS笔记:

    关于CSS作用:A.快速维护页面元素的样式属性

    B.弥补HTML元素的属性不足

    CSS又被称作层叠样式表。

    关于CSS的元素属性:

    一:

    首先是长度单位:A.宽度、高度用px(像素),也可以用%(百分比)。建议使用固定值:width:200px;height:200px;

    B.字体大小用pt(磅)表示

    其次就是颜色单位:A.颜色的直译英文名称,如:red(红)、green(绿)、blue(蓝).....

    B.十六进制表示法:#ff0000

    C.简写十六进制:#f00

    D.RGB表示法:rgb(255,0,0)

    E.百分比RGB:rgb(100%,0%,0%)

    二:

    1.宽度和高度:

    大部分元素都会用到这两个属性-------> width(设置宽度)、height(设置高度)

    例:width:200px;height:200px;

    2.边框:

    border属性,设置边框的宽度、线性、颜色

    ,

    ,

    ,

    ,

    ......都有线性这个属性,我们最多用到的无疑就是在和

    中了。

    表格(table)和盒子(div)因为看不到它的大小,我们一般都会用border设置显示出边框线

    例:border:2px solid red;

    这样我们可以看到一个2个像素的红色实线出现在你的表格中。这样就可以清晰的看到表格样式了。

    在border中还可以给上下左右单独设置边框线:

    border-top:宽度 线型 颜色;border-bottom:宽度 线型 颜色;

    border-right:宽度 线型 颜色;border-left:宽度 线型 颜色;

    线性我们有三种:none(无)|solid(实线)|dotted(点划线)

    3.内边距

    就是设置表格或者盒子内的边距,可以设置单独上下左右和边框相同,这里不列举。

    例:padding-top:5px;上侧内边距

    padding:5px;四个方向的内边距都是5px

    padding:5px(上) 5px(左右) 5px(下);

    padding:5px(上) 5px(右) 5px(下) 5px(左);

    4.外边距

    设置外部的边距,可单独设置上下左右。

    例:margin-top:5px;上侧外边距

    margin:0 auto;(让外编剧为0,auto为网页自动计算居中)

    margin:5px(上下) 5px(左右);

    margin:5px(上) 5px(左右) 5px(下);

    margin:5px(上) 5px(右) 5px(下) 5px(左);

    5.控制元素的显示方式属性

    可以控制元素不显示,或者以什么方式显示出来。如果不显示在此元素style中加入即可:

    例:dispaly:none(不显示)|inline(内联对象)|block(块级对象);

    HTML的标记种类为----->内联对象:不能自然换行

    块级对象:可以自然换行

    默认为块级对象:

    ,

    ,,

    ,

    ,

    .....

    6.背景样式

    可以设置背景图片,背景颜色,图片的平铺方式,背景图片的位置

    设置背景样式(哪个部分不需要可以忽略不用写):

    例:background:背景颜色 背景图片 平铺方式 水平位置 垂直位置

    A.背景颜色就是color,上面有书写方式。

    B.背景图片----> url(图片地址) 一定要写 url 然后括号中写上图片地址

    C.平铺方式:no-repeat(不平铺)|repeat-x(x轴平铺)|repeat-y(y轴平铺)

    D.水平位置(left|center|right)

    E.垂直位置(top|center|bottom)

    7.浮动样式

    使表格或者盒子中的内容全部靠左或者全部靠右,一把导航页面都需要用到

    例:float:left|right;

    8.文本样式

    line-height:5px;设置行高

    text-indent:99px;设置首行缩进--------->首行缩进一般用于把按钮上的文本向后隐藏

    text-align:left|center|right;设置水平对齐方式

    cursor:pointer;设置浏览器中鼠标形状

    font-weight:normal|bold;设置文本加粗效果

    text-decoration:none|underline;设置文本下划线样式----->一般用于把超链接的下划线取消

    9.列表样式

    list-style:样式 url(图片地址) 位置(inside|outside);

    我们一般只设置一项,就是样式,其余可以忽略不写。

    例:list-style:none;把列表前面的实心圆或空心圆取消。用于ul,ol

    10.***定位属性***

    定位属性----->position:fixed(固定的)|absolute(绝对)|relative(相对);

    我们先说固定(fixed):固定定位根据屏幕所定位,但是会遮住下面的文本。所以我们通常很少用。PS:一般广告多的网站会用!

    A.相对定位(relative):相对定位是子盒子根据父盒子定位,父盒子移动,子盒子移动。

    这就是父盒子<---

    这就是子盒子<---

    子/父盒子可以不用是div元素,也可以是p,li,ul,ol.....

    B.绝对定位(absolute):绝对定位根据屏幕左上角定位。一般我们用绝对定位都是用在相对定位的子盒子中

    我们现在body中做出这么一个盒子:

  • 上一篇:更智能的JavaScript回调函数解析

    下一篇:初学前端心得体会

相关资讯
网站导航
2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56