Web前端学习之CSS课件解析
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
还有一些相对少用的伪类:first-line :first-child :first :left :right :lang 等等，这里不再详细学习，具体可看相应 的技术书籍
CSS的继承关系
之前介绍的各种的选择器均可以通过不同的继承关 系来设置，例如：
#student p{color:#00f;} 指定只有在id名为student的标签元素后应用类选择器 name的标签元素才有效，即
CSS基础
多个网页共同使用。如果编写的CSS代码在多个网页中 应用，则需要建立一个单独的CSS文件，在需要应用的 网页中加入 <link rel=“stylesheet” href=“URL” type=“text/css” /> 标签调用。
URL表示CSS文件的存放路径（建议使用 相对路径） CSS文件的后续名(扩展名)为.CSS 在建设网站时建议使用这种方式，这样可 以用同一个或几个CSS文件控制整个网站 的表现风格与形式。修改维护起来也特别
CSS基础
CSS的基本语法
选择器{属性:值} 选择器用来表示样式表的应用部分。在其后的大括号中 要写上想要应用的样式。 如果指定设置的属性值有很多的话，各属性值之间要用 分号隔开。如：
选择器{属性1:值1;属性2:值2;…}
CSS的选择器在类选择器等情况下区分大小写，在重定 义标签选择器下不区分大小写，属性值则一律不区分大 小写。所以这里建议，不管什么选择器，所有都小写， 以避免混扰。
DIV+CSS布局基础
margin-top border-top padding-top padding-right margin-right padding-left border-right margin-left border-left
内容：content
padding-bottom border-bottom margin-bottom
CSS基础
类选择器。就是建立一个类，并为这个类定义一些样式， 在需要应用的标签内以class=“类名”的形式套用，例 如： .student{color:#00f;} <p class=“student”>张三<p> 类名的前边一定要加上一个小数点(.)以表示这是个类 选择器而不是重定义标签 类名建议起得有意思，避免起abcd等没有意思的名字 在需要应用类选择器的标签内用上class属性套用 在标签内用class属性套用时不需要加上小数点 一个标签要套用多个类的样式，可以使用空格隔开。例 如<p class=“student name”>张三</p>
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;
Css的书写规则和优先级
一般规则
优先级：四位数（2进制） 1 1 1 1 style Id class 标签 书写规则（命名空间） #Id #Id .class .class 比如： #content .list .spanFra bibliotek 例子 作业
DIV+CSS基础
代码的简写：
所有跟上，下，左，右有关的属性可以统一写 成： 属性:上 右 下 左 的格式 如果左右的值刚好相等，则可以简写成 属性:上 左右 下 的格式 如果上下，左右分别刚好相等，则可以简写成 属性:上下 左右 的格式 如果上下左右全部相同，则可以写成 属性:上下左右 的格式
方法: clear:both 父节点触发，例如oveflow:hidden
定位（4种）
Static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部 分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所 占的空间仍保留。
CSS基础
在单个标签中使用。在网页中所有HTML标签 中都可以使用style属性来单独为某一个标签设 置CSS样式。如： <p style=“color:#f00;”></p>
在XHTML1.1中已经不推荐使用style属性，所 以尽量不要使用这种方法。
CSS基础
CSS的优先级 样式表不仅只有网页设计人员能够设置，根据不 同的浏览器，用户也可以自由应用不同的样式表。 另外浏览器也有默认的样式表，一开始就会应用 这个默认的样式表。也就是说，对于同一个网页 文件，“设计人员”，“用户”和“浏览器”这3 者都可能会同时应用样式表，从而导致了样式表 的优先级问题。
CSS基础
ID选择器。ID选择器就是建立一个ID名称，并为其设置样 式，在需要应用的标签内以id=“ID选择器名”的形式调用， 例如
#student{color:#00f;} <p id=“student”>张三<p> ID名的前边一定要加上一个(#)以表示这是个ID选择器而不是 重定义标签 ID名建议起得有意思，避免起abcd等没有意思的名字 在需要应用ID选择器的标签内用上id属性套用 在标签内用id属性套用时不需要加上(#)号 id属性在标签中是一个比较特殊的名称，相当于一个人的名字， 在以后学习的javascript中需要使用。而一般来说，两个人的 名字最好不要相同，网页中任何两个标签的id名也最好不要相同， 以免编写javascript代码时运行出错。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能 是文档中的另一个元素或者是初始包含块。元素原先在正常文档 流中所占的空间会关闭，就好像元素原来不存在一样。元素定位 后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包
CSS基础
CSS样式表代码根据其摆放的位置可以分为三种
单个网页共同使用：在网页的<head>~</head> 之内使用 <style type=“text/css”> <!-~ --> </style>
这里的<!-- -->符号用来让那些不支持 CSS样式表的浏览器当作HTML的注释。 这种摆放的CSS只能在本页使用。
p{color:#f00;} 作用就是最其起作用范围内的所有<p>标签中的文字重新定义为红 色。 重定义HTML标签的选择器写的标签名不区分大小，建议用小写 重定义HTML标签的选择器写的一定要是HTML的合法标签名 重定义HTML标签的样式一旦建立，会对其作用范围内的标签自 动应用 如果对于多个HTML标签使用同一种样式的，可以使用以下格式 简写： p,h1,a{color:#00f;font-size:12px;} 表示对p、h1、a三个标签内的文字重新设置为蓝色，12px大 小 *表示所有HTML标签
CSS基础
伪类选择器。简单点说，伪类选择器的前一部分是属于 HTML标签，后面部分不属于HTML标签，只是属于 HTML标签的某一个状态，期间用冒号(:)隔开。
最常见的四个伪类选择器：
a:link 链接的初始状态 a:visited 链接点击后的状态 a:hover 鼠标处于链接上的状态 a:actived 链接被激活中的状态(这个很少用) 以上的四个状态设置时一定要按上面的顺序，否则会出错
这三者的优先级顺序如下： 1. 设计人员的样式表 2. 用户的样式表 3. 浏览器默认的样式
CSS基础
设计人员设计的样式表中可能也会出现冲突的现象，比 如以下例子： <style type=“text/css”> <!-p{color:#f00;} .student{color:#00f;} --> </style> <p class=“student”>张三</p> 对于文字“张三”，样式表中定义的两个样式表p 与.student都对其起作用，那么只能是一个有效。这 里谨记是应用“就近原则”选择，那个样式表离“张三” 最近，就用哪个，所以“张三”文字显示为蓝色 （#00F）。
盒子模型组成 边距：margin 边框线：border 内容周围的填充：padding 内容：content
DIV+CSS布局基础
盒子模型的实际宽度=内容的宽度+填充*2+边框*2+边距*2 盒子模型的实际高度=内容的高度+填充*2+边框*2+边距*2 盒子模型的3D层次
•背景颜色与背景图象同时 设置，则背景图象会把背景 颜色盖住，如果背景图象有 透明部分，则可以通过透明 部分看到背景颜色 •背景颜色与背景图象应用 不到边距(margin)部分区域 •同时设置背景颜色与背景 图片可以简写为以下格式： background:颜色 图片
DIV+CSS基础
凡涉及到边框样式(实线或虚线等)，宽度，颜 色的样式代码，可以简写成 边框:样式 宽度 颜色; 凡涉及到背景图片，背景颜色，背景水平位置， 背景垂直位置，是否固定等，一律可以简写成 background:颜色 图片 水平位置 垂直位置 是否固定 的格式
浮动熟悉
浮动元素不会占用空间 任何一个浮动都要最后都要清楚浮动，使其 占用空间
<div id="student"> <p>张三</p> </div> <p>李四</p> 只有“张三”是蓝色的，“李四”则不是。
类似的嵌套用法还有很多，也很灵活，具体要在以后的 实际学习，应用中掌握
DIV+CSS布局基础
CSS的盒子模型 HTML的所有标签都可以通过以下盒子模型来设置其样式
CSS基础
可以使用!important关键字改变其优先 级。 !important关键字写在要优先的属性值后 面。例如上面例子将p的样式改写如下：
p{color:#f00 !important;} 则文字“张三”显示为红色（#f00）。
CSS基础
CSS按照选择器的格式大致可以分为以下四种： 重定义HTML标签：选择器写的就是HTML的标签，意思是 对其起作用范围内的该标签重新定义一个样式，例如
网页客户端编程基础
之CSS学习
样式表(CSS)概述
HTML只不过是构成一个文本文件的一系列 标签，而具体指定其构成标签是如何显示的， 就需要用到样式表了。导入样式表之后，在 HTML中许多无法实现的功能均可实现，而 且，HTML会变得简洁，容量也会减少。从 而会大幅度的使网页的更新或修改等操作变 得非常容易。另外，从HTML中去除了有关 显示方面的限制，因此，网页就能够在更多 的环境中使用，增加了网页的通用性。