1118第二部分CSS样式属性(1)

第一课:样式属性

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

时间: 2024-11-08 19:55:01

1118第二部分CSS样式属性(1)的相关文章

快速记住CSS样式属性单词及输入HTML+CSS的方法

快速记住CSS样式属性单词及输入HTML+CSS的方法,DIVCSS5介绍一种快速输入HTML代码.快速输入CSS样式英文单词与样式值输入方法.降低英文单词代码输入错误概率,提升输入代码速度.DW软件输入CSS和HTML的终极用法(非面板输入法). DIVCSS5教大家一种快速记住CSS样式属性单词及用法的方法,告别死记硬背才是硬道理. CSS样式布局中使用的CSS样式英文单词,不需要死记硬背,会使用认识,知道长什么样即可.在DIV CSS布局开发中对于是否会拼写CSS属性单词关系不大,会使用.

如何为要被打印的内容设置CSS样式属性

如何为要被打印的内容设置CSS样式属性:有时候我们要打印的内容也是需要美观度的,并不希望太原汁原味了,所以要对其进行一下样式设置,本章节就简单介绍一下,如何利用CSS设置要被打印内容的样式,方式有多种,下面一一做一下简单介绍.一.使用link引入外部样式表: <link rel="stylesheet" href="css/style.css" media="screen" /> 以上代码的CSS样式用于屏幕显示效果,对于打印无效.关

自定义动画animate可以操作css样式属性总结

自定义动画animate可以操作css样式属性总结 backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWidth * borderTopWidth * borderSpacing * marginBottom * marginLeft * marginRight * marginTop * outlineWidth * paddingBottom * paddingLeft *

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

IE6支持兼容min-width.max-width CSS样式属性 让IE6支持max-width.IE6支持min-width样式 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定一定宽度范围值,有时需要设置一个最小宽度,接下来由DIVCSS5为大家总结的解决IE6不支持min-width和不支持max-width的方法.以下为CSS 宽度之IE6支持最小宽度.最大宽度解决技巧(你可能需要进一步详细了解CSS width知识). 目录 IE6支持max-width解决方法 I

js中获取css样式属性值

关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. (2)currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE. (3)getComputedStyle同currentStyle作用相同,但是适用于FF.opera.safari.chrome. 注意: ① currentStyle和getComputedS

获取元素的CSS样式属性值 IE兼容写法

/** * 获取元素的CSS样式属性值 */function css(element, attrName) { /*if (window.getComputedStyle) return window.getComputedStyle(element)[attrName] return element.currentStyle[attrName];*/ return window.getComputedStyle ? getComputedStyle(element)[attrName]: el

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

第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里边. <style type= "

对于用js获取元素的css样式属性(getComputedStyle,currentStyle,style)(getPropertyValue,getAttribute)

首先单独拎出来讲的是style style: nodeObject.style.cssProperty获取的是DOM节点上 style 属性定义的样式,如果不存在 style 属性,或者 style 属性没有定义相应的样式,则是无法获取的.也就是说,JavaScript 不会到 <style> 标签或者 CSS 文件去获取相应的样式,只能获取 style 属性定义的样式. 就是外部样式表,内部样式表,用style都是无效的,只有内联样式是有效的,当然用style写入也是写入在内联样式的. 然后

css样式属性

css样式属性比HTML用标签来添加方便很多,样式也比较多样.不过需要记得东西就更多了. .d1 { width: 100px; height: 30px; border: 1px solid black; text-align: center; line-height: 30px } .d1:hover { background-color: greenyellow; color: red; opacity: 0.5 } a { text-decoration: none; color: bl