第一课:样式属性

style 样式:
style样式不仅可以直接在<body>中设置成整个网页的样式、格式;为了将样式、格式多样化,也可以将style单独抽出来,作为一个独立的个体,放在<head>..</head>中来分别设置不同元素、标签的格式和样式。

这样做出来的效果和在<body>中设置的格式是一样的,但有所区别的是单独把style写出来的样式可以只对某个或某几个标签有效,有效防止编写重复、费时和修改麻烦等;

还可以在style中对设置的格式的标签进行命名,直接在需要修改的标签处引用此样式,直接用class="命名的名称";

1、背景与前景

background-color:#90;    /*背景色,样式表优先级高*/

background-image:url(路径);  /*设置背景图片(默认)*/

background-attachment:fixed; /*背景是固定的,不随字体滚动*/

background-sttachment:scoll;  /*背景随字体滚动*/

background-repeat:no-repeat;  /*no-repeat,不平铺;repeat,平铺;repeat-x,横向平铺;repeat-y,纵向平铺*/

background-position:center;  /*背景图居中,设置背景图位置,repeat必须为“no-repeat”*/

background-position:right top;   /*背景图放置到右上角(方位可以自己更改)*/

background-position:left 100px top 300px;  /*离左上角100像素,离上边300像素(可以设为负值)*/

2、字体

font-family:"新宋体";/*字体。常用微软雅黑、宋体*/

font-size:12px;  /*字体大小,常用像素12px,14px,18px,还可以用"cm","2.5cm"即:默认字体的2.5倍。还可以用百分数。*/

font-weight:bold; /*bold是加粗,normal是正常。*/

font-style:italic; /*倾斜,normal是不倾斜*/

color:#03C;   /*颜色*/

text-decoration:underline; /*下划线,overline是上划线,line-through是删除线,none是去掉下划线*/

text-align:center;   /*(水平对齐)居中对齐,left是左对齐,right是右对齐*/

vertical-align:middle; /*(垂直对齐)居中对齐,top是顶部对齐,bottom是底部对齐,一般设置行高后使用*/

text-indent:28px;  /*首行缩进量*/

line-height:24px;  /*行高,一般为1.5~2倍字体大小*/

display:none;  /*none,不显示;inline-block,显示为块,不自动换行,宽高可设;block,显示为块,自动换行;inline,效果同span标签,不自动换行,宽高不可设。*/

第二课  学做gif图(运用Ps技术)

1》首先,将需要做gif动画的图片利用Ps中的切片工具分割成想要的图片;

2》然后,存储为web格式3》重新打开Ps页面,新近画布/背景,插入分割好的图片(或者直接拖动到Ps中),每插入一张图片,就相当于新加入一张图层;

3》图片插入好后,创建时间轴,排版每张图片出现的先后顺序和时间秒数,点击播放即可。(还可以设置成过渡图片,下面会有过渡按钮,单击后出现添加帧的对话框)

11-18网页基础--第二部分CSS样式属性(1)的更多相关文章

  1. 11-19网页基础--第二部分CSS样式表基本概念

    CSS,全称(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. 一.基本概念:是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 你可能对C ...

  2. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  3. IE6支持兼容min-width、max-width CSS样式属性

    IE6支持兼容min-width.max-width CSS样式属性 让IE6支持max-width.IE6支持min-width样式 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定 ...

  4. HTML第二部分 CSS样式表

    CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/   注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...

  5. 网站开发综合技术 第二部分 CSS样式表

    第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1 ...

  6. 前端基础问题:CSS vertical-align 属性

    CSS vertical-align 属性与基线的那些事~ 定义和用法: vertical-align 属性设置元素的垂直对齐方式. vertical-align只对内联元素(inline.inlin ...

  7. IE6支持min-width、max-width CSS样式属性

    1.IE6支持max-width解决方法 IE6支持最大宽度,解决CSS代码: .yangshi{ max-width:1000px; _width:expression((document.docu ...

  8. HTML布局相关的CSS样式属性

    # 转载请留言联系 注意,样式属性是写进CSS里面的. 布局常用样式属性: width 设置元素(标签)的宽度,如:width:100px; height 设置元素(标签)的高度,如:height:2 ...

  9. CSS样式属性单词之Left

    通常left单独在CSS中设置无效,需要在使用position属性下使用才能生效起作用.left左靠多少距离(距离左边多少)的作用. left 一.left认识与语法 left翻译:左边,左 在CSS ...

随机推荐

  1. 在eclipse中使用Github进行单元测试

    时间分配是找资料60%,动手实践40%.因为之前一直没怎么好好学习,导致看到使用Gunit进行单元测试的时候感觉像是看到了一行符号一样不知所措,还好现在搜索引擎很强大,找资料学习中间有找到一个现成的傻 ...

  2. Spring学习之xml配置Bean总结

    学习Spring时,我用的是Maven来管理jar包,先看看maven的pom.xml: pom.xml <project xmlns="http://maven.apache.org ...

  3. ACE主动对象模式

    ACE主动对象模式 ACE主动对象模式解决的核心问题是,异步调用及线程context的切换.ACE主动对象的实现侧重于类代码段的并发访问,这种访问模式仅适合短小的处理流程,比如socket的accep ...

  4. 开发者必备,超实用的PHP代码片段!

    此前,研发频道曾发布<直接拿来用,10个PHP代码片段>,得到了网友们的一致好评.本文,笔者将继续分享九个超级有用的PHP代码片段.当你在开发网站.应用或者博客时,利用这些代码能为你节省大 ...

  5. review22

    程序再运行期间,可能需要从外部的存储媒介或其他程序中读入所需要的数据,这就需要使用输入流. 程序可能经常需要获取磁盘上文件的有关信息或在磁盘上创建新的文件等,这就需要学习使用File类. 创建一个Fi ...

  6. asp.net上传文件大小限制

    <system.webServer> <security> <requestFiltering> <requestLimits maxAllowedConte ...

  7. 三张图较为好理解JavaScript的原型对象与原型链

    最近从网上看到别人详细得讲解了js的原型对象和原型链,看完感觉是看得最清晰的一个,于是,摘录到自己博客里 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与_ ...

  8. Incorrect string value: '\xE7\x8E\x8B\xE4\xBD\xB3' for column 'contact' at row 1

    1 queries executed, 0 success, 1 errors, 0 warnings 查询:INSERT INTO beijing(contact,tel_phone,qq,comp ...

  9. 微信浏览器HTTP_USER_AGENT判断

    微信公众平台开发 微信公众平台开发者 微信公众平台开发模式 微信浏览器 HTTP_USER_AGENT作者:方倍工作室 原文:http://www.cnblogs.com/txw1958/archiv ...

  10. 剑指offer--13.二进制中1的个数

    就是猜测试数据没有负数,哈哈 ----------------------------------------------------------------- 时间限制:1秒 空间限制:32768K ...