1.针对文件中的字体还有属性进行设置主要设置文字的大小及其颜色问题，未涉及div飘操作

处理页面CSS 先检测该内容部分是否已经设定了样式，如果没有单独设定再按照总体设计进行限定。

eg：  h1 h2 h3 h4      h1,h2,h4{} body{} 类似实例

css  for select  beyong the relation to select

派生类选择器for: <ul><li><strong >    css  li strong{};

id选择器：#id  #demo

类选择器   .class   .check{}

属性选择器 <p name="">  [name]{}

2.

3.添加背景图片 background-image:url('../image/jkzhang.jpg');

html当读到样式表时，浏览器会根据它来格式化HTML文档，常用的两种方法：

1.外部样式表

2.内部样式表

1.外部样式表。当多个页面需要使用同一个样式，可以采用。常用格式：

<head>

<link  rel="stylesheet" type="text/css" href="stylesheet.css">

</head>

HTML网页根据stylesheet.css读到的约束来格式化网页

约束：外部样式表中不能包括任何HTML标签

h1,h2{

color:red;

margin:2cm 2cm 3cm 3cm};

hr{color:green};

body{background-image:url("");}

2内部样式表：直接在单一网页应用样式表

<head>

<style type="text/css">

h1,h2{

color:red;

margin:2cm 2cm 3cm 3cm

}

hr{color:green}

body{background-image:url("");}

</style>

</head>

注：内部样式表优先级高于外部样式表。当有重合时，先选择内部样式表规定的属性，再添加内部样式表没有的外部样式表的属性。综合才为最终结果。

<html>
<head>
<!--外部样式表 -->
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<h1> make </h1>
<p>next</p>
<p>change</p>
</body>
</html>

<!-- 外部样式表代码 -->
h1{
color:red;
margin:2cm 2cm 3cm 2cm;
font-size:20px;
}
hr{
color:#ff000;}
p{
color:green
}
body{

background-color:yellow;
background-image:url("");
}

<!-- 内部样式表写法 -->
<html>
<head>
<style type="text/css">
h1{
color:red;
margin:2cm 2cm 3cm 2cm;
font-size:20px;
}
hr{
color:#ff000;}
p{
color:green;
}
body{

background-color:yellow;
background-image:url("");
}
</style>
</head>
<body>
<h1> make </h1>

<hr >
<p>next</p>
<p>change</p>

<hr>
</body>
</html>

<html>
<head>
<style type="text/css">
div#container{
width:500px;}
div#header{
width:500px;
height:50px;
background-color:#99bbbb}
div#menu{
width:150px;
height:200px;
background-color:yellow;
float:left}
div#content{
width:350px;
height:200px;
background-color:red;
float:left}
div#bottom{
background-color:green;
width:500px;
text-align:center
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>HTML</li>
<li>HTML</li>
</ul>
</div>
<div id="content">
<h3>Content goes here</h3>
</div>
<div id="bottom">
<h4> copyright</h4>
</div>
</div>
</body>
</html>

html嵌入样式表的更多相关文章

  1. css样式表的知识点总结

    css总的来说有三种css样式可供选择: 1,行内样式表 行内样式表,直接写在了html文件的元素中,例如: <div style="color:red;"></ ...

  2. Javascript高级编程学习笔记（51）—— DOM2和DOM3（3）操作样式表

    操作样式表 在JS中样式表用一种类型来表示,以便我们在JS对其进行操作 这一类型就是CSSStyleSheet 即CSS样式表类型,包括了之前 style 对象所不包括的外部样式表以及嵌入样式表 其中 ...

  3. 应用CSS样式表

    首先应该分清楚应用CSS样式表到HTML页面中和将css样式表绑定到HTML页面的对象,是两个不同的概念.像之前说的通过不同的选择器将样式表绑定到HTML页面中的对象,但其实使用的都是同一种方法应用c ...

  4. CSS 四种样式表 六种规则选择器 五种常用样式属性

    新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NETFramework)创建一个网页程序.添加一个html页 后面的代码都是在htm ...

  5. css样式表分类、选择器分类、css基础样式

    1 . 样式表  Cascading Style Sheet      css优势: 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使网页布局更加灵活 减少网页代码量,增加网页的浏览速度,节省 ...

  6. 9月9日HTML上午表单元素2（框架、样式表）

    五.框架 1.frameset是双标签框架集,如果使用框架集,当前页面不能有body. frameset属性:①cols代表左右拆分.cols=“300,*”表示左边框架宽300,右边宽剩余的宽度.* ...

  7. Qt StyleSheet样式表实例(转)

    QT论坛看到的,收藏一下! 在涉及到Qt 美工的时候首先需要掌握CSS 级联样式表. 下面将通过几个例子来介绍一下怎样使用Qt中的部件类型设计.自定义的前台背景与后台背景的颜色: 如果需要一个文本编辑 ...

  8. 图解 CSS: 理解样式表的逻辑（转载）

    原文:http://www.cnblogs.com/del/archive/2009/02/01/1382141.html 样式表可以是外部的.内联的或嵌入的; 链接外部样式文件一般是:<lin ...

  9. CSS样式表优先级

    使用CSS样式表一共有2种方式:内部和外部,其中内部分为行内样式和嵌入式,外部分为导入式和链接式. 如果需要在不同的方式中设定同一个属性的时候,样式的优先级别就出现了. 测试代码如下: red.css ...

随机推荐

  1. NOIP模拟赛20161022

    NOIP模拟赛2016-10-22 题目名 东风谷早苗 西行寺幽幽子 琪露诺 上白泽慧音 源文件 robot.cpp/c/pas spring.cpp/c/pas iceroad.cpp/c/pas ...

  2. AC日记——校门外的树（增强版） 洛谷 P1276

    题目描述 校门外马路上本来从编号0到L,每一编号的位置都有1棵树.有砍树者每次从编号A到B处连续砍掉每1棵树,就连树苗也不放过(记 0 A B ,含A和B):幸运的是还有植树者每次从编号C到D 中凡是 ...

  3. 当Python在appium中使用if……else语句不好使怎么办

    前几天写自动化脚本的时候,有个地方需要用if--else判断获得的ID和name是哪个,从而决定点击哪个按钮,我用if--else去判断,可是总是提示我找不到对应的元素, 在网上爬了好久,最终终于找到 ...

  4. edge 浏览器中数字显示为链接

    在win10 中的Edge浏览器中部分格式的数字显示链接.经过各种搜索找到一篇文章 How to remove phone number link on Iphone? ,通过这篇文章了解 edge ...

  5. Ubuntu 安裝 嘸蝦米 輸入法

    O S : 14.04.1-Ubuntu 加入fcitx開發團隊的repository: sudo add-apt-repository ppa:fcitx-team/nightly sudo apt ...

  6. LCA最近公共祖先 ST+RMQ在线算法

    对于一类题目,是一棵树或者森林,有多次查询,求2点间的距离,可以用LCA来解决.     这一类的问题有2中解决方法.第一种就是tarjan的离线算法,还有一中是基于ST算法的在线算法.复杂度都是O( ...

  7. PyChram中同目录下import引包报错的解决办法？

    相信很多同学和我一样在PyChram工具中新建python项目的同目录下import引包会报错提示找不到,这是因为该项目找不到python的环境导致的: 如果文件开始的时候包引包的错误可以,都可以用用 ...

  8. 【poj2449】 Remmarguts' Date

    http://poj.org/problem?id=2449 (题目链接) 题意 求有向图K短路. Solution A*.g(x)为当前节点到起点的步数,h(x)为当前节点到终点的最短距离(也就是估 ...

  9. js jquery 选择器总结

    js jquery 选择器总结 一.原始JS选择器. id选择器:document.getElementById("test"); name选择器:document.getElem ...

  10. 刚开始用git遇到的无法提交变更的问题

    原来我在目录里打开命令行,git bash默认执行的目录是c:/users了,错误的使用了git init,把$HOME 路径下的所有文件载入 git 仓库了,删除$HOME 路径下的".g ...