《CSS基本语法》PPT课件.ppt
第4章 CSS,4.1CSS简介4.2 CSS基本语法4.3 CSS属性4.4 引用CSS 4.5 HTML的4.6 HTML的,4.1CSS简介,XML：只包含了数据信息，没有涉及文档如何显示。注重数据结构化，赋予其明确的语意，使之易于进行数据交换。XML文档本身是重内容而不重形式。CSS：层叠样式单Cascading Style Sheet，建立文字图象内容和显示形式之间的关系。是一种专门描述结构文档表现方式的文档，它可以描述这些文档如何在屏幕上显示，也可以描述它们的打印效果，甚至声音效果。样式单可以包含在XML文档内部，也可以以独立的文档方式存在(后缀.css)。,CSS有两个推荐标准：CSS1和CSS2。CSS1于1996年12月通过，CSS2则于1998年5月通过。CSS2是在CSS1的基础上制定的，基本上涵盖了CSS1，并在CSS1的基础上增加了媒体类型、特性选择符、声音样式等功能，并对CSS1原有的一些功能进行了扩充。本课程使用css1。CSS文档中大小写不敏感,4.1CSS简介,例子student.xml：学生花名册 李华 河北 15 62875555 张三 北京 14 82873425,4.1CSS简介,例子student.css：大小写不敏感/*文件名:student.css*/StudentList,student font-size:15pt;font-weight:bold;color:blue;display:block;margin-bottom:5pt;origin,age,telephone font-weight:bold;font-size:12pt;display:block;color:block;margin-left:20pt;name font-weight:bold;font-size:14pt;display:block;color:red;margin-top:5pt;margin-left:8pt;,4.1CSS简介,显示效果,4.1CSS简介,CSS基本语法：注意冒号和分号 选择符属性名1:属性值1;属性名2:属性值2;选择符：元素标记名元素标记名：如果有多个标记，用逗号分开Class选择符，ID选择符或上下文选择符。规则表：一个或多个属性和属性值组成，由分号隔开，每个样式定义格式为 属性名:属性值CSS注解：格式为：/*字符串*,4.2CSS基本语法,大小写问题：CSS文档中大小写不敏感，但是XML大小写敏感，因此XML为了使用CSS，各元素的标记名要完全不同，而不仅仅是大小写不同,4.2CSS基本语法,属性解释：font-family属性：字体名，比如宋体等font-size属性：字体大小，取值用数字即可Color属性：前景色，可以用6位16进制数字，表示rgb三分量。也可以用red，yellow等。background-color属性：背景色。,4.2CSS基本语法,Class选择符：一个class选择符是一个任意字符串，为它定义一个样式，用于任何引用此名字的标记。定义语法格式1：*.class选择符名属性名1：属性值1;属性名2：属性值2;*一般省略，表示适用于所有标记。定义语法格式2：标记名.class选择符名属性名1：属性值1;属性名2：属性值2;该格式只用于指定的标记。,4.2.1 Class选择符,引用语法：Xxx表示标记，对于定义格式2，Xxx只能是定义时指定的标记。定义例子1：.x1color:red;font-familt:黑体 x1是class选择符，它定义了样式红色黑体引用例子1：表示该使用x1样式。x1可以用于其他任何标记。,4.2.1 Class选择符,定义例子2：origin.x2color:blue;font-familt:黑体 x2是class选择符，它定义了样式蓝色黑体引用例子2：表示该使用x2样式。x2不能用于除了origin外的其它标记。Class选择符特点：样式定义对任何允许引用的标记生效，如果不引用则不使用，增加了灵活性。,4.2.1 Class选择符,例子student.xml：Class选择符 学生花名册 李华河北 15 62875555 张三 北京 14 82873425,4.2.1 Class选择符,例子student.css：Class选择符/*文件名:student.css*/StudentList font-size:15pt;font-weight:bold;color:blue;display:block;margin-bottom:5pt;age,telephone font-weight:bold;font-size:12pt;display:block;color:block;margin-left:20pt;name font-weight:bold;font-size:14pt;display:block;color:red;margin-top:5pt;margin-left:8pt;.x1 font-size:25pt;color:red;origin.x2font-size:42pt;color:blue;,4.2.1 Class选择符,运行效果：,4.2.1 Class选择符,id选择符：一个id选择符是一个任意字符串，为它定义一个样式，用于任何引用此名字的标记。定义语法格式1：#id选择符名属性名1：属性值1;属性名2：属性值2;定义语法格式2：标记#id选择符名属性名1：属性值1;属性名2：属性值2;该格式只用于指定的标记。,4.2.2 id选择符,引用语法：Xxx表示标记，对于定义格式2，Xxx只能是定义时出现的标记。定义例子：#x1color:red;font-familt:黑体 x1是id选择符，它定义了样式红色黑体引用例子：表示该使用x1样式。x1可以用于任何标记。,4.2.2 id选择符,定义例子2：name#x2color:blue;font-familt:黑体 x2是id选择符，它定义了样式蓝色黑体引用例子2：表示该使用x2样式。x2不能用于其它标记。id选择符特点：功能与class选择符类似，语法不同。,4.2.2 id选择符,上下文选择符：为在一个标记在另一个标记中定义样式。定义语法格式：标记1 标记2属性名1：属性值1;属性名2：属性值2;含义：当在标记1中使用标记2时，标记2采用的样式。,4.2.3 上下文选择符,上下文选择符例子：map.xml 北京 上海 吉林 长春,4.2.3 上下文选择符,上下文选择符例子：map.css/*文件名:map.css*/province cityfont-style:normalcityfont-style:italic运行效果：在中使用时，不是斜体，单独使用时，变成斜体。,4.2.3 上下文选择符,4.3 CSS属性,字体属性：,显示属性：p103,4.3 CSS属性,颜色属性：,4.3 CSS属性,文本属性：,4.3 CSS属性,容器属性：,4.3 CSS属性,填充距属性：,4.3 CSS属性,边框属性,4.3 CSS属性,图文混排:,4.3 CSS属性,鼠标属性,4.3 CSS属性,动态转换,4.3 CSS属性,说明：由于属性繁多，不详细介绍。长度单位:可正可负号，百分比或绝对数值。绝对数值单位:in(英寸，1英寸=2.54厘米)cm(厘米，1厘米=10毫米)mm(米)pt(点，1点=1/72英寸)pc(帕，1帕=12点),4.3 CSS属性,颜色单位：一个关键字或一个RGB格式的数字。颜色关键字:aqua，black，blue，fuchsia，gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，yellow。RGB颜色：有四种形式#rrggbb：如#00cc00#rgb：如#0c0 rgb(x,x,x)：x是整数,0=x=255,如rgb(0,204,0)rgb(y%,y%,y%):y是整数,0=y=100,如rgb(0%,80%,0%),4.3 CSS属性,引用CSS：将样式表应用于XML文件，有三种方式：引用指令styleimport,4.4 引用CSS,引用指令：在XML文档中使用或,4.4.1 引用指令,定义style属性：在元素中定义style属性。使用style属性：在元素中使用style属性。注意单引号，因为双引号被用作包含样式声明。,4.4.2 style,位置：在CSS中使用，所有的import 声明必须放在样式表的开始部分。冲突：如果多个规则重复，以后面规则为准。语法：import url(文件名.css);例子：import url(http:/import url(/stylesheets/punk.css);,4.4.3 import,style优先上下文选择器优先如果没有为子元素定义样式，自动继承父元素样式如果没有定义任何样式，自动使用IE样式如果多个规则重复，以后面规则为准。!important：表示必须使用,4.4.4 冲突解决,标记：对一个段落使用样式，这个段落原来没有HTML标记。SPAN能接受STYLE、CLASS和ID属性。说明：SPAN的存在纯粹是应用样式，当样式表失效时它没有任何的作用。SPAN例子：,4.5 HTML的,SPAN例子代码:SPAN.firstwords font-variant:small-caps The first few words 前面是段落中的文字，会是小型大写字母。,4.5 HTML的,标记：对一个段落使用样式，这个段落原来没有HTML标记。Div能接受STYLE、CLASS和ID属性。说明：Div的存在纯粹是应用样式，当样式表失效时它没有任何的作用。Div与Span功能类似。Div例子：,4.6 HTML的,Div例子代码:SPAN.firstwords font-variant:small-caps The first few words 前面是段落中的文字，会是小型大写字母。,4.6 HTML的,Div与Span功能类似。Div与Span可以嵌套使用：Div与Span区别：自动形成一行，其后内容换行。不会换行。,4.6 HTML的,
