您的位置: 首页  >  文章  >  如何从头搭建一个搜索引擎_css的使用

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

分类: 文章 • 2023-11-15 12:06:34
日期：2016年11月03日
标题：css的使用
编号：5
PS：这篇只是挑选了我们需要的部分，想系统学习HTML和CSS还是应该去W3School上学一下
一.CSS的应用：
  • 样式表的优先级：
    • 1.内联样式：写在tag里面的style
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
    • 2.内部样式表（推荐使用）:写在head标签里面的style标签里面
<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>
    • 3.外部样式表：写在同一个目录下的.css文件中，在html文件中的head中通过link标签来引用
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</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>
<style type="text/css">
#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>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>

<tr>
<td>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Baidu</td>
<td>Li YanHong</td>
<td>China</td>
</tr>

<tr>
<td>Google</td>
<td>Larry Page</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Lenovo</td>
<td>Liu Chuanzhi</td>
<td>China</td>
</tr>

<tr>
<td>Microsoft</td>
<td>Bill Gates</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Nokia</td>
<td>Stephen Elop</td>
<td>Finland</td>
</tr>


</table>
</body>
</html>
    • 边框：略
  • CSS框模型：
  • 如何从头搭建一个搜索引擎_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
<p>Some more text.</p>
</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 属性的值

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

相关推荐