使用css样式美化和布局网页。
1css简介。
css是cascading style sheets的缩写,称为层叠样式表。它允许网页设计者定义网页元素的样式,包括字体、颜色以及其他高级样式。
采用css技术,可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。
css样式可以是一个单独的外部文件(.css文件),该文件被链接到站点中的一个或多个网页页面中。css样式也可以定义在html文档内部,在头文件部分的标记内定义。例如:
css层叠样式表。
2css的使用。
一个样式表由样式规则组成,以告诉浏览器怎样呈现一个文档。
2.1 css基本语法。
css语法结构由2部分组成:选择器和声明。其中声明由样式属性和取值构成。语法:
选择符例如:h1
选择符:指这组样式编码所要针对的对象,可以是一个html标签,如body、h1;也可以是定义了特定的id或class的标签,如#main表示选择指定了id属性值为main的标签。
属性:是css样式控制的核心,css提供了丰富的样式属性,如颜色、大小、定位和浮动等。
值:是指属性的值,形式有两种,一种是指定范围的值,如float属性,只有left、right和none3种值;另一种为数值,如width能够取值于0~9999px,或通过其他数学单位来表示。
css的几种表示方法:1.标签选择符。
一个html的标签,如:p
当多个标签要用到同一个属性,则可以一起定义,如:b,i,p,h1
2.类选择符。
名称以点号开始,如:.b
应用时通过标签的class属性来指定,如:女。
也可在点号前冠上标签的名称,这样就只有该标签才可以使用这个样式,如:
p .i html文档部分:32
选择符。定义方式:#d
使用时,通过标签的id属性指明,如:张三。
注意:如果同时设置了class和id属性,那么浏览器会优先选择id属性指定的格式。4.上下文选择符。
规定一个标签的具体后继标签的显示格式,如:p span
表示标签p里的每一个span元素都是使用20号字体显示。
5.伪类选择符。
指出文档中需要以独立的样式显示,但是却不能应用选择符进行独立设置的部分。
特殊化首行,如:p:first-line特殊化首字母,如:
p:first-letter超链接伪类选择符。
a:link; a:visited; a:hover; a:active
属性。直接将css样式表添加到html标识符里,如:紫色。
2.2添加css的方法。
1.内嵌样式表。
即使用style属性直接设置2.内联样式表。
内联样式表与内嵌样式表的相似之处在于都将css样式编写到页面中,而不同的是内部样式表统一放置在一个固定的位置,即标记内,而标记则添加在html的头信息标识符。
以@开头的联合样式表输入方法和链接样式表的方法很相似,但联合样式表输入方式更有优势。因为联合法可以在链接外部样式表的同时针对该网页的具体情况作出别的网页不需要的规则。
3设置css属性。
css样式共分为8中类型,分别是类型、背景、区块、方框、边框、列表、定位和扩展。
3.1 css中的常见属性值。
1.关键字。
关键字随属性而变化,也就是说不同的属性,属性值的关键字也是不同的,常见的属性值的关键字有none、italic、bold、red、solid等。2.长度。
1)绝对单位:英寸(in)、厘米(cm)、毫米(mm)、磅(pt)和十二点(pc)。
2)相对单位:
em:表示当前字体中元素的宽度。ex:表示当前字体中字母x的高度。
px:表示1个像素的大小。
如:p 3)百分比。
指元素这个属性的当前值的百分比。如:p span
上面**,假设标记span包含在标记p中,那么标记span的内容因为继承于p所以当前字号为10pt,而在span选择符中又设置其字号大小为当前字号的150%,所以标记name的内容会以字号15pt显示。
3.颜色。常用的设置颜色的属性有color、border-color、
background-color。
颜色属性的取值可以有四种类型:关键字、十六进制、十进制rgb、百分比rgb。
1)关键字:如red,blue等,书本p 82表4-2。
2)十六进制:以“#”号开头,后面跟6位十六进制数,其中前面两位表示红色分量,中间两位表示绿色分量,末两位表示蓝色分量。
3)十进制rgb:相当于调用函数,函数名为rgb,参数为三个十进制数,每个十进制数的取值范围为0~255。如:rgb(0,255,0)代表绿色。
4)百分比rgb:和上面相似,只不过参数为三个百分数,取值范围是从0%到100%之间。如:rgb(0%,0%,100%)代表蓝色。
此外,也可使用三位十六进制来表示颜色,css在处理时,将每位十六进制数加以重复,如#f3c就是表示#ff33cc的颜色。
在需要为某个元素添加背景**时,就需要使用。
background-image属性,这个属性的属性值是一个url类型,指明需要作为背景**的地址,在为其赋值时也相当于调用函数,函数名为url,函数的参数为一个字符串,指明文件的地址,这个字符串可用双引号引起来,也可以不用,可以用绝对地址,也可以用相对地址。如:
body功能:可以设置一个对象中指定的颜色为透明色。滤镜。
功能:可以给对象添加阴影效果。
例如:设置滤镜dropshadow(color=gray,offx=5,offy=5,positive=1)
滤镜。功能:使对象的边缘产生类似发光的效果。例如:设置滤镜glow(color=red,strength=10)
滤镜。功能:gray滤镜是把一张**变成灰度图。
invert滤镜是把对象的可视化属性全部翻转,包括色彩、饱和度、和亮度值。xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮,也就是所谓的“x光片”效果。如图:
三种滤镜后的效果。
滤镜语法:功能:这个滤镜可以模拟光源的投射效果。一旦为对象定义了“light”滤镜属性,那么就可以调用它的方法来设置或者改变属性。滤镜。
语法:功能:可以为对象建立一个覆盖于表面的膜,其效果就象戴者有色眼镜看物体一样。
滤镜。功能:可以在指定的方向建立物体的投影。
例如:设置滤镜shadow(color=gray,direction=225)
滤镜。功能:把对象按照垂直的波形样式打乱。
例如:设置滤镜w**e(add=true,freq=3,lightstrength=10,phase=10,strength=10)
CSS语法
基本语法。一个样式 style 的语法由三部分构成 selector 中文叫选择器有点怪怪的,就用英文吧 属性 property 属性值 value selector 举个例子,下面的 p就是selector,color就是属性,blue就是属性值。p html中所有的tag都可以作为selecto...
CSS语法
基本语法。一个样式 style 的语法由三部分构成 selector 中文叫选择器有点怪怪的,就用英文吧 属性 property 属性值 value selector 举个例子,下面的 p就是selector,color就是属性,blue就是属性值。p html中所有的tag都可以作为selecto...
CSS语法
未来不是固定在那里等你趋近的,而是要靠你创造。可能有人会问,css还有语法?是的,它不属于任何编程语言类型,但它有自己规定的格式以及规范,只有了解这些规范你才能写出更简洁 易懂的css。网页设计师们应力求写出的css有更好的可读性,更规范的书写,更小的体积,这是初学者们应该要明白的。css 语法由三...