网站地图    收藏   

主页 > 前端 > css教程 >

CSS学习篇之——基础知识 - html/css语言栏目:ht

来源:自学PHP网    时间:2015-04-14 14:51 作者: 阅读:

[导读] CSS概述 在上一篇文章中我们对CSS的知识有了初步的了解,CSS它是一种语言,既然是一种语言,自然就有它的语法,这篇文章我们对CSS的一些语法知识进行下学习 CSS具体语法 CSS规则主...


CSS概述


在上一篇文章中我们对CSS的知识有了初步的了解,CSS它是一种语言,既然是一种语言,自然就有它的语法,这篇文章我们对CSS的一些语法知识进行下学习.

CSS具体语法


CSS规则主要是由两个主要的部分构成的分别是选择器以及一条或者多条声明,下面就是一个完整的CSS语句。

\

选择器


选择器通常是我们所需要的改变样式的html元素,就是上图中的h1,关于CSS选择器一般有3种,我们依次来看。<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHAgbGFuZz0="en-US">

标记选择器


一般又称为上下文选择器或派生选择器,我们可以使用标记更加简洁,它可以允许我们根据文档中的上下文关系来确定某个标签的样式,上面我们展示的图片代码就是一个标记选择器。

li {
    font-style: italic;
    font-weight: normal;
  }


li是一个html标签的标记。

类别选择器


CSS中,类别选择器以一个点号显示,它允许以一种独立于文档元素的方式来指定样式,它即可以单独使用,也可以与其它元素结合使用。

.important{color:red;}


This heading is veryimportant.




为了将类别选择器样式与元素关联,所有必须为标签的class指定一个值。

ID选择器


id选择器可以为标有特点id的html元素指定特点的样式,id选择器以“#”号来定义,

#intro{font-weight:bold;}


This is a paragraph of introduction.




与类别选择器不同,在ID选择器使用时,一个ID在一个html文档中只能被使用一次,同时ID选择器不能结合使用,因为ID熟悉不允许有以空格分隔的词列表。

声明


每条声明从上面图上我们可以看出,每条声明是由一个属性和一个值组成,在我们一开始的图中,color和 font-size 就是属性,red 和 14px是值,我们使用大括号来包围声明;如果我们要声明的属性的值为若干单词,则要给值加上双引号;如果我们定义了多个声明,则用分号将每个声明分开,最后一个声明末尾则不需要分号。

CSS文字效果


包括CSS字体属性定义文本的字体系列、字体大小、加粗、风格(斜体)和变形;同时还包括文本属性,文本属性可以定义文本的外观,通过文本属性,我们可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。

CSS背景效果图片像创建相当复杂的效果。关于背景纯色比较简单,就不多说,重点提下背景图片,将图片放入背景,用到的是background-image属性,关于图片背景的其它知识有,背景重复、背景定位、关键字、百分数值、长度值、背景关联这些知识。


链接


CSS链接的特殊性在于能够根据它们所处的状态来设置它们的样式,链接的四种状态:

a:link- 普通的、未被访问的链接

a:visited- 用户已访问的链接

a:hover- 鼠标指针位于链接的上方

a:active- 链接被点击的时刻

a:link{color:#FF0000;}                /*未被访问的链接 */
a:visited{color:#00FF00;}        /* 已被访问的链接 */
a:hover{color:#FF00FF;}        /* 鼠标指针移动到链接上*/
a:active{color:#0000FF;}        /* 正在被点击的链接 */


表格


CSS中表格可以帮帮助我们极大的改善表格的外观,关于表格我们我们设置表格的边框、折叠边框、表格的宽度和高度、表格文本对齐方式、表格内边距、表格颜色。

其它


轮廓在CSS中我们也是经常用得,轮廓是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用,一般利用CSS outline属性设置元素轮廓的样式、颜色和宽度。除此之外还有菜单的制作和滤镜的使用等等。

总之


关于CSS的这些基础知识都是在实践中才能不断认识和不断提高,实践才能出真知,关于CSS的一个重要知识,盒子模型我们会在下篇文章中进行讲解。


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论