如何从头搭建一个搜索引擎_css的使用

日期：2016年11月03日

标题：css的使用

编号：5

PS：这篇只是挑选了我们需要的部分，想系统学习HTML和CSS还是应该去W3School上学一下

---

一.CSS的应用：

• 样式表的优先级：
• • 1.内联样式：写在tag里面的style

This is a paragraph

• • 2.内部样式表（推荐使用）:写在head标签里面的style标签里面

• • 3.外部样式表：写在同一个目录下的.css文件中，在html文件中的head中通过link标签来引用

#/mystyle.css:

hr {color: sienna;}

p {margin-left: 20px;}

body {background-image: url("images/back40.gif");}

• • 4.浏览器的default设置
•  2和3的基本语法：selector{key1:value1;key2:value2; ...}
• • 如果值为若干单词，需要加引号：

p {font-family: "sans serif";}

• • 根据CSS，子元素从父元素中继承属性
  • 派生选择器：

li strong {     #表示li下面的strong标签

    font-style: italic;

    font-weight: normal;

  }

• •  id选择器：(x)#y：类型为x，id为y的标签
  •  class选择器：(x).y：类型为x，class为y的标签
  •  属性选择器（只有规定了时，IE7,8才支持属性选择器，IE6及更低的版本不支持属性选择）：
  • • [x(=y)]：带有属性x(其值为y)的所有标签
    • [x~=y]：带有属性x且x的值中包含y词项的标签（一般用于像“test value”之类的用空格划分的值）
    •  [x|=y]：用于选取带有以指定值开头的属性值的元素，该值必须是整个单词(适用于由连字符分隔的属性值)
    • [x$=y]:用于匹配结尾
•  CSS样式：
• • 背景色：background-color(不能继承)
  • • 背景图像：background-image，值为一个url值（网址或者文件在机器中的路径）
    • 背景重复（平铺）：background-repeat：
    • • repeat-y：在垂直方向平铺
      • repeat-x:在水平方向平铺
      • no-repeat：不允许平铺
    • 背景定位：background-position：
    • • 单一关键字：
      • • center <=> center center
        • top <=>  top center 或 center top
        • bottom <=>  bottom center 或 center bottom
        • right <=>  right center 或 center right
        • left <=>  left center 或 center left
      • 百分比：background-position:50% 50%;
      • 长度值：background-position:50px 50px;
    • 背景关联：background-attachment:fixed 防止背景图像随着文档滚动，默认值为scroll
  • 文本：
  • • 缩进：text-indent:length;（length为负值会出现悬挂缩进）
    • 水平对齐：text-align
    • • left：
      • right
      • center（将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。）
      • • text-align:center 与
        • 您可能会认为 text-align:center 与 元素的作用一样，但实际上二者大不相同。
        • 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响
      • justify：在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。（word中的平行的三条杠)
    • 字（单词）间隔：word-spacing:
    • • normal或者0（默认值）
      • 正值拉开间距，负值减小间距
    • 字符间距：letter-spacing：与上同，修改字符间距
    • 字符转换：text-transform：
    • • none：nothing
      • uppercase：转大写
      • lowercase：转小写
      • capitalize：首字母大写
    • 文本装饰：text-decoration：
    • • none：nothing
      • underline：下划线
      • overline：上画线
      • line-through：划去
      • blink：闪烁
    • 空白符处理：white-space：
    • • 默认的html处理把连在一起的空白符（\n,tab,空格）当作一个空格处理
      • 设置值为normal可以实现上式处理
      • pre；不忽略
      • nowarp：防止换行，除非使用了一个br
      • 。。。。。。
    • 文本方向：direction：
    • • ltr：left to right
      • rtf：...
  • 字体：
  • • 五种通用字体（使用font-family制定）：
    • • Serif 字体
      • 这些字体成比例，而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度，则成该字符是成比例的。例如，小写 i 和小写 m 的宽度就不同。上下短线是每个字符笔划末端的装饰，比如小写 l 顶部和底部的短线，或大写 A 两条腿底部的短线。Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook。
      • Sans-serif 字体
      • 这些字体是成比例的，而且没有上下短线。Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。
      • Monospace 字体
      • Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出，甚至更老式的视频显示终端。采用这些字体，每个字符的宽度都必须完全相同，所以小写的 i 和小写的 m 有相同的宽度。这些字体可能有上下短线，也可能没有。如果一个字体的字符宽度完全相同，则归类为 Monospace 字体，而不论是否有上下短线。Monospace 字体的例子包括 Courier、Courier New 和 Andale Mono。
      • Cursive 字体
      • 这些字体试图模仿人的手写体。通常，它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如，大写 A 再其左腿底部可能有一个小弯，或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。
      • Fantasy 字体
      • 这些字体无法用任何特征来定义，只有一点是确定的，那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。
    • 字体风格：font-style
    • • normal；
      • italic：斜体
      • oblique：倾斜显示
    • font-variant:small-caps：设置小型大写字母
    • font-weight：字体加粗[100,900]
    • 字体大小：font-size：
    • • 普通文本（比如段落）的默认大小是 16 像素 (16px=1em)
  • 链接：
  • • 链接的四种状态：
    • • a:link - 普通的、未被访问的链接
      • a:visited - 用户已访问的链接
      • a:hover - 鼠标指针位于链接的上方
      • a:active - 链接被点击的时刻

W3School

• • 列表：
  • • 系统自带的列表样式：

ul.circle {list-style-type:circle;}

ul.square {list-style-type:square;}

ol.upper-roman {list-style-type:upper-roman;}

ol.lower-alpha {list-style-type:lower-alpha;}

• • • 列表项图像:ul li {list-style-image : url(xxx.gif)}
    • 列表项位置：CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。
    • 简写列表样式：为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style
  • 表格：
  • • ————————————————————————————————
    • border-collapse
    • 设置是否把表格边框合并为单一的边框。
    • border-spacing
    • 设置分隔单元格边框的距离。
    • caption-side
    • 设置表格标题的位置。
    • empty-cells
    • 设置是否显示表格中的空单元格。
    • table-layout
    • 设置显示单元、行和列的算法
    • ————————————————————————————————
    • 如何做一个漂亮的表格

Company	Contact	Country
Apple	Steven Jobs	USA
Baidu	Li YanHong	China
Google	Larry Page	USA
Lenovo	Liu Chuanzhi	China
Microsoft	Bill Gates	USA
Nokia	Stephen Elop	Finland

• • 边框：略
• CSS框模型：
• 

• • 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素
  • PS：背景应用于由内容和内边距、边框组成的区域
  • 在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
  • Padding：
  • • padding
    • 简写属性。作用是在一个声明中设置元素的所内边距属性。
    • padding-bottom
    • 设置元素的下内边距。
    • padding-left
    • 设置元素的左内边距。
    • padding-right
    • 设置元素的右内边距。
    • padding-top
    • 设置元素的上内边距。
  • Border：http://www.w3school.com.cn/css/css_border.asp
  • margin：同Padding
  • 外边距合并问题：http://www.w3school.com.cn/css/css_margin_collapsing.asp
•  CSS定位：
• • 一切皆为框：
  • • div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
    • 您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
    • 但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：

some text

Some more text.

• • • 在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。
    • 块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。
  • CSS定位机制：
  • • CSS有三种基本的定位机制：普通流，浮动和绝对定位
    • 除非专门指定，否则所有的框都在普通流中定位  -> 普通流的元素的位置由元素在（X）HTML中的位置决定，块级框从上到下一个一个地排列，框之间的垂直距离是由框的垂直外边距计算出来的
    • 行内框在一行中水平布置，可以使用水平框间距，边框和外边距调整他们的间距，但是，垂直内边距，边框和外边距不影响内框的高度。由一行形成的水平框成为行框（Line Box），行狂的间距总是能容纳它所包含的所有内框，如要设置行高，需要增加这个框的高度
    • CSS的position属性：
    • • static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
      • relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
      • absolute： 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框
      • fixed：元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身
      • PS：相对定位实际上被视作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置
    • 其他的定位属性：
    • • position
      • • 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
      • top
      • • 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
      • right
      • • 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
      • bottom
      • • 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
      • left
      • • 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
      • overflow
      • • 设置当元素的内容溢出其区域时发生的事情。
      • clip
      • • 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
      • vertical-align
      • • 设置元素的垂直对齐方式。
      • z-index
      • • 设置元素的堆叠顺序。
      • http://www.w3school.com.cn/css/css_positioning.asp
    • CSS的浮动定位：
    • • 特性：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
      • float属性：
      • • float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
        • 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
        • 可能的值

值	描述
left	元素向左浮动。
right	元素向右浮动
none	默认值。元素不浮动，并会显示在其在文本中出现的位置
inherit	规定应该从父元素继承 float 属性的值

• • • • •  http://www.w3school.com.cn/css/css_positioning_floating.asp

  

---

二.python全局变量的使用：

     两种用法：

1. 在全局变量区先声明为global，再定义，以后每次在不同的函数中使用前再次声明为global
2. 在另一个文件（一般专门用来声明定义全局变量）中定义，在文件头import这个文件，然后每次从那个文件中调用全局变量
   1.  Python查找变量是顺序是：先局部变量，再全局变量