css基础入门.pptx

CSS基础入门 微软创新俱乐部 微软创新俱乐部 1.什么是CSS 2.为什么要使用CSS 什么是CSS CSS（Cascading Style Sheet)称为层叠样式表，也可以称为CSS样式表或样式表，其文件扩展名为.CSS。CSS是用于增强或控制网页样式，并允许将样式信息与网页内容分隔开的一中标记性语言。 为什要使用CSS 一个美观、大方、简约的页面经通过HTML实现是非常困难的，HTML语言仅仅定义了网页结构，而对于文本样式没有过多涉及。这就需要一种技术对页面布局、字体、颜色、背景和其他图文效果的实现提供更加精确的控制，这种技术就是CSS 在HTML中使用CSS的方法 1.行内样式 2.内嵌样式 3.链接样式 4.导入样式 在HTML中使用CSS的方法 1.行内样式 直接把CSS代码添加到HTML的标记中，即作为HTML标记的属性标记存在。 使用方法就是在HTML中使用style属性。 p style=“color:red; font-size:12px”段落样式/p 在HTML中使用CSS的方法 2.内嵌样式 将CSS样式代码添加到head/head,并且用style/style进行声明 head style type=“text/css” P{ color:red; font-size:12px; } /style /head body p段落样式/p /body type是style的类型属性，text/css是type是他的值。它们是告诉浏览器这里面的文本内容（text)要用当前的层叠样式表（css)来解析，不能当作其它来解析 在HTML中使用CSS的方法 3.链接样式 很好地将“页面内容”和“样式风格代码”分离成两个或多个文件 使用方法是在外部定义CSS样式表并形成.css为扩展名的文件，然后在link链接标记链接到页面中，而且链接语句必须放在页面的 head标记区 head link rel=“stylesheet”type=“text/css” href=“1.css”/ /head rel指定链表到样式表，其值为stylesheet type表示样式表类型为css href指定了CSS样式表所在的位置，此处表示当前路径下名称为1.css的文件 在HTML中使用CSS的方法 4.导入样式 也需要创建CSS文件 但需要引入HTML文件中 head style @import”1.css” /style /head 在HTML中使用CSS的方法 优先级问题 行内样式？内嵌样式？链接样式？导入样式？ 行内样式内嵌样式链接样式导入样式 CSS基础语法 1.CSS选择器 2.选择器的声明 3.CSS的继承 CSS选择器 选择器也称为选择符。HTML语言中所有的标记都是通过不同的CSS选择器进行控制的。选择器不只是HTML文档中元素标记，它还可以是类（不同于面向对象中的类），ID（元素的唯一特殊名称）或是元素的某种状态（如a:link) 1.标签选择器 HTML文档由多个不同标记组成，而CSS选择器就用于声明那些标记采用的样式。 tagName{property:value} tagName：标记名称 比如：p、h1、body等 property: CSS属性 font-size、color等 value : CSS值 body{ background-image:url(wqd.jpg); background-repeat:no-repeat; background-size:100% 100%; } 2.类选择器 在一个页面中，使用标签选择器，会控制页面中所有此类标记的显示样式。如果需要重新定义此类标记的显示样式呢 .classValue{property:value｝ classValue是选择器的名称，具体名称CSS指定者自己定。 如果一个标记具有class属性且class属性值为classValue,那么该标记的呈现样式由该选择器自己定。 如： .aa{color:red;} p class=“aa” ……./p 3.ID选择器 与类选择器相似。 #idValue{property:value} idValue是选择器名称，自己定义。 类选择器可以给任意数量的标记定义。 但ID选择器在页面中的标记只能使用一次，一个网页文件中只能有一个元素使用某一个ID的值 优先级：ID选择器类选择器 4.伪类选择器 伪类定义的CSS样式并不是在标记的，而是作用在标记的状态上。 由于很多浏览器支持不同类型的伪类，没有统一的标准，所以很多伪类不会用到。 link(未访问链接） visited(已访问链接) active(激活链接) hover（鼠标停留在链接上） 定义的样式最长用于标记