css样式表基础学习.pptx

第二章 css;本章要点 CSS基础 CSS样式 盒模型 定位与浮动 列表 网页布局与排版;css为什么出现？ HTML 标签原本被设计为用于定义文档内容,然而随着互联网的发展，用户对网页的展现要求越来越高。 新的 HTML 标签和属性大量涌现，在一个页面中用于修饰页面的标签大大增多，因此创建文档内容清晰地独立于文档表现层变得越来越困难。 为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出 STYLES（样式）。;2.1 CSS基础 2.1.1 CSS简介;2.1.2 在HTML中引入CSS的方法;（2）内部样式表 是在head/head标签中插入style /style标签，用法：;（3）链入外部样式表 是把样式表保存为一个样式表.css文件中，然后在页面中用link标记链接到这个样式表文件，link标签必须放到页面的head区内，如下所示： 在p.css文件中： 在head/head标签中;（4）导入式 导入时与链入式都是讲一个外部的css文件引入到html文件中。 导入外部样式表是指在内部样式表的style里导入一个外部样式表，导入时用@import，如下所示： css样式表如前所示 在head/head标签中;二者的区别： （1）链入式先引入样式在加载内容，导入时先加载内如，后引入样式。 （2） 在一个页面中如仅需要引入一个css样式，则采用 链入式； 如果需要引入多个，则先使用链入式引入一个总 目录，再采用导入时引入各个样式； 如果采用javascript来动态决定引入的目录，则采 用链入式。;想一想？; CSS选择器： CSS 选择器由三部分构成：选择器、属性和值：; 使用规范： 每条声明由一个属性和其值组成。属性和值被冒号分开。如果要定义不止一个声明，则需要用分号将每个声明分开。;2.2.1标记选择器：整体控制;2.2.2类选择器：精确控制;注： 1、类选择器经常配合标记选择器使用； 例如： 样式：style p{color:red;} .one{color:blue;} /style 使用：p class=“one” 2、可以同时使用两种类选择器， 中间以空格隔开：class=“one two”;2.2.3 id选择器：控制特殊的网页元素;注意： id 属性只能在每个 HTML文档中出现一次。 id 选择器不能结合使用，因为 id 属性不允许有以空格分隔的词列表。如p id=one two这样的写法是完全错误的。;2.2.4群选择器;2.2.5交集选择器;注意：交集选择器必须是对此标签中，具有某种id或class样式的规定，不针对其子标签。;2.2.6伪类选择器;2.2.7派生选择器;派生选择器的使用非常广泛，不仅标记选择器可以以这种方式组合，类选择器和id选择器也可以采用这种方式进行多层嵌套。;派生选择器有一个易被忽视的方面，即派生选择器所产生的影响不仅限于元素的“直接后代”，会影响到它的所有后代。;2.2.8子选择器;2.2.9属性选择器; 上例中属性选择器只是选择了具有某种属性的元素，而不论属性值为多少。接下来介绍只选择有特定属性值的元素。 【例2-10】属性选择器匹配 attribute_selector_match.html;2.2.10 CSS继承;继承的局限性：并非所有的CSS属性都可以继承。文本相关属性、列表相关属性、颜色相关属性是可以继承的。但是，border属性是用来设置元素边框的，不能被继承。边框类属性如border，margin，padding之类都是不能被继承的。 继承有时也会引起错误。例如定义body{color: red;}，有些浏览器会使表格之外的颜色变成红色，表格却不会改变，这时，可以定义为body, table, th, td{color:red;}使表格内的文字都会变成红色。;2.2.11层叠;2.3 CSS样式;1、背景色（background-color）;2、背景图片（background-image） ;3、背景重复（background-repeat） ;4、背景定位（background- position） ;第三种方式是百分数表示。如： background-position:50% 50%; 指的是中心位置，也就是将图片的中心位置和元素的中心位置对齐。 思考？ 若百分比为100% 100%？ 若百分比为60% 20%？;5、背景滚动（background- attachment）;6、背景简写属性（background）;2.3.2 字体;1、字体系列（font-fa