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

来源：互联网发布：淘宝服装搭配编辑：程序博客网时间：2024/06/05 12:41

日期：2016年11月03日

标题：css的使用

编号：5

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

一.CSS的应用：

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

This is a paragraph

</p>

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

<head>

hr {color: sienna;}

p {margin-left: 20px;}

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

</style>

</head>

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

<head>

</head>

#/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的标签
- 属性选择器（只有规定了<!DOCTYPE>时，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 与 <CENTER>
      - 您可能会认为 text-align:center 与 <CENTER> 元素的作用一样，但实际上二者大不相同。
      - <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 - 链接被点击的时刻

<!DOCTYPE html>

<html>

<head>

<style>

a:link,a:visited

{

display:block;

font-weight:bold;

font-size:14px;

font-family:Verdana, Arial, Helvetica, sans-serif;

color:#FFFFFF;

background-color:#98bf21;

width:120px;

text-align:center;

padding:4px;

text-decoration:none;

}

a:hover,a:active

{

background-color:#7A991A;

}

</style>

</head>

<body>

<a href="/index.html" target="_blank">W3School</a>

</body>

</html>

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

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
  - 设置显示单元、行和列的算法
  - ————————————————————————————————
  - 如何做一个漂亮的表格

<html>

<head>

#customers

{

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

width:100%;

border-collapse:collapse;

}

#customers td, #customers th

{

font-size:1em;

border:1px solid #98bf21;

padding:3px 7px 2px 7px;

}

#customers th

{

font-size:1.1em;

text-align:left;

padding-top:5px;

padding-bottom:4px;

background-color:#A7C942;

color:#ffffff;

}

#customers tr.alt td

{

color:#000000;

background-color:#EAF2D3;

}

</style>

</head>

<body>

<tr>

<th>Company</th>

<th>Contact</th>

<th>Country</th>

</tr>

<tr>

<td>Apple</td>

<td>Steven Jobs</td>

</tr>

<td>Baidu</td>

<td>Li YanHong</td>

<td>China</td>

</tr>

<tr>

<td>Google</td>

<td>Larry Page</td>

</tr>

<td>Lenovo</td>

<td>Liu Chuanzhi</td>

<td>China</td>

</tr>

<tr>

<td>Microsoft</td>

<td>Bill Gates</td>

</tr>

<td>Nokia</td>

<td>Stephen Elop</td>

<td>Finland</td>

</tr>

</table>

</body>

</html>

- 边框：略
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，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
  - 但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：

<div>

some text

</div>

- - 在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。
  - 块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。
- 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全局变量的使用：

两种用法：

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

阅读全文

0 0