Download presentation
Presentation is loading. Please wait.
1
武汉纺织大学传媒学院 cm.wtu.edu.cn
第13节 CSS选择器 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/4/8 传媒学院
2
1、选择器 CSS代码例子 选择器也可叫选择符 h1{color:red;background:yellow;}
h1就是上面CSS样式的选择器，html是通过选择器来使用CSS样式的 选择器也可叫选择符 2019/4/8 传媒学院
3
2、标签样式 标签样式是直接使用标签的名称作为选择器 标签样式只用定义，不需要使用，对应的标签自动就具有了该标签样式的效果
比如样式：p{color:red}；就意味着网页中所有的p标签（段落标签）将具有该样式效果（字体颜色为红色） DW中创建标签样式 2019/4/8 传媒学院
4
3、类样式 语法 classname是选择器名称，前面的点（.）表示它是类样式
必须使用才能生效；如果要给某个标签使用类样式效果，则通过标签的class属性来实现（class=选择器名称），例如 <font class=s>…</font> 2019/4/8 传媒学院
5
4、ID样式 语法： classname是选择器名称，前面的#号表示它是ID样式
必须使用才能生效；如果要给某个标签使用ID样式效果，则通过标签的id属性来实现（id=选择器名称），例如 <p id=s>…</p> 2019/4/8 传媒学院
6
DW中创建ID样式 2019/4/8 传媒学院
7
5、选择器命名 类样式和id样式中，我们可以自己指定选择器名称 选择器名称必须以英文字母开头，否则浏览器不能显示效果 选择器命名最好有意义
a123，test，wtu，是正确的 1，123，1.1，1a，都是错误的 选择器命名最好有意义 比如title，可能是表示设置标题的样式 2019/4/8 传媒学院
8
6、通常如何定义样式？ 先给出标签的class或id属性，再定义CSS 通常来说，通过dreamweaver定义样式，都是采用这样的方式
使用dreamweaver定义的话，dw会自动判断选择器名称，如果使用dw给定的名称，则可省略使用样式步骤 也就是先使用后定义 先使用后不定义，也不会出错，只是没有效果 2019/4/8 传媒学院
9
作业 利用dreamweaver分别定义: 1.标签（h1，紫色）样式、2.三个id样式（红色，字体大小：16px；绿色，字体大小：16px；蓝色色，字体大小：16px）类、3.类样式（白色，背景颜色橙色，字体大小：18px）。用h1标签包含HTML, CSS, Javascript; 用段落p标签包含它们的介绍，并分别使用定义的三个id样式；用b标签包含最后一行文字，并使用定义好的类样式。效果如下： 2019/4/8 传媒学院
10
文字素材 HTML HTML(HyperText Markup Language)，超文本标记语言。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。 CSS 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 JavaScript JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。 2019/4/8 传媒学院
Similar presentations
