《css样式学习.docx》由会员分享，可在线阅读，更多相关《css样式学习.docx（8页珍藏版）》请在三一文库上搜索。
1、CSS (层叠样式表:Cascading Style Sheets)1 .样式表的核心规则选择符属T1:值；属性2:值2; 例：h1color:green;2 .样式表放在那个地方内部的CSS、外部的 CSS内部的CSS:(1)直接在html代码行中加入样式规则。例题：first.html语法格式如下：标签名style= 样式属性 漏性值；样式属性 漏性值；.”样式表 这是在行内力入样式的效果(2)将样式表嵌入到html文件的文件头中。例题：first2.html(3)将一个外部样式表连接到html文件中例题：first3.html(4)将一个外部样式表输入到html文件中：例题：first4
2、.html3. (1)CSS样式的编写选择符组(可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义)例如：p,table,td,thfont-size:9pt;(2)类选择符用类选择符能把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。(一种是：html标记名+ “。” +类名。第二种：+类名,第二种是经常 使用的方式)例如：p.righttext-align:right; .righttext-align:right;这个段落向右对齐的 ID选择符与CLASS选择符类似，把 CLASS换成ID就可以了定义ID选择符要在ID名称前加
3、上一个“ #”号。(4)包含选择符可以单独对某种元素包含关系定义的样式表，例如元素1里包含元素2例如：table afont-size:12px;这条样式只对表格内的链接改变了样式后，文字的大小为12像素，而表格外的链接的文字不变4. 样式的优先级ID样式的优先级高于 CLASS,再其次是html标签选择符，如果想超越这三者之间的关 系可以使用!import提升样式表的优先权。实例 ：css_jibie.html5. 样式表的继承性所在元素中嵌套的元素都会继承外层元素指定的属性值例如：divcolor:red;font-size:9pt;这个段落的文字为红色9号字6. CSS的注释 /*/7.
4、 伪类伪类可以看做是一种特殊的类选择符，是能被支持 CSS的浏览器自动识别的特殊选择 符，它的最大好处就是可以对链接在不同状态下定义不同的样式效果 书写顺序：a:link,a:visited,a:hover,a:activeda:link /*未访问的链接*/color:#FF0000;text-decoration:none; a:visited/*已访问的链接*/color:#00ff00;text-decoration:none; a:hover/*鼠标在链接上*/color:#FF00FF;text-decoration:underline;)a:active/*激活链接*/color
5、:#0000ff;text-decoration:underline;)将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果: 例如：a.red:linkcolor:#FF0000;a.red:linkcolor:#0000FF;a.blue:linkcolor:#00FF00;a.blue:visitedcolor:#FF00FF这是第一组链接 这是第二组链接 首行和首字的伪类，可以对元素的首字或首行设定不同的样式: 例如：p:first-letterfont-size:300%;这是一个段落，这个段落的首字被放大了8 .文本属性Line-height:行高值word- spaci
6、ng:定义各个单词之间的间距letter-spacing:定义每个字母之间的间距text-decoration:定义文字的装饰样式(例如下划线等等)text-indent:定义文本的首行的缩进text-align:行对齐方式 vertical-align :垂直方向的对齐9 .边距属性属性值length|percentage|auto length|percentage|auto length|percentage|auto length|percentage|auto属性值length|percentage|auto属性属性含义margin-top:设置顶端边距margin-right:设置
7、右侧边品巨margin-bottom: 设置底端边距 margin-left设置左侧边距10 .填充距的属性属性属性含义Padding-top :设置顶端填充距Padding-right :设置右侧填充距 Padding-bottom :设置底端填充距 Padding-left:设置左侧填充距11 .边框属性（略）表单的美化12 .图文混排属性属性含义属性值width定义宽度属性length|percentage|autoheight定义高度属性length|autoFloat使文字环绕在一个元素的四周left|rightnoneclear定义某一边是否有环绕文字left|right|none
8、|both13 .列表属性14 .滤镜的简介CSS的滤镜属性的标识符是filter.基本书写格式：filter:filtername（parameters）只要进行滤镜操作，就必须先定义filterfiltername是滤镜属性名，这里包括alpha、blur、chroma等等多种属性属性名称属性解释Alpha设置透明度Blur设置模糊效果Chroma设置指定颜色透明Drop shadow设置投射殂影Fliphr水平翻转Flipv垂直翻转Glow为对象的外边界增加光政Grayscale设草抽度（降f氐图片的彩电度）Invert设置底片效果Light设置灯光投影Mask设置透日月膜Shadow设
9、置明影效果Wave利用正弦波纹打乱图片Xray只显示轮廓例如: alpha属性alpha是来设置透明度的.先来看一下它的表达格式：filteralpha ( opacitj-opcityfini$hopacity=finishopacity styk=5tyk， startX=startX? start=startY finishX=finishX, finishY=finishY)Opacity代表透明度等级，可选值从0到100, 0代表完全透明，10玳表 完全不透明.Style参数指定了透明区域的形状特征.其中0碌统一形状口代表线 形；2代表放射状;3代表长方Finishopacity是一
10、个可选项，用来设置结束时的透明度，从而达到一 种渐变效果，它的值也是从0到100。StartX和StartY代表渐变透明效果的开始坐标,finishX和Enish Y代表渐变透明效果的结束坐标. bhir属性 物您用手在一幅还奸透的油画上蹦划过，画面就会变得模机CSS下的blur雕就会达到这种懒的效果,blur属性的 表达式：| filterblur (add=add dircctionj strength=strength) 我们看到Mut属性有三个参数就d、dkecdou、strength Add麴有两个参髓:true和就意思是指定图片是否被改变成 模糊效果。Direction藏用来设置麟
11、的方向。模糊效果是懒顺时针方向 免行叽其中0度代糖直向上每45度一个单亿默认值是向左 的270度。 Chroma 属性 Chroma属性可以设置一个对象中指定的颜色为透明色，它的表达式： Filter:Chroma (color=color )这个属性的表达式是不是很简单，它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了 DropShadowMDropShadow属性是为了添加对象的阴影效果的它实现的效果看上去就像使原来的对象离开页面，然后在页面上显示出该对象的 投影。看一看它的表达式：FilterDropShadow (Color=color, Offx=Offx,
12、 Offy=ofyPositive二positive)该属性一共有四个参数:Color代表投射阴影的颜色。Offi和offy分别X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数，代表X轴的右方向和Y轴的向下方 向.设置为负整数则相反.Positive参数有两个值:True为任何非透明像素建立可见的投影，False为透明的像素部分建立可见的投影。 FlipH、FlipV属性Flip是CSS滤镜的翻转属性，FlipH代表 水平翻转，FlipV代表垂直翻转。它们的表 达式很简单，分别是：Filter:FlipH Filter:FlipV Glow属性 当对一个对象使用“Glow
13、”属性后，这个对象的边缘就会产生类似发光的效果。它的表达式如 下： Filter:Glow (Color=color, Strength=strength) Glow属性的参数只有两个:Color是指定发光的颜色，Strength指定发光的强度，参数值从1到 255o Gray属性Gray属性把一张图片变成灰度图。它的表达式很简单Filter: Gray nvert属性InveK属性可以把对象的可视化属性全部翻转，包括色彩、饱和度 和亮度值。它的表达式也很简单：Filter: Invert Mask属性Mask属性为对象建立一个覆盖于表面的膜。它的表达式也很简单:Filter：Mask (Co
14、lor=颜色)ShadowShadow属性可以在指定的方向建立物体的投 影。它的表达式是这样的：Filter:Shadow (Color=color,Direction = direction )在这里，Shadow有两个参数值:Color参数用来 指定投影的颜色Direction参数用来指定投影的 方向。 Xray属性 Xray就是X射线的意思。Xray属性,顾名思义,这种属性产 生的效果就是使对象看上去有一种X光片 的感觉。它的表达式很简单： Filter:Xray Wave属性 Wave属性用来把对象按照垂直的波纹样式打乱.它的表达式如下： Filter：Wave (Add=True (
15、False) , Freq=频率，LightStrength=增强光效，Phase=偏移量，Strength二强度) 我们看到Wave属性的表达式还是比较复杂的，它一共有五个参数。Add参数有两个参数值:True代表把对象按照波纹样式打 乱;Fais纸表不打乱；Freq参数指生成波纹的频率，也就是指定在对象上共需要产 生多少个完整的波纹。UghtStrength参数是为了使生成的波纹增强光的效果，参数值可以从0到100。Phase参数用来设置正弦波开始的偏移量。这个值的通用值为0,它的可变范围为从 0到100。这个值代表开始时的偏移量占波长的百分比，比如该值 为25,代表正弦波从90度(360*25%)的方向开始。