css简介：

web文档的结构由html元素定义，而这些html元素是如何显示的，则是由层叠样式表css来定义，这样就实现了结构与表现的分离。

1、外部样式表

可以将样式定义放在一个单独的文件中，并且在需要该样式的文档中使用，这样样式表称为外部样式表。

2、嵌入式样式表

嵌入式样式表是用<style>元素将样式包含在网页内部的样式设置，其作用范围仅限于该网页。

<style>元素与其它html元素一样，有一个开始标记和一个结束标记。在两个标记之间的任何代码都被看作为样式定义。同样，<style>标记之间的任何代码必须遵循样式定义规则。

文档的<style>段必须出现在文档的<head>段内，并且可以有多个<style>段。

<style>标记语法格式：

<style type=“text/css”>

.....样式定义.....

</style>

3、内联样式表

大多数的html标记都包含有一个style属性，允许指定在标记显示时的样式，这种样式规则的定义方法称为内联样式。

如果想要一个特定的<h1>标记的文本显示为红色，可以使用以下代码：

<h1 style="color：red;">红色标题列</h1>

4、样式规则语法

body（选择器）{【color(属性):black(值);    padding（属性）:lem（值）】（声明）;}

5、绝对长度：cm厘米，mm毫米，in英寸，pt点，pc（picas）

相对长度：em（ems），px像素，ex（exes）

6、设置元素内容字体：

设置字体名称font-family    （值：arial，verdana，和times，new，roman  ）

设置字体倾斜程度font-style    （值：normal，italic，oblique）

设置字体的变体font-variant    （值：normal，small-caps）

设置字重font-weight    （值：normal，bold，bolder，lighter，100、200、300、400、500、600、700、800、900）

设置字体大小font-size    （值：xx-small，x-small，small，medium，large，x-large，xx-large）

content：内容

border：边框

padding：内边框

margin：外边距

border-style边框     border-width边框粗细       border-color边框颜色

padding-top内层上边距     padding-left左侧     padding-right右侧      padding-bottom高度

margin-top    margin-left    margin-right     padding-bottom

float：left（浮动）

vertical-align：baseline（文字行高）

letter-spacing（每个文字的间行）

列如：

  <!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
  .xin1{
  background-color: black;
  border: 1px solid red;
  width: 1001px;
  height: 1420px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
   
   
   
   
  }
  .xin2 {
  font-size: 80px;
  font-weight: 900;
  color: azure;
  float: left;
   
  }
  .xin3{
  color: azure;
  font-size: 10px;
  margin-top: 2px;
  }
  .xin4{
  font-size: 10px;
  margin-top: 20px;
  text-decoration: underline;
  color: aliceblue;
  margin-left: 2px;
   
  }
  .xin5{
  margin-top: 2px;
  float: left;
  border:1px dashed azure;
   
  }
  .xin6{
  color: azure;
  font-size: 10px;
  margin-left:168px;
  margin-right: 350px;
   
   
  }
  .xin7{
  font-size: 10px;
  margin-top: 2px;
  text-decoration: underline;
  color: aliceblue;
  float: right;
   
  }
  .xin8{
  margin-top: 40px;
  float: right;
  border:1px dashed azure;
  margin-right: 2px;
   
  }
  .xin9{
  color: azure;
  font-size: 10px;
  margin-top: 50px;
  margin-right: 235px;
  margin-left: 2px;
   
  }
  .xin10{
  font-size: 10px;
  margin-top: 2px;
  text-decoration: underline;
  color: azure;
   
  }
  .xin11{
  margin-top: 10px;
  float: left;
  border:1px dashed azure;
  margin-left: 2px;
  }
  .xin12{
  color: azure;
  font-size: 10px;
  margin-top: 19px;
  margin-left: 263px;
  margin-right: 235px;
  }
  .xin13{
  font-size: 10px;
  margin-top: 2px;
  text-decoration: underline;
  color: azure;
  float: right;
   
  }
  .xin14{
  margin-top:35px ;
  float: right;
  border: 1px dashed azure;
  margin-right: 1px;
  }
  .xin15{
  color: azure;
  font-size: 10px;
  margin-top: 48px;
  margin-left: 263px;
  margin-right: 271px;
  }
  .xin16{
  color: azure;
  font-size: 10px;
  margin-top: 2px;
  text-decoration: underline;
   
  }
  .xin17{
  margin-top: 5px;
  float: left;
  border: 1px dashed azure;
   
  }
  .xin18{
  color: azure;
  font-size: 10px;
  margin-top: 17px;
  margin-left: 250px;
  margin-right: 275px;
  }
  .xin19{
  color: azure;
  font-size: 10px;
  margin-top: 2px;
  text-decoration: underline;
  float: right;
  }
  .xin20{
  margin-top:30px;
  float: right;
  border: 1px dashed azure;
   
  }
  .xin21{
  color: azure;
  font-size: 10px;
  margin-top: 40px;
  margin-left: 250px;
  margin-right: 281px;
  }
  .xin22{
  color: azure;
  font-size: 10px;
  margin-top: 2px;
  text-decoration: underline;
  }
  .xin23{
  margin-top: 5px;
  float: left;
  border: 1px dashed azure;
   
  }
  .xin24{
  font-size: 10px;
  color: azure;
  margin-top: 18px;
  margin-left: 250px;
  margin-right: 5px;
  }
  .xin25{
  color: azure;
  font-size: 10px;
  float: right;
  margin-top: 2px;
  text-decoration: underline;
  }
  .xin26{
  margin-top: 38px;
  float: right;
  border: 1px dashed azure;
   
  }
  .xin27{
  color: azure;
  font-size: 10px;
  margin-top: 50px;
  margin-right: 285px;
  margin-left: 250px;
  }
  </style>
  </head>
  <body>
  <div class="xin1">
  <img src="baall.jpg" style="float: right" alt=""/>
  <p class="xin3"><span class="xin2">太</span>阳系是以太阳为中心，和所有受到太阳的重力约束天体的集
  合体：8颗行星、至少165颗已知的卫星、3颗已经辨认出来的矮行星（冥王星和他的卫星）和数以亿计的太阳系小天体。这些小天体包括小行星
  、柯伊伯带的天体、彗星和星际尘埃。依照至太阳的距离，行星序是水星、金星、地球、火星、木星、土星、天王星、和海王星，8颗中的6颗
  有天然的卫星环绕着。</p>
  <p class="xin4">水星</p>
  <div class="xin5"><img src="ba1.jpg" alt=""/></div>
  <p class="xin6">水星在八大行星中是最小的行星，比月球大1/3，它同时也是最靠近太阳的行星。 水星目视星等范围从 0.4 到 5.5；水
  星太接近太阳，常常被猛烈的阳光淹没，所以望远镜很少能够仔细观察它。水星没有自然卫星。唯一靠近过水星的卫星是美国探测器水手
  10号，在1974年—1975年探索水星时，只拍摄到大约45%的表面。水星是太阳系中运动最快的行星。水星的英文名字Mercury来自罗马神墨
  丘利（赫耳墨斯）。他是罗马神话中的信使。因为水星约88天绕太阳一圈，是太阳系中公转最快的行星。符号是上面一个圆形下面一个交
  叉的短垂线和一个半圆形 (Unicode). 是墨丘利所拿魔杖的形状。在前5世纪，水星实际上被认为成二个不同的行星，这是因为它时常交
  替地出现在太阳的两侧。当它出现在傍晚时，它被叫做墨丘利；但是当它出现在早晨时，为了纪念太阳神阿波罗，它被称为阿波罗。毕达
  哥拉斯后来指出他们实际上是相同的一颗行星。
  </p>
  <p class="xin7">金星</p>
  <div class="xin8"><img src="ba2.jpg" alt=""/></div>
  <p class="xin9">金星是八大行星之一，按离太阳由近及远的次序是第二颗。它是离地球最近的行星。中国古代称之为太白或太白金星。它有
  时是晨星，黎明前出现在东方天空，被称为“启明”；有时是昏星，黄昏后出现在西方天空，被称为“长庚”。金星是全天中除太阳和月亮外
  最亮的星，亮度最大时为-4.4等，比著名的天狼星（除太阳外全天最亮的恒星）还要亮14倍，犹如一颗耀眼的钻石，于是古希腊人称它为
  阿佛洛狄忒（Aphrodite）——爱与美的女神，而罗马人则称它为维纳斯（Venus）——美神。金星和水星一样，是太阳系中仅有的两个没有
  天然卫星的大行星。因此金星上的夜空中没有“月亮”，最亮的“星星”是地球。由于离太阳比较近，所以在金星上看太阳，太阳的大小比地
  球上看到的大1.5倍。
  </p>
  <p class="xin10">地球</p>
  <div class="xin11"><img src="ba3.jpg" alt=""/></div>
  <p class="xin12">水星在八大行星中是最小的行星，比月球大1/3，它同时也是最靠近太阳的行星。 水星目视星等范围从 0.4 到 5.5；水
  星太接近太阳，常常被猛烈的阳光淹没，所以望远镜很少能够仔细观察它。水星没有自然卫星。唯一靠近过水星的卫星是美国探测器水手
  10号，在1974年—1975年探索水星时，只拍摄到大约45%的表面。水星是太阳系中运动最快的行星。水星的英文名字Mercury来自罗马神墨
  丘利（赫耳墨斯）。他是罗马神话中的信使。因为水星约88天绕太阳一圈，是太阳系中公转最快的行星。符号是上面一个圆形下面一个交
  叉的短垂线和一个半圆形 (Unicode). 是墨丘利所拿魔杖的形状。在前5世纪，水星实际上被认为成二个不同的行星，这是因为它时常交
  替地出现在太阳的两侧。当它出现在傍晚时，它被叫做墨丘利；但是当它出现在早晨时，为了纪念太阳神阿波罗，它被称为阿波罗。毕达哥
  拉斯后来指出他们实际上是相同的一颗行星。
  </p>
  <p class="xin13">火星</p>
  <div class="xin14"><img src="ba4.jpg" alt=""/></div>
  <p class="xin15">火星（Mars）是八大行星之一，符号是♂。因为它在夜空中看起来是血红色的，所以在西方，以希腊神话中的阿瑞斯(或罗
  马神话中对应的战神玛尔斯)命名它。在古代中国，因为它荧荧如火，故称“荧惑”。火星有两颗小型天然卫星:火卫一Phobos和火卫二
  Deimos(阿瑞斯儿子们的名字)。两颗卫星都很小而且形状奇特，可能是被引力捕获的小行星。英文里前缀areo-指的就是火星。
  </p>
  <p class="xin16">木星</p>
  <div class="xin17"><img src="ba5.jpg" alt=""/></div>
  <p class="xin18">木星木星古称岁星，是离太阳远近的第五颗行星，而且是八大行星中最大的一颗，比所有其他的行星的合质量大2倍（地
  球的318倍）。木星绕太阳公转的周期为4332.589天，约合11.86年。木星(a.k.a. Jove)希腊人称之为 宙斯(众神之王，奥林匹斯山的
  统治者和罗马国的保护人，它是Cronus（土星的儿子。)木星是天空中第四亮的物体（次于太阳，月球和金星；有时候火星更亮一些），早
  在史前木星就已被人类所知晓。根据伽利略1610年对木星四颗卫星：木卫一，木卫二，木卫三和木卫四（现常被称作伽利略卫星）的观察
  ，它们是不以地球为中心运转的第一个发现，也是赞同哥白尼的日心说的有关行星运动的主要依据。
  </p>
  <p class="xin19">土星</p>
  <div class="xin20"><img src="ba6.jpg" alt=""/></div>
  <p class="xin21">土星古称镇星或填星,因为土星公转周期大约为29.5年,我国古代有28宿,土星几乎是每年在一个宿中,有镇住或填满该宿的
  意味,所以称为镇星或填星，直径119300公里（为地球的9.5倍），是太阳系第二大行星。它与邻居木星十分相像，表面也是液态氢和氦的
  海洋，上方同样覆盖着厚厚的云层。土星上狂风肆虐，沿东西方向的风速可超过每小时1600公里。土星上空的云层就是这些狂风造成的，
  云层中含有大量的结晶氨。轨道距太阳142，940万千米，公转周期为10759.5天，相当于29.5个地球年，视星等为0.67等。在太阳系的行
  星中，土星的光环最惹人注目，它使土星看上去就像戴着一顶漂亮的大草帽。观测表明构成光环的物质是碎冰块、岩石块、尘埃、颗粒等
  ，它们排列成一系列的圆圈，绕着土星旋转。
  </p>
  <p class="xin22">天王星</p>
  <div class="xin23"><img src="ba7.jpg" alt=""/></div>
  <p class="xin24">天王星是太阳系中离太阳第七远行星，从直径来看，是太阳系中第三大行星。天王星的体积比海王星大，质量却比其小。
  天王星是由威廉·赫歇耳通过望远镜系统地搜寻，在1781年3月13日发现的，它是现代发现的第一颗行星。事实上，它曾经被观测到许多次
  ，只不过当时被误认为是另一颗恒星（早在1690年John Flamsteed便已观测到它的存在，但当时却把它编为34 Tauri）。赫歇耳把它命
  名为"the Georgium Sidus（天竺葵）"（乔治亚行星）来纪念他的资助者，那个对美国人而言臭名昭著的英国国王：乔治三世；其他人
  却称天王星为“赫歇耳”。由于其他行星的名字都取自希腊神话，因此为保持一致，由波德首先提出把它称为“乌拉诺斯(Uranus)”（天王星
  ），但直到1850年才开始广泛使用。
  </p>
  <p class="xin25">海王星</p>
  <div class="xin26"><img src="ba8.jpg" alt=""/></div>
  <p class="xin27">海王星（Neptune）是环绕太阳运行的第八颗行星，也是太阳系中第四大天体（直径上）。海王星在直径上小于天王星，
  但质量比它大。在天王星被发现后，人们注意到它的轨道与根据牛顿理论所推知的并不一致。因此科学家们预测存在着另一颗遥远的行星从
  而影响了天王星的轨道。Galle和 d'Arrest在1846年9月23日首次观察到海王星，它出现的地点非常靠近于亚当斯和勒威耶根据所观察到
  的木星、土星和天王星的位置经过计算独立预测出的地点。一场关于谁先发现海王星和谁享有对此命名的权利的国际性争论产生于英国与法
  国之间（然而，亚当斯和勒威耶个人之间并未有明显的争论）；现在将海王星的发现共同归功于他们两人。后来的观察显示亚当斯和勒威
  耶计算出的轨道与海王星真实的轨道偏差相当大。如果对海王星的搜寻早几年或晚几年进行的话，人们将无法在他们预测的位置或其附近
  找到它。</p>
  </div>
  </body>
  </html>

web前端：css的更多相关文章

  1. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  2. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  3. 零基础学WEB前端-CSS

    CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...

  4. web前端—css面试题

    1.CSS 选择符有哪些? 2.CSS 优先级的选择过程? 优先级复合就近原则,同权重的情况下有限选择最近的属性. 载入样式的话是以最后载入的定位为准. 优先级: !important > id ...

  5. Bootstrap 简介(Web前端CSS框架)

    目录1.简介2.特点3.组件4.Javascript插件5.定制自己的框架代码6.Bootstrap Less 1.简介Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Tw ...

  6. Bootstrap（Web前端CSS框架）

    官方定义: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile fi ...

  7. web前端css定位position和浮动float

    最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...

  8. web前端——CSS详解

    简介 CSS(Casading Style Sheet)是一组HTML元素外观的设置规则,用于控制web页面的表现形式,一般被翻译为"级联样式表"或"层叠样式表" ...

  9. Web前端 css实现元素垂直居中的常用方法

    方法1:table-cell html结构: 1 2 3 <div class="box box1">         <span>垂直居中</spa ...

  10. [Web 前端] CSS篇之 4. position 和 display 的取值和各自的意思和用法

    讲一讲CSS的position/float/display都有哪些取值,它们相互叠加时的行为都是什么?  列出display的值,说明他们的作用.position的值, relative和absolu ...

随机推荐

  1. java自定义接口

    compareTo:根据该数值是小于.等于.或大于 val 返回 -1.0 或 1:

  2. Python Monkey patch猴子补丁

    monkey patch (猴子补丁)   用来在运行时动态修改已有的代码,而不需要修改原始代码. 简单的monkey patch 实现:[python] #coding=utf-8 def orig ...

  3. 设置SharePoint2010列表的项目级权限

    转:http://www.cfanz.cn/?c=article&a=read&id=24096 在SharePoint2010中我们经常会用到这样的权限设置,在一个列表中可以存储多个 ...

  4. （转载）可重入函数（reentrant function）

    (转载)http://blog.163.com/xu_jin_rong/blog/static/1491966220086775017178 由于cublog系统的缘故,将前段时间写的一篇blog文章 ...

  5. WebTable 扩展

    # coding:utf-8 """ 页面 table处理 """ from selenium import webdriver from ...

  6. JS实现表单输入Enter键转换焦点框

    <form> <input type="text" onkeypress="return handleEnter(this, event)"& ...

  7. C中位域的使用

    一.位域 有些信息在存储时,并不需要占用一个完整的字节, 而只需占几个或一个二进制位.例如在存放一个开关量时,只有0和1 两种状态, 用一位二进位即可.为了节省存储空间,并使处理简便,C语言又提供了一 ...

  8. JavaScript高级程序设计22.pdf

    操作节点 appendChild()用于向childNodes列表末尾添加一个节点,appendChild()返回新增的节点 var returnedNode=someNode.appendChild ...

  9. Bzoj 2141: 排队 分块,逆序对,树状数组

    2141: 排队 Time Limit: 4 Sec  Memory Limit: 259 MBSubmit: 1310  Solved: 517[Submit][Status][Discuss] D ...

  10. usaco 安慰奶牛

    Description 约翰有N个牧场,编号依次为1到N.每个牧场里住着一头奶牛.连接这些牧场的有P条 道路,每条道路都是双向的.第j条道路连接的是牧场Sj和Ej,通行需要Lj的时间.两牧场之 间最多 ...