css语法.docx
- 文档编号:28763885
- 上传时间:2023-07-19
- 格式:DOCX
- 页数:14
- 大小:25.67KB
css语法.docx
《css语法.docx》由会员分享,可在线阅读,更多相关《css语法.docx(14页珍藏版)》请在冰豆网上搜索。
css语法
使用CSS样式美化和布局网页
1CSS简介
•CSS是CascadingStyleSheets的缩写,称为层叠样式表。
它允许网页设计者定义网页元素的样式,包括字体、颜色以及其他高级样式。
•采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。
•CSS样式可以是一个单独的外部文件(.css文件),该文件被链接到站点中的一个或多个网页页面中。
•CSS样式也可以定义在HTML文档内部,在头文件部分的标记内定义。
例如:
•
•
•
•
•
•
--
•.y{
•font-size:
10px;
•line-height:
25px;
•color:
#112233;
•}
•-->
•
•
•
•
2CSS的使用
•一个样式表由样式规则组成,以告诉浏览器怎样呈现一个文档。
2.1CSS基本语法
•CSS语法结构由2部分组成:
选择器和声明。
其中声明由样式属性和取值构成。
•语法:
选择符{样式属性:
取值;
样式属性:
取值;……}
•例如:
H1{color:
blue;
font-family:
隶书;
}
•选择符:
指这组样式编码所要针对的对象,可以是一个HTML标签,如body、h1;也可以是定义了特定的id或class的标签,如#main表示选择指定了id属性值为main的标签。
•属性:
是CSS样式控制的核心,CSS提供了丰富的样式属性,如颜色、大小、定位和浮动等。
•值:
是指属性的值,形式有两种,一种是指定范围的值,如float属性,只有left、right和none3种值;另一种为数值,如width能够取值于0~9999px,或通过其他数学单位来表示。
•CSS的几种表示方法:
1.标签选择符
一个html的标签,如:
p{color:
blue}
当多个标签要用到同一个属性,则可以一起定义,如:
b,i,p,h1{color:
blue}
2.类选择符
名称以点号开始,如:
.b{font-weight:
bold}
应用时通过标签的class属性来指定,如:
也可在点号前冠上标签的名称,这样就只有该标签才可以使用这个样式,如:
p.i{text-decoration:
underline}
html文档部分:
3.ID选择符
定义方式:
#d{color:
#223399}
使用时,通过标签的id属性指明,如:
注意:
如果同时设置了class和id属性,那么浏览器会优先选择id属性指定的格式。
4.上下文选择符
规定一个标签的具体后继标签的显示格式,如:
pspan{font-size:
20px}
表示标签p里的每一个span元素都是使用20号字体显示
5.伪类选择符
指出文档中需要以独立的样式显示,但是却不能应用选择符进行独立设置的部分。
•特殊化首行,如:
p:
first-line{color:
red}
•特殊化首字母,如:
p:
first-letter{font-size:
200%}
•超链接伪类选择符
a:
link;a:
visited;a:
hover;a:
active
6.style属性
直接将CSS样式表添加到HTML标识符里,如:
purple”>紫色 2.2添加CSS的方法 1.内嵌样式表 即使用style属性直接设置 2.内联样式表 内联样式表与内嵌样式表的相似之处在于都将CSS样式编写到页面中,而不同的是内部样式表统一放置在一个固定的位置,即 以@开头的联合样式表输入方法和链接样式表的方法很相似,但联合样式表输入方式更有优势。 因为联合法可以在链接外部样式表的同时针对该网页的具体情况作出别的网页不需要的规则。 3设置CSS属性 •CSS样式共分为8中类型,分别是类型、背景、区块、方框、边框、列表、定位和扩展。 3.1CSS中的常见属性值 •1.关键字 关键字随属性而变化,也就是说不同的属性,属性值的关键字也是不同的,常见的属性值的关键字有none、italic、bold、red、solid等。 •2.长度 (1)绝对单位: 英寸(in)、厘米(cm)、毫米(mm)、磅(pt)和十二点(pc)。 (2)相对单位: em: 表示当前字体中元素的宽度。 ex: 表示当前字体中字母x的高度。 px: 表示1个像素的大小。 如: p{display: block; font-size: 20px; border-style: solid; border-right-width: 2.5em; border-left-width: 1.5em; border-top-width: 1ex; border-bottom-width: 1ex;} (3)百分比 指元素这个属性的当前值的百分比。 如: p{font-size: 10pt;} span{font-size: 150%;} 上面代码,假设标记span包含在标记p中,那么标记span的内容因为继承于p所以当前字号为10pt,而在span选择符中又设置其字号大小为当前字号的150%,所以标记name的内容会以字号15pt显示。 3.颜色 常用的设置颜色的属性有color、border-color、background-color。 颜色属性的取值可以有四种类型: 关键字、十六进制、十进制RGB、百分比RGB。 • (1)关键字: 如red,blue等,书本P82表4-2。 • (2)十六进制: 以“#”号开头,后面跟6位十六进制数,其中前面两位表示红色分量,中间两位表示绿色分量,末两位表示蓝色分量。 •(3)十进制RGB: 相当于调用函数,函数名为rgb,参数为三个十进制数,每个十进制数的取值范围为0~255。 如: rgb(0,255,0)代表绿色。 •(4)百分比RGB: 和上面相似,只不过参数为三个百分数,取值范围是从0%到100%之间。 如: rgb(0%,0%,100%)代表蓝色。 •此外,也可使用三位十六进制来表示颜色,CSS在处理时,将每位十六进制数加以重复,如#F3C就是表示#FF33CC的颜色。 4.URL 在需要为某个元素添加背景图片时,就需要使用background-image属性,这个属性的属性值是一个URL类型,指明需要作为背景图片的地址,在为其赋值时也相当于调用函数,函数名为URL,函数的参数为一个字符串,指明文件的地址,这个字符串可用双引号引起来,也可以不用,可以用绝对地址,也可以用相对地址。 如: •body{background-image: url( •body{background-image: url(“ •body{background-image: url(image/01.gif)} 3.2CSS常用属性设置 •1.位置属性 •position: 用于确定元素的位置。 它的取值可以是: absolute、relative、fixed、static和inherit。 •top: 用于确定显示的y轴信息。 •left: 用于确定显示的x轴信息 •right: 用于确定显示的x轴信息。 •2.显示控制属性: •display: 用于确定元素的各种显示形式 •3.字体显示属性 • (1)font-family: 字体族,它是使用逗号分隔开的一组字体名 • (2)font-style属性 •这个属性用于控制字体显示的分格,是正常的,还是斜体的,还是倾斜的 •(3)font-weight属性 •这个属性规定字体显示的浓淡程度,该属性的值一般介于100-900,非整百的值是不允许的 •(4)font-size属性 •这个属性规定字体的高度和宽度,表示一个字体的大小 •(5)font-variant属性 •该属性规定字体显示的大小 •(6)font属性 •font属性包含了上面五种属性,可以将上面五种属性的值都赋给font属性 •4.颜色属性 •颜色属性是color,它规定一个元素的颜色 •CSS对颜色的取值有两种方式: 名称和RGB颜色,并且这些颜色的取值方法适用于CSS所有与颜色有关的属性。 •名称方式: CSS能够接受windowsVGA调色板的16种颜色,分别为: aqua(浅绿)、black(黑)、blue(蓝)、fuchsia(紫红)、gray(灰)、green(绿)、lime(酸橙)、maroon(粟)、navy(海蓝)、olive(橄榄)、purple(紫)、red(红)、silver(银)、teal(深青)、white(白)和yellow(黄)。 •RGB方式: RGB方式可以更加精确的定义需要的颜色而不局限于上面的16种颜色,一般认为颜色可以由三原色,也即红、绿、蓝三种颜色按照一定的比例搭配而成,因此一种颜色可以通过指定这三种分量的值来获得。 •指定RGB分量有四种方法: Ø第一,红、绿、蓝三种颜色的分量都使用两位的十六进制数进行表示,比如#0fcff。 Ø第二,红、绿、蓝三种颜色的分量是第一种方式的压缩形式,每一个分量只采用一个十六进制数来表示,使用时再把它扩充为两位的十六进制数,比如#c4d扩展为#cc44dd。 Ø第三,使用矢量的方式表示,将其表示为rgb(x,y,z)。 其中,x,y,z都是介于0-255的整数。 Ø第四,也是矢量表示法,但是形式为rgb(x%,y%z%),将数值变为百分比。 •5.背景属性 •背景属性方面包括5个小方面的属性和它们对应的大方面的属性。 • (1)background-color属性,它设置元素的背景色 • (2)background-image属性,用于设置元素的背景图案 •(3)background-repeat属性对丁是否重复背景 •(4)background-attachment属性规定背景图像是否随着窗口的滚动而滚动 •(5)background-position属性,一般情况下,背景的左上角重叠于元素内容的左上角,而通过这个属性可以设置背景左上角相对于元素的位置 •(6)backound属性是上面的五种属性的一个总属性 •6.文本属性 • (1)word-spacing属性,该属性可以用于设置文字之间的距离 • (2)letter-spacing属性,该属性用于设置每个词语的字符间距 •(3)text-decoration属性,该属性用于对文本进行下划线、闪烁等的修饰 •(4)vertical-align属性,该属性用于控制元素在容器内的位置或者控制字符在元素内的位置 •(5)text-transform属性,该属性用于指定文本的大小写方式 •(6)text-align属性,该属性用于指定块中的文本的对齐方式 •(7)text-indent属性,该属性用于指定段落缩进的格式 •7.版面属性 • (1)margin属性,这是一个全局属性,包括四种属性: margin-left(左边距)、margin-right(右边距)、margin-top(上边距)和margin-bottom(下边距) • (2)padding属性,这个属性也是全局属性,它包含了padding-top、padding-bottom、padding-left和padding-right四种属性 •(3)border-width属性,该属性包括四个属性: border-top-width、border-bottom-width、border-left-width和border-right-width •(4)border-color属性,该属性可用于指定边界的颜色 •(5)border-style属性,该属性用于设置边界的样式 •8.边框属性 •9.列表属性 •10.滤镜属性 4.CSS样式中滤镜的使用 1.Alpha滤镜 功能: 指定一个元素的透明度。 例如: 设置滤镜Alpha(Opacity=100,FinishOpacity=10,Style=2,StartX=100,StartY=75,FinishX=200,FinishY=150) 2.Blur滤镜 功能: 指定一个元素的模糊效果。 例如: 设置滤镜blur(add=true,direction=135,strength=10) 3.FlipH,FlipV滤镜 功能: 这两个滤镜可以分别将对象水平翻转和垂直翻转。 例如: 设置滤镜FilpH与FilpV 4.Chroma滤镜 语法: {filter: chroma(color=color)} 功能: 可以设置一个对象中指定的颜色为透明色。 5.DropShadow滤镜 功能: 可以给对象添加阴影效果。 例如: 设置滤镜dropshadow(color=gray,offx=5,offy=5,positive=1) 6.Glow滤镜 功能: 使对象的边缘产生类似发光的效果。 例如: 设置滤镜glow(color=red,strength=10) 7.Gray,Invert,Xray滤镜 功能: Gray滤镜是把一张图片变成灰度图。 Invert滤镜是把对象的可视化属性全部翻转,包括色彩、饱和度、和亮度值。 Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮,也就是所谓的“X光片”效果。 如图: 三种滤镜后的效果。 8.Light 滤镜 语法: {filter: light} 功能: 这个滤镜可以模拟光源的投射效果。 一旦为对象定义了“light”滤镜属性,那么就可以调用它的方法来设置或者改变属性。 9.Mask滤镜 语法: {filter: mask(color=color)} 功能: 可以为对象建立一个覆盖于表面的膜,其效果就象戴者有色眼镜看物体一样。 10.Shadow滤镜 功能: 可以在指定的方向建立物体的投影。 例如: 设置滤镜shadow(color=gray,direction=225) 11.Wave滤镜 功能: 把对象按照垂直的波形样式打乱。 例如: 设置滤镜Wave(Add=true,Freq=3,LightStrength=10,Phase=10,Strength=10)
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- css 语法