《前端学习之CSSPPT课件解析》由会员分享，可在线阅读，更多相关《前端学习之CSSPPT课件解析（24页珍藏版）》请在金锄头文库上搜索。
1、网页客户端编程基础,之CSS学习,样式表(CSS)概述,HTML只不过是构成一个文本文件的一系列标签，而具体指定其构成标签是如何显示的，就需要用到样式表了。导入样式表之后，在HTML中许多无法实现的功能均可实现，而且，HTML会变得简洁，容量也会减少。从而会大幅度的使网页的更新或修改等操作变得非常容易。另外，从HTML中去除了有关显示方面的限制，因此，网页就能够在更多的环境中使用，增加了网页的通用性。,CSS基础,CSS的基本语法 选择器属性:值 选择器用来表示样式表的应用部分。在其后的大括号中要写上想要应用的样式。 如果指定设置的属性值有很多的话，各属性值之间要用分号隔开。如： 选择器属性1
2、:值1;属性2:值2; CSS的选择器在类选择器等情况下区分大小写，在重定义标签选择器下不区分大小写，属性值则一律不区分大小写。所以这里建议，不管什么选择器，所有都小写，以避免混扰。,CSS基础,CSS样式表代码根据其摆放的位置可以分为三种 单个网页共同使用：在网页的之内使用 这里的符号用来让那些不支持CSS样式表的浏览器当作HTML的注释。 这种摆放的CSS只能在本页使用。,CSS基础,多个网页共同使用。如果编写的CSS代码在多个网页中应用，则需要建立一个单独的CSS文件，在需要应用的网页中加入 标签调用。 URL表示CSS文件的存放路径（建议使用相对路径） CSS文件的后续名(扩展名)为.
3、CSS 在建设网站时建议使用这种方式，这样可以用同一个或几个CSS文件控制整个网站的表现风格与形式。修改维护起来也特别方便。,CSS基础,在单个标签中使用。在网页中所有HTML标签中都可以使用style属性来单独为某一个标签设置CSS样式。如： 在XHTML1.1中已经不推荐使用style属性，所以尽量不要使用这种方法。,CSS基础,CSS的优先级 样式表不仅只有网页设计人员能够设置，根据不同的浏览器，用户也可以自由应用不同的样式表。另外浏览器也有默认的样式表，一开始就会应用这个默认的样式表。也就是说，对于同一个网页文件，“设计人员”，“用户”和“浏览器”这3者都可能会同时应用样式表，从而导致
4、了样式表的优先级问题。 这三者的优先级顺序如下： 设计人员的样式表 用户的样式表 浏览器默认的样式,CSS基础,设计人员设计的样式表中可能也会出现冲突的现象，比如以下例子： 张三 对于文字“张三”，样式表中定义的两个样式表p与.student都对其起作用，那么只能是一个有效。这里谨记是应用“就近原则”选择，那个样式表离“张三”最近，就用哪个，所以“张三”文字显示为蓝色（#00F）。,CSS基础,可以使用!important关键字改变其优先级。 !important关键字写在要优先的属性值后面。例如上面例子将p的样式改写如下： pcolor:#f00 !important; 则文字“张三”显示为
5、红色（#f00）。,CSS基础,CSS按照选择器的格式大致可以分为以下四种： 重定义HTML标签：选择器写的就是HTML的标签，意思是对其起作用范围内的该标签重新定义一个样式，例如 pcolor:#f00; 作用就是最其起作用范围内的所有标签中的文字重新定义为红色。 重定义HTML标签的选择器写的标签名不区分大小，建议用小写 重定义HTML标签的选择器写的一定要是HTML的合法标签名 重定义HTML标签的样式一旦建立，会对其作用范围内的标签自动应用 如果对于多个HTML标签使用同一种样式的，可以使用以下格式简写： p,h1,acolor:#00f;font-size:12px; 表示对p、h1
6、、a三个标签内的文字重新设置为蓝色，12px大小 *表示所有HTML标签,CSS基础,类选择器。就是建立一个类，并为这个类定义一些样式，在需要应用的标签内以class=“类名”的形式套用，例如： .studentcolor:#00f; 张三 类名的前边一定要加上一个小数点(.)以表示这是个类选择器而不是重定义标签 类名建议起得有意思，避免起abcd等没有意思的名字 在需要应用类选择器的标签内用上class属性套用 在标签内用class属性套用时不需要加上小数点 一个标签要套用多个类的样式，可以使用空格隔开。例如张三,CSS基础,ID选择器。ID选择器就是建立一个ID名称，并为其设置样式，在需要
7、应用的标签内以id=“ID选择器名”的形式调用，例如 #studentcolor:#00f; 张三 ID名的前边一定要加上一个(#)以表示这是个ID选择器而不是重定义标签 ID名建议起得有意思，避免起abcd等没有意思的名字 在需要应用ID选择器的标签内用上id属性套用 在标签内用id属性套用时不需要加上(#)号 id属性在标签中是一个比较特殊的名称，相当于一个人的名字，在以后学习的javascript中需要使用。而一般来说，两个人的名字最好不要相同，网页中任何两个标签的id名也最好不要相同，以免编写javascript代码时运行出错。,CSS基础,伪类选择器。简单点说，伪类选择器的前一部分是
8、属于HTML标签，后面部分不属于HTML标签，只是属于HTML标签的某一个状态，期间用冒号(:)隔开。 最常见的四个伪类选择器： a:link 链接的初始状态 a:visited 链接点击后的状态 a:hover 鼠标处于链接上的状态 a:actived 链接被激活中的状态(这个很少用) 以上的四个状态设置时一定要按上面的顺序，否则会出错 还有一些相对少用的伪类:first-line :first-child :first :left :right :lang等等，这里不再详细学习，具体可看相应的技术书籍,CSS的继承关系,之前介绍的各种的选择器均可以通过不同的继承关系来设置，例如： #stu
9、dent pcolor:#00f; 指定只有在id名为student的标签元素后应用类选择器name的标签元素才有效，即 张三 李四 只有“张三”是蓝色的，“李四”则不是。 类似的嵌套用法还有很多，也很灵活，具体要在以后的实际学习，应用中掌握,DIV+CSS布局基础,CSS的盒子模型 HTML的所有标签都可以通过以下盒子模型来设置其样式,DIV+CSS布局基础,盒子模型的实际宽度=内容的宽度+填充*2+边框*2+边距*2 盒子模型的实际高度=内容的高度+填充*2+边框*2+边距*2 盒子模型的3D层次,背景颜色与背景图象同时设置，则背景图象会把背景颜色盖住，如果背景图象有透明部分，则可以通过透
10、明部分看到背景颜色 背景颜色与背景图象应用不到边距(margin)部分区域 同时设置背景颜色与背景图片可以简写为以下格式： background:颜色 图片,DIV+CSS布局基础,在HTML的标签中，有部分已经是可以直接应用以上盒子模型的各项内容，我们称之为块级(Blocklevel)标签。有部分是作为文章的一部分包含在内的标签，我们称之为行内(inline)标签。以下是常用的块级标签与行内标签： 块级标签：div，dl，form，h1h6，hr，ol，p，table，ul 行内标签：a，button，iframe，img，input，label，select，span，textarea 块
11、级标签与行内标签最明显的区别：块级标签会默认情况下会自动另起一行；而行内标签则不会。 块级标签向行内标签转换使用display:inline样式；行内标签向块级标签转换使用display:block样式。 行内标签设置为块级标签后也会自动换行，可以设置浮动属性清除其自动换行。如float:left;,DIV+CSS布局基础,DIV+CSS基础,代码的简写： 所有跟上，下，左，右有关的属性可以统一写成：属性:上 右 下 左的格式 如果左右的值刚好相等，则可以简写成 属性:上 左右 下 的格式 如果上下，左右分别刚好相等，则可以简写成 属性:上下 左右 的格式 如果上下左右全部相同，则可以写成 属
12、性:上下左右 的格式,DIV+CSS基础,凡涉及到边框样式(实线或虚线等)，宽度，颜色的样式代码，可以简写成 边框:样式 宽度 颜色; 凡涉及到背景图片，背景颜色，背景水平位置，背景垂直位置，是否固定等，一律可以简写成 background:颜色 图片 水平位置 垂直位置 是否固定 的格式,浮动熟悉,浮动元素不会占用空间 任何一个浮动都要最后都要清楚浮动，使其占用空间 方法: clear:both 父节点触发，例如oveflow:hidden,定位（4种）,Static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relativ
13、e 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。,Css的书写规则和优先级,一般规则 优先级：四位数（2进制） 1 1 1 1 style Id class 标签 书写规则（命名空间） #Id #Id .class .class 比如： #content .list .span,例子 作业,
