Web前端开发（HTML5+CSS3+JavaScript） 课件 第4章 CSS基础.pptx

第4章CSS基础;Contents;1.CSS概念;1.3CSS基本语法(样式表);字体样式属性(代替font/font及其属性、i/i和b/b标记);2.基础选择器(5种);示例：使用内联样式和内部样式表，按以下要求设置段落样式。;1;head

!--引入外部样式表--

linkrel=stylesheethref=./css/my.css

/head;为具有id的元素定义样式；每个HTML元素都可以使用ID标识，ID是唯一的，因此是为特定的一个元素定义样式。;3.类选择器;style

/*标记选择器*/

img{

width:100px;

height:100px;

}

/*标记选择器*/

p{

width:200px;

}

/*样式类*/

.border{

border:2pxsolidred;

}

/style;示例：理解样式叠加与覆盖

分析：使用多个样式类（叠加样式：字体名/大小/颜色/粗细/斜体）;4.属性选择器;已给出以下的链接

ahref=title=baidunews百度/a

ahref=title=sinanews新浪/a

ahref=title=google谷歌/a

ahref=title=163news网易/a;示例：具有disabled属性的按钮，前/背景色为gray/#ccc（灰色），鼠标悬停时图标为not-allowed;按以下要求设计页面

1.标题1”CSS介绍”，使用内联样式，32px大小，灰色；

2.段落文字“来源：百度词条2010-10-22“，使用ID选择器，灰色，12px大小

3.图片使用标记选择器，设置宽度为200px，高度100px；

4.段落文字“内容简介”等，使用类选择器，设置背景颜色为whitesmoke,14px大小、宽度为600px；

5.使用全局样式，所有文字使用“微软雅黑”字体。;5.伪类和微元素选择器;示例：典型伪类hover的使用---可以运用在任何可见元素上。

1.使用伪类的链接效果：鼠标悬停时，改变为加粗、红色；

2.改变列表项前景和背景色：鼠标悬停时，反色显示。;h3应用于链接/h3

ahref=链接,鼠标悬停加粗、红色/a

h3应用其他元素，如li/h3

ul

li项目1/li

li项目2/li

/ul;:nth-of-type(n)

:nth-of-type(odd/even)，第n个指定的元素

:nth-last-of-type(n)：倒数第n个

了解:first-child:last-child:nth-child(n)---第n个子元素，指定的元素必须在该位置存在，如果该位置不是该类型元素，则无效。---两者都是某个容器内。;奇数项字体为红色;常用伪元素

1.首行：first-line；首字母：first-letter---一般应用于段落文字（了解）;用法：

选择器::before{

content:””;/*必须有该属性*/

//content元素的其他样式

};练习时刻;组合选择器;;分析，理解直接子元素和后代选择器的使用：li直接子元素a为红色；所有后代元素a加边框;pid=p1这是段落1/p

pid=p2这是段落2/p

ahref=这是链接1/a

pid=p3这是段落3ahref=这是链接2/a/p

ahref=这是链接3/a;3.CSS继承、层叠与优先级;id选择器类选择器*（通用选择器）标记选择器;要求：如下图效果，单行背景色为#ccc，鼠标悬停到某行时，背景为黑色、文本为白色;本章目标：

1.掌握样式的基本语法

2.掌握各种选择器的应用；

3.掌握内联样式、内部和外部样式的使用

4.掌握字体样式、边框、背景色等样式属性的使用

5.理解组合选择器

6.掌握典型伪类hover、nth-of-type(n)和典型伪元素before/after的的使用;一、.填空题

1.CSS的中文含义是_____________，其中第1个S是指_____________。

2.CSS基础选择器有______、__________、________、________、_________。

3.CSS组合选择器有______、_________、________、________、_________。

4.CSS样式表按书写位置可以分为________