CSS基本选择器资料_第1页
CSS基本选择器资料_第2页
CSS基本选择器资料_第3页
CSS基本选择器资料_第4页
CSS基本选择器资料_第5页
已阅读5页，还剩29页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网站前台布局与设计工程一：制作个人主页工程描述：为了呈现自己的才艺，记录自己的心事，共享自己的兴趣爱好，某同学准备制作一个个人网站。工程目标：能够使用〔X〕HTML搭建网页的构造；学会在HTML中引入CSS；能够对文字和图片进展简洁的修饰。工程任务：任务1－－－编写网站首页构造任务2－－－超链接到其它页面任务3－－－实现网站首页的文字效果任务4－－－实现首页和二级页面的背景效果任务三：实现个人主页的文字效果技能目标：1、能够在html页中以多种方式引入CSS；2、能够对文本进展修饰学问目标：了解CSS的概念；CSS引入网页的方法CSS语法规章，命名规章与文字相关的CSS属性名、属性值相关学问：CSS的概念和语法1.1基本CSS选择器1.2在HTML中使用CSS的方法1.3复合选择器1.4CSS的继承特性1.5

CSS概念CascadingStyleSheet层叠样式表。CSS作用在网页中实现网页构造内容和表现形式的分别，将原来由HTML语言所担当的一些与构造无关的功能剥离出来，改由CSS来完成。1.1CSS的概念和语法CSS的标准目前有三个CSS标准。CSS1、CSS2和CSS3。CSS1于1996年12月通过，CSS2则于1998年5月通过。CSS3在CSS2的根底上增加了很多新的样式和效果。但现在支持CSS3的扫瞄器版本要求较高。CSS文档中大小写不敏感1.1CSS的概念和语法在介绍CSS语法之前，先思考一个生活中的问题。1.1CSS的概念和语法

张飞{身高:185cm;体重:105kg;性别:男;性格:急躁;民族:汉族;}

这个表实际上是由3个要素组成的，即姓名、属性和属性值。

CSS的作用就是设置网页的各个组成局部的表现形式。因此，假设把上面的表格换成描述网页上一个标题的属性表，可以设想应当大致如下：

2级标题{字体:宋体;大小:15像素;颜色:红色;装饰:下划线}

再进一步，假设把上面的表格用英语写出来：h2{font-family:宋体;font-size:15px;color:red;text-decoration:underline;}

CSS的思想就是首先指定对什么“对象”进展设置，然后指定对该对象的哪个方面的“属性”进展设置，最终给出该设置的“值”。因此，概括来说，CSS就是由3个根本局部——“对象”、“属性”和“值”组成的。CSS根本语法 选择符{属性名1:属性值1; 属性名2:属性值2;…}选择符：指被设样式的对象{}：表示此符号内的一组样式是对指定对象设置的。属性名:属性值：具体的样式CSS注释：/*被注释内容*／1.1CSS的概念和语法留意冒号和分号1.2根本CSS选择器

在CSS的3个组成局部中，“对象”是很重要的，它指定了对哪些网页元素进展设置，因此，它有一个特地的名称——选择器〔selector〕。1.2.1标记选择器

标记选择器中的“标记”指XHTML中的标记。CSS可以定义几乎全部HTML标记中内容的样式。例如body、h1-h6、p、a、div、ul等。例：对HTML语言中的分段标记P进展字体定义：p{font-family:“宋体“;}

类别选择器

表示方法：在字符的前面加前缀句点“.”来表示类别选择器。引用方法：在此处定义的类名在页面中的元素用class属性的值来引用。例：定义了一个类选择器title1，用来定义字体的大小：.title1{font-size:12px;}在页面中使用定义的样式：<divclass=“title1“>学校网站开发</div>留意：类名不能以数字开头。CSS的类名只能包含字母和数字。

<html><head><title>class选择器</title><styletype=“text/css“>.red{color:red; /*红色*/font-size:18px; /*文字大小*/}

.green{color:green; /*绿色*/font-size:20px;/*文字大小*/}</style></head>

<body><pclass=“red“>class选择器1</p><pclass=“green“>class选择器2</p><h3class=“green“>h3同样适用</h3></body></html>1.2.3ID选择器

表示方法：字符前加“#”。引用方法：在元素的id属性中引用。例如：＃title2{font-size:larger;font-weight:bold;}这个CSS规章只能用在具有这个id属性的元素上，<divid=“title2“>学校网站开发</div>

练习：假设html中有如下代码：<divid=“head”>我是页页头部</div><divid=“cont”>我是正文局部</div>假设想将以上文字的颜色设置为红色，则需要怎样设置选择器？1.2.4通用选择器表示方法：*作用：指定的样式可应用在页面里的全部元素。例如：把页面中全部支持字体属性的样式都设为“宋体”：*{font-family:“宋体“;}1.3在HTML中使用CSS的方法

1.3.1行内式在HTML标记中使用style属性，直接写入需要定义的样式。

例如：<pstyle=“color:Blue;font-size:large“>内嵌样式表<p>其中各个属性之间用“;”隔开，属性与属性值之间用“:”隔开。

<pstyle=“color:#FF0000;font-size:20px;text-decoration:underline;“>正文内容1</p><pstyle=“color:#000000;font-style:italic;“>正文内容2</p><pstyle=“color:#FF00FF;font-size:25px;font-weight:bold;“>正文内容3</p></body></html>1.3.2内嵌式

在HTML文档头部标记<HEAD>中，用<STYLE>标记来存放样式表代码。

例如：在<STYLE>标记中参与样式表代码，书写格式如下：<styletype=“text/css“> 选择器{属性名a：属性值a；属性名b：属性值b}</style>

<html><head><title>页面标题</title><styletype=“text/css“>

p{color:#0000FF;font-size:25px;}

</style></head><body><p>这是第1行正文内容……</p><p>这是第2行正文内容……</p><p>这是第3行正文内容……</p></body></html>1.3.3外部样式表的引入

网站中有单独的CSS文件〔扩展名为CSS〕，在主文档中调用CSS文件。调用的方法:1、链接式在页面的头部标记<HEAD>中参与使用link标记及其属性格式：<linkhref=“样式文件名“rel=“stylesheet“type=“text/css“/>

2、导入式

在页面的头部标记<HEAD>中使用@import使用方法：@importurl(“样式文件名);

1.4文字常用的属性名、属性值1、文字属性字体〔font-family〕文字大小〔font-size〕文字样式〔font-style〕文字粗细〔font-weight〕2、文本属性首行缩进〔text-indent〕文本颜色〔color〕文本对齐属性〔text-align〕文本修饰〔text-decoration〕学问点小结CSS规章格式？CSS选择器的根本类型？选择器｛属性名：属性值；属性名：属性值；｝标记选择器、类选择器、ID选择器CSS引入的方式？行内式、内嵌式、链

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论