DIV+CSS 笔记

  1. 为什么需要 CSS ? 什么是 CSS ? —— 为了美化网页页面,描述元素的皮肤。层叠样式表,可以对 HTML 页面所有元素进行相当细致的样式设置。

  2. CSS 主要干什么? —— 主要描述元素的字体颜色,背景颜色,边框等。

  3. CSS 主要有几种引用方式? ①元素内嵌:直接描述某个元素的样式 – 在标签元素中指定,如 <input style="..." />,引号中内容就是样式。通常用于单个特定的或量比较少的元素的样式指定。 ②页面嵌入:在 HTML 页面头部 <head> 内指定样式 – 在 <style type="text/css"> input { 样式名:样式值;样式名:样式值 ;样式名:样式值 ; ...}...</style> 格式中指定样式。通常用与批量元素的样式设置。 ③外部引入:将 CSS 文件写入单独的文件,使用时引入即可 – 在 <head> 标签中添加 <link> 标签,格式如下:<link type="text/css" rel="Stylesheet" href="../../..." />。这种方式用得最多,经常被做成网页皮肤,换 CSS 文件就相当于换皮肤。

  4. CSS 有哪些样式可以指定?常用样式有哪些? ①颜色: ·color:文本颜色。 ·background-color:背景色。 ·border-color: ②计量单位: ·像素:px。 ·百分比:n%。 ·em:相对单位。谁相对于谁的多少倍。 ③字体: ·xx-large:大字体。 ④边框:border-style,有如下属性值: ·solid:实线。 ·dotted:点。 ·border-color:边框颜色。 ·border-width:边框宽度。 ⑤其他样式: ·display:元素是否显示。可选值有:none – 不显示;block –显示为块级元素,即元素前后带有换行符;inline – 显示为内联元素,即元素前后没有换行符。 ·cursor:鼠标在元素上时的光标图标,可选值有:cursor – 默认光标;pointer – 手形;text – 输入 Bean;wait – 等待中/忙;help – 帮助。cursor 可以设置属性值是一个 url(),里面写光标的名称,后缀一般是 .cur – 静态光标 或 .ani – 动态光标。举例:cursor:url(xx.ani)。 ·list-style-type:设置列表 <ul>/<li> 显不显示圆点。默认显示,不显示可设置其值为 none。

  5. 什么是 CSS 样式选择器?样式选择器有什么用?CSS 有哪些样式选择器?样式优先级是怎样的?如何选择选择器? —— 对于非元素内联的样式需要定义样式选择器,换句话说就是某个样式适合于哪些元素。有三种样式选择器: ①标签选择器:对于指定的标签采用统一的样式。标签名就是样式开头,举例:insert { : ; : ; … }。{} 之中的就是样式。 ②类选择器:以定义一个命名的样式,然后在用到它的时候设定元素的 class 属性为样式的名称,名称之前用点 . 以与标签选择器区分。可以同时设定多个 class,名称之间加空格。举例说明: .class_name { : ; : ; … };{} 之中的就是样式。 <insert type="text" class="aaa bbb" />,表示该 <insert> 标签使用 aaa 和 bbb 两个样式。 ·标签+类选择器:类选择器的类名可以相同,不过在类名之前要用标签名作为前缀以示区分。举例说明:

    <input type="text" class="ccc" />
    <label class="ccc">
    

    此时 CSS 文件中应该这样写: input.ccc { : ; : ; … } label.ccc { : ; : ; … } ③id 选择器:为指定 id 的元素设定样式。样式的名称为 id,不过之前要有 # 符号。举例说明:

<input type="text" id="ddd" />
#ddd {
: ;
: ; 
... 
}

④关联选择器:描述标签内部的标签的内容的样式。标签之间用空格隔开,作为样式名称。举例说明: p strong { : ; : ; … }

<strong>PRAG</strong>
<p><strong>STRONG</strong></p>

会看到 <p>PRAG</p><strong>STRONG</strong> 的样式是不同的,其中 <strong> 标签具有了 <p> 标签中的样式。 ⑤组合选择器:同时为多个标签设定一个样式,标签名用 , 隔开即可作为样式名。举例说明:div,span,insert { : ; : ; … }。 ⑥伪选择器:为标签的不同状态设定不同的样式。用超链接标签 举例,其他标签查手册: a:visited { text-decoration:none } – 超链接点击过的样式。 a:active{ text-decoration:none } – 选中超链接时的样式。 a:link { text-decoration:none } – 超链接未被访问的样式。 a:hover { text-decoration:underline } – 鼠标移动到超链接的样式。 ·样式优先级:元素内嵌样式会覆盖外部引入的 CSS 文件中的样式。

  1. 什么是 DIV ?DIV 有什么用?DIV 有什么优点和特点? —— <div> 相当于层,用于将一些控件用 <div> 包裹起来,放在一个矩形的区域内,会影响布局,div 至始至终都是一个矩形。div 作用效果是一个方块的内容都属于 div。将内容放到 <div></div>层中,就可以将这些内容当成一个整体来处理,如整体隐藏或整体移动。类似于 WinForm 中的 Panel。

  2. 为什么会出现盒子模型?什么是 CSS 盒子模型?如何选择盒子模型? —— 为了给文档树中的各个元素排版定位(布局),浏览器会根据渲染模型(指元素怎么在页面上定位及布局的,包括 position 和 float 等等,visual formatting model)为每个元素生成四个嵌套的矩形框,分别称作content box、padding box、border box 和margin box。以上说的四种类型是不可分割的,并可能会重合,这就是CSS规范中描述的“盒模型”(box model),也就是以 CSS 的角度去看一个元素被渲染后的抽象形态。是一个元素自身的构成部分,不同于布局 – 多个元素在页面上的定位。DIV 即经典的 CSS 盒子模型,每个盒子都有:边界 – margin、边框 – border、填充 – padding、内容 – content四个属性。CSS 盒子模型有两种,一种是遵循 w3c 标准的标准盒子模型,另外一种就是 IE 盒子模型

两种盒子模型都包括 padding,margin,border,content,但是 ie 盒子模型的content 包括 border 和 padding。最好选择 W3C 标准的盒子模型,在网页的顶部加上 DOCTYPE 声明即可:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  1. 什么是 SPAN?SPAN 有什么特点? —— 作用类似于 DIV。但 span 只是把一段内容定义成一个整体进行操作,<span> 相当于一块,但形状不限于矩形。通常不应该布局、显示。

  2. DIV 和 SPAN 有什么区别? —— DIV 中的是块级元素,SPAN 中的是行内元素。块内元素和行内元素的区别如下: ①行内元素同一行水平排列。 ②块级元素各占据一行,垂直方向排列。 ③块级元素可以包含行内元素和块级元素。但行内元素不能包含块级元素。 ④行内元素与块级元素属性的不同,主要是盒模型属性上。 ⑤行内元素设置 width 无效,height 无效(可以设置 line-height ),margin 上下无效,padding 上下无效。 ·可以通过修改样式display属性改变元素是以块级还是行内元素呈现,当display的值设为block时,元素将以块级方式呈现;当 display 值设为 inline 时,元素将以行内形式呈现。 ·如果想让一个元素即可以设置宽度高度,又让它以行内形式显示,我们可以设置 display 的值为 inline-block。

块级元素和行内元素有哪些?可变元素有哪些? ①块级元素:

<address> //定义地址
<caption>//定义表格标题
<dd>    //定义列表中定义条目
<div>     //定义文档中的分区或节
<dl>    //定义列表
<dt>     //定义列表中的项目
<fieldset> //定义一个框架集
<form> //创建 HTML 表单
<h1>    //定义最大的标题
<h2>    // 定义副标题
<h3>     //定义标题
<h4>     //定义标题
<h5>     //定义标题
<h6>     //定义最小的标题
<hr>     //创建一条水平线
<legend>    //元素为 fieldset 元素定义标题
<li>     //标签定义列表项目
<noframes>    //为那些不支持框架的浏览器显示文本,于 frameset 元素内部
<noscript>    //定义在脚本未被执行时的替代内容
<ol>     //定义有序列表
<ul>    //定义无序列表
<p>     //标签定义段落
<pre>     //定义预格式化的文本
<table>     //标签定义 HTML 表格
<tbody>     //标签表格主体(正文)
<td>    //表格中的标准单元格
<tfoot>     //定义表格的页脚(脚注或表注)
<th>    //定义表头单元格
<thead>    //标签定义表格的表头
<tr>     //定义表格中的行

②行内元素:

<a>     //标签可定义锚
<abbr>     //表示一个缩写形式
<acronym>     //定义只取首字母缩写
<b>     //字体加粗
<bdo>     //可覆盖默认的文本方向
<big>     //大号字体加粗
<br>     //换行
<cite>     //引用进行定义
<code>    // 定义计算机代码文本
<dfn>     //定义一个定义项目
<em>     //定义为强调的内容
<i>     //斜体文本效果
<img>     //向网页中嵌入一幅图像
<input>     //输入框
<kbd>     //定义键盘文本
<label>     //标签为 input 元素定义标注(标记)
<q>     //定义短的引用
<samp>     //定义样本文本
<select> // 创建单选或多选菜单
<small>     //呈现小号字体效果
<span>     //组合文档中的行内元素
<strong> //加粗
<sub>     //定义下标文本
<sup>     //定义上标文本
<textarea>     //多行的文本输入控件
<tt>     //打字机或者等宽的文本效果
<var>    // 定义变量

③可变元素:根据上下文语境决定转为块级元素还是行内元素的元素。如下:

·<button>     //按钮
·<del>    // 定义文档中已被删除的文本
·<iframe>     //创建包含另外一个文档的内联框架(即行内框架)
·<ins>     //标签定义已经被插入文档中的文本
·<map>     //客户端图像映射(即热区)
·<object>     //object对象
·<script>     //客户端脚本

本文最后修改时间: 2015年03月14日 12:18:44 (完) CC BY-NC-ND 3.0

若您发现文章中的错误,并愿告知于我,或想与我交流,我的联系方式在: Contacts


上一篇 Web、HTML 入门

All The Best

下一篇 《The C++ Programming Language》 学习笔记