css复习

不一定要记到繁多的样式。实际上只要通过辅助工具就可以了。
样式规则选择器:
HTML元素选择器
Class选择器
Id选择器
关联选择器
组合选择器
伪元素选择器
样式规则的注释。样式属性:
CSS的样式属性分类,大概可以分为以下几类:
字体,背景,文本,位置,布局,边缘,列表。其它。
与字体相关的属性:主要包括字体大小,颜色,样式。
font-family:字体的名称。值可以设置多个字体名称,当用户浏览器无法识别第一种字体时,就会使用第二种字体或更后面的。
font-size:绝对大小的设置:small,x-small,xx-small,medium,large,x-large,xx-large.xx-small为最小值,xx-large为最大值。相对大小设为larger,smaller.
font-style:用来定义字体的样式是斜体还是正常字体。分别是italic,normal.
text-decoration: 用于在文本中添加下划线,中划线,上划线等效果。可以设置多个值,多个值要用空格隔开。underline,overline,line-throw.none.
font-weight:用于指示粗体字的大小。bolder,lighter.
font-variant:small-caps大写字母。
text-transform:字母的大小写转换。首字母大写,或全部大写。全部小写。
color:
CSS中的背景属性:背景颜色,图像。
background-color:
background-image:url(" ");
background-repeat:表示背景图像重复或者重复的方式。取值可以如下:no-repeat,repeat,repeat-x,repeat-y.
background-attachment:用于确定背景图像是不是随鼠标的滚动而滚动。fixed,scroll.
background-position:图像的水平位置和垂直位置。left,right,center,bottom,top,center,20px.
文本属性:距离,对齐,上标,下标。
word-spacing:单词间的间距。
letter-spacing:用来设置每个字符的间距。
vertical-align:sub下标,super上标,top,middle,bottom.相对于行高元素的百分比。
text-align:水平对齐,left,right,center,justify
text-indent:
white-space:如何处理文本中的空白字符。它的取值可以如下:normal,pre,nowrap.
line-height:行高。可以是精确的数字,也可以是百分比。
CSS滤镜(Filter)
Filter是CSS提供的一种用于产生多媒体效果的属性,使用这种技术可以把效果添加到网页中,对于视觉是很有用的。
首先根据下列的HTML代码体会Filter的作用:
<div style="width:120;height:40;background-color:red;filter:Alpha(Opcity=80) Blur(Add=5,Direction=135)">
<div style="width:120;height:40;background-color:red;filter:Alpha(Opcity=80) Blur(Add=5,Direction=135) FlipV">
<div style="width:120;height:40;background-color:red;filter:Alpha(Opacity=80) Blur(Add=5,Direction=135) FlipV">资讯次序网
1111</div>
下面来看看其各个参数的作用:
Alpha说明一个元素与背景混合的程度,透明度。
Alpha(Opacity=?透明度级别0-100,Finishopacity=?渐变的透明效果,用来指示结束时的透明度,style=?透明的样式可以为0.1.2.3,startx=?渐变透明效果的X坐标,starty=?渐变透明效果的Y坐标,finishx=?;finishy=?);
BlendTrans(Duration=?)这个参数用于设置淡入和淡出的效果。Duration设置淡入淡出的时间值。
Blur(Add=?是否是在单个方向上糊糊,Direction=?模糊的方向,45的整数倍,Strength=?有多少个像素的宽度受到模糊的影响)用于设置模糊的效果。
Chroma(Color=?)将某种颜色设为透明,即是过滤掉某种颜色。
DropShadow(Color=?,offx=?水平偏移量,offy=?,Position=?布尔值,为真时建立外部阴影。)用于建立阴影效果。
FlipH:将元素水平方向上翻转。
FlipV:将元素垂直方向上翻转。
Gray:去年图像色彩
Xray:用于设置图像的轮廓、
Invert:翻转图像颜色,。
Light:用于设置光圆效果。
Glow(color=?,strength=?)用于设置元素边缘产生发光的效果。
Mask(color=?)用于在元素表面上覆盖一个透明的遮照。就像带着有色眼镜去看物体的效果一样。
RevealTrans(Duration=?切换的时间,Transition=?切换的方式,可以从0到23之间的一个数字。)用于建立初始状态的转换效果。
Shadow(Color=?,Direction=?。)用于建立另一种阴影效果。
Wave(Add=?设置原对象是不是按照波纹的效果扭曲。非零表示扭曲。,Freq=?波纹的频率。,LightStrength=?波纹效果的光照强度,0到100,Strength=?波浪的摇摆幅度。。,Phase=?)用于在元素上显示一种波纹的效果。
最后,我为大家提供一些学习上的建议:
HTML标签,CSS属性。使用工具软件来实现。但是知道有哪些标签可用,以及各个标签的作用。还是必要的。否则你对工具软件的应用只能不知所以然。用的多了。就会记住。常时间不用,自然会忘记。
苦干不如巧干,最聪明的是最会用工具的人。
要查找一些帮助资料来补回一些忘记的知道,而不是死记硬背。
查看优秀网页的源代码。
在当前网页中获取CSS文件和JavaScript文件的方法:
如果是外部文件,那么就把它的地址复制到地址栏上,浏览器会自动下载这个文件。
如果表格中的有一个单元格特别长,全部由字母组成,浏览器会增加表格的宽度,无论怎么设置,浏览器都不会根据表格宽度自动的换行。通过设置<td>标签的word-break,word-wrap.自动显示。
CSS的位置属性:
就是指定元素的位置,它可以用来控制任何元素在浏览器窗口中的位置。对网页元素进行定位控制。包括下面属性:
Position:定位方式。用于设置CSS的定位方式。可以取如下值:
absolute:绝对定位,精确的将元素定位在页面上的某个位置,而不考虑其他元素的位置。
relative:相对定位,相对于元素通常位置的一个偏移量。
static::通用的定位方式。
left:用来设置元素左边的属性。
top:用来设置元素顶部的属性。
width:用于设置元素的宽度。
height:元素显示的高度。
Z-index:元素的层叠顺序。
边缘属性:
margin属性:用于设置元素的边界。
margin-right.
margin-top,
margin-left.
margin-bottom.
padding属性:用来设置元素边界与内容之间的空隙大小。
padding-top
padding-right
padding-left
padding-bottom
border-width属性:用来设置元素的边框的宽度。
border-top-width
border-bottom-width
border-right-width
border-left-width
border-color属性:用来设置元素边框的颜色。
border-right-color
border-left-color
border-top-color
border-bottom-right
border-style属性:用来设置边框的样式。
border-top-style
border-right-style
border-left-sstyle
border-bottom-style
它的设置值可以取如下样式:dotted点线,none,dashed,solid,double,groove,ridge,inset,outset.
列表属性:
list-style-type:用于指示列表目标项标记的类型。设置值有很多。disc实心圆。
list-style-image:目录列表项的图像。
list-style-position:用来指示列表项是显示在文本内,还是显示在文本外。inside,outside.
其它的属性:
Cursor:用于指示当鼠标移动到上面的时候,光标的形状。
取值有很多,hand手形。
filter:滤镜特效。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,165评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,720评论 1 298
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,849评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,245评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,596评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,747评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,977评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,708评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,448评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,657评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,141评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,493评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,153评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,890评论 0 198
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,799评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,685评论 2 272

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,630评论 1 92
  • 内容简述 关于CSS,确实太繁杂了,内容多。写好不易,基本上就这个调了。大家肯定听过CSS奇淫技巧吧,关于这个我还...
    lifeColder阅读 563评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,691评论 0 2
  • 花开有时 花落有声 在茫茫人海中 追寻那一缕光 奔着晨曦 踏着朝阳 寻找那心中的殿堂。
    可可熊Q阅读 256评论 2 1
  • 那年,她的身体开始发育,她傻傻地在室友的帮助下第一次穿上了胸衣,第一次穿上了浅绿色的半高跟凉鞋,第一次因为穿上白色...
    小主正红阅读 264评论 1 1