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样式表按书写位置可以分为________