Web前端学习之CSS课件_第1页
Web前端学习之CSS课件_第2页
Web前端学习之CSS课件_第3页
Web前端学习之CSS课件_第4页
Web前端学习之CSS课件_第5页
已阅读5页，还剩19页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页客户端编程基础之CSS学习样式表(CSS)概述HTML只不过是构成一个文本文件的一系列标签，而具体指定其构成标签是如何显示的，就需要用到样式表了。导入样式表之后，在HTML中许多无法实现的功能均可实现，而且，HTML会变得简洁，容量也会减少。从而会大幅度的使网页的更新或修改等操作变得非常容易。另外，从HTML中去除了有关显示方面的限制，因此，网页就能够在更多的环境中使用，增加了网页的通用性。CSS基础CSS的基本语法选择器{属性:值}选择器用来表示样式表的应用部分。在其后的大括号中要写上想要应用的样式。如果指定设置的属性值有很多的话，各属性值之间要用分号隔开。如：选择器{属性1:值1;属性2:值2;…}CSS的选择器在类选择器等情况下区分大小写，在重定义标签选择器下不区分大小写，属性值则一律不区分大小写。所以这里建议，不管什么选择器，所有都小写，以避免混扰。CSS基础CSS样式表代码根据其摆放的位置可以分为三种单个网页共同使用：在网页的<head>~</head>之内使用

<styletype=“text/css”> <!-- ~

--> </style>这里的<!---->符号用来让那些不支持CSS样式表的浏览器当作HTML的注释。这种摆放的CSS只能在本页使用。CSS基础多个网页共同使用。如果编写的CSS代码在多个网页中应用，则需要建立一个单独的CSS文件，在需要应用的网页中加入

<linkrel=“stylesheet”href=“URL”type=“text/css”/>

标签调用。URL表示CSS文件的存放路径（建议使用相对路径）CSS文件的后续名(扩展名)为.CSS在建设网站时建议使用这种方式，这样可以用同一个或几个CSS文件控制整个网站的表现风格与形式。修改维护起来也特别方便。CSS基础在单个标签中使用。在网页中所有HTML标签中都可以使用style属性来单独为某一个标签设置CSS样式。如：<pstyle=“color:#f00;”></p>在XHTML1.1中已经不推荐使用style属性，所以尽量不要使用这种方法。CSS基础CSS的优先级 样式表不仅只有网页设计人员能够设置，根据不同的浏览器，用户也可以自由应用不同的样式表。另外浏览器也有默认的样式表，一开始就会应用这个默认的样式表。也就是说，对于同一个网页文件，“设计人员”，“用户”和“浏览器”这3者都可能会同时应用样式表，从而导致了样式表的优先级问题。这三者的优先级顺序如下：设计人员的样式表用户的样式表浏览器默认的样式CSS基础设计人员设计的样式表中可能也会出现冲突的现象，比如以下例子：<styletype=“text/css”><!-- p{color:#f00;} .student{color:#00f;}--></style><pclass=“student”>张三</p>对于文字“张三”，样式表中定义的两个样式表p与.student都对其起作用，那么只能是一个有效。这里谨记是应用“就近原则”选择，那个样式表离“张三”最近，就用哪个，所以“张三”文字显示为蓝色（#00F）。CSS基础可以使用!important关键字改变其优先级。!important关键字写在要优先的属性值后面。例如上面例子将p的样式改写如下：p{color:#f00!important;}则文字“张三”显示为红色（#f00）。CSS基础CSS按照选择器的格式大致可以分为以下四种：重定义HTML标签：选择器写的就是HTML的标签，意思是对其起作用范围内的该标签重新定义一个样式，例如p{color:#f00;}作用就是最其起作用范围内的所有<p>标签中的文字重新定义为红色。重定义HTML标签的选择器写的标签名不区分大小，建议用小写重定义HTML标签的选择器写的一定要是HTML的合法标签名重定义HTML标签的样式一旦建立，会对其作用范围内的标签自动应用如果对于多个HTML标签使用同一种样式的，可以使用以下格式简写： p,h1,a{color:#00f;font-size:12px;}

表示对p、h1、a三个标签内的文字重新设置为蓝色，12px大小*表示所有HTML标签CSS基础类选择器。就是建立一个类，并为这个类定义一些样式，在需要应用的标签内以class=“类名”的形式套用，例如：.student{color:#00f;}<pclass=“student”>张三<p>类名的前边一定要加上一个小数点(.)以表示这是个类选择器而不是重定义标签类名建议起得有意思，避免起abcd等没有意思的名字在需要应用类选择器的标签内用上class属性套用在标签内用class属性套用时不需要加上小数点一个标签要套用多个类的样式，可以使用空格隔开。例如<pclass=“studentname”>张三</p>CSS基础ID选择器。ID选择器就是建立一个ID名称，并为其设置样式，在需要应用的标签内以id=“ID选择器名”的形式调用，例如#student{color:#00f;}<pid=“student”>张三<p>ID名的前边一定要加上一个(#)以表示这是个ID选择器而不是重定义标签ID名建议起得有意思，避免起abcd等没有意思的名字在需要应用ID选择器的标签内用上id属性套用在标签内用id属性套用时不需要加上(#)号id属性在标签中是一个比较特殊的名称，相当于一个人的名字，在以后学习的javascript中需要使用。而一般来说，两个人的名字最好不要相同，网页中任何两个标签的id名也最好不要相同，以免编写javascript代码时运行出错。CSS基础伪类选择器。简单点说，伪类选择器的前一部分是属于HTML标签，后面部分不属于HTML标签，只是属于HTML标签的某一个状态，期间用冒号(:)隔开。最常见的四个伪类选择器：a:link链接的初始状态a:visited链接点击后的状态a:hover鼠标处于链接上的状态a:actived链接被激活中的状态(这个很少用)以上的四个状态设置时一定要按上面的顺序，否则会出错还有一些相对少用的伪类:first-line :first-child:first:left:right:lang等等，这里不再详细学习，具体可看相应的技术书籍CSS的继承关系之前介绍的各种的选择器均可以通过不同的继承关系来设置，例如：#studentp{color:#00f;}指定只有在id名为student的标签元素后应用类选择器name的标签元素才有效，即<divid="student"><p>张三</p></div><p>李四</p>只有“张三”是蓝色的，“李四”则不是。类似的嵌套用法还有很多，也很灵活，具体要在以后的实际学习，应用中掌握

DIV+CSS布局基础CSS的盒子模型

HTML的所有标签都可以通过以下盒子模型来设置其样式盒子模型组成边距：margin边框线：border内容周围的填充：padding内容：contentDIV+CSS布局基础盒子模型的实际宽度=内容的宽度+填充*2+边框*2+边距*2盒子模型的实际高度=内容的高度+填充*2+边框*2+边距*2盒子模型的3D层次背景颜色与背景图象同时设置，则背景图象会把背景颜色盖住，如果背景图象有透明部分，则可以通过透明部分看到背景颜色背景颜色与背景图象应用不到边距(margin)部分区域同时设置背景颜色与背景图片可以简写为以下格式：background:颜色图片DIV+CSS布局基础在HTML的标签中，有部分已经是可以直接应用以上盒子模型的各项内容，我们称之为块级(Blocklevel)标签。有部分是作为文章的一部分包含在内的标签，我们称之为行内(inline)标签。以下是常用的块级标签与行内标签：块级标签：div，dl，form，h1~h6，hr，ol，p，table，ul行内标签：a，button，iframe，img，input，label，select，span，textarea块级标签与行内标签最明显的区别：块级标签会默认情况下会自动另起一行；而行内标签则不会。块级标签向行内标签转换使用display:inline样式；行内标签向块级标签转换使用display:block样式。行内标签设置为块级标签后也会自动换行，可以设置浮动属性清除其自动换行。如float:left;DIV+CSS布局基础margin-topborder-toppadding-top内容：contentmargin-rightmargin-bottommargin-leftborder-rightborder-bottomborder-leftpadding-rightpadding-bottompadding-leftDIV+CSS基础代码的简写：所有跟上，下，左，右有关的属性可以统一写成： 属性:上

右

下

左 的格式如果左右的值刚好相等，则可以简写成

属性:上

左右

下

的格式如果上下，左右分别刚好相等，则可以简写成 属性:上下

左右

的格式如果上下左右全部相同，则可以写成 属性:上下左右

的格式DIV+CSS基础凡涉及到边框样式(实线或虚线等)，宽度，颜色的样式代码，可以简写成

边框:样式

宽度

颜色;凡涉及到背景图片，背景颜色，背景水平位置，背景垂直位置，是否固定等，一律可以简写成

background:颜色

图片

水平位置

垂直位置

是否固定的格式浮动熟悉浮动元素不会占用空间任何一个浮动都要最后都要清楚浮动，使其占用空间

方法:clear:both

父节点触发，例如oveflow:hidden定位（4种）Static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论