`

CSS-行内-内部-外部样式表

 
阅读更多

一 CSS(Cascading Style Sheets)级联样式表,作用:装饰HTML 

二 CSS语法由三部分构成:选择器,属性,值。 

三 HTML引用CSS的三种方法(以下为示例代码) :分别为行内样式,内嵌式,和链接式.如下:p元素为行内样式,div元素为嵌入式(写在head元素内),

另外一个为链接式:使页面框架html和css样式完全分离为两个或多个文件,是的前期制作和后期维护都很方便.

其中的test.css和test2.css都是链接式,是的html和css完全分开.

 

HTML CODE 

Html代码  收藏代码
  1. <!DOCTYP>  
  2. <HTML>  
  3.  <HEAD>  
  4.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5.  <style type="text/css">  
  6.    div{  
  7.      background-color:#FF0000;  
  8.    }     
  9.     @import "test2.css";  
  10.  </style>  
  11.  <link rel="stylesheet" type="text/css" href="test.css"></link>  
  12.  </HEAD>  
  13.    <BODY>    
  14.    <P style="background-color:yellow">这个是行内样式表</p><br><hr>  
  15.    <div >这个是内部样式表</div><br><hr>  
  16.    <span>这个是使用了test.css中的外部样式</span><br><hr>  
  17.    <a href="#">这个是使用import(test2.css的样式)外部样式</a>  
  18.  </BODY>  
  19. </HTML>  

 

CSS CODE 
test.css 

Css代码  收藏代码
  1.   span{  
  2.      background-color:#FF0000;  
  3. }  



test2.css 

Css代码  收藏代码
  1. a{  
  2.  background-color:#FF0000;  
  3. }  

 

 

网上转载:DIV+CSS 常用属性 

字体属性: 

   1.font-size:12px;  字体大小 

   2.font-weight:bold;  字体加粗 

   3.font-family:"宋体";  字体的种类 

背景属性: 

   1.background-color:#000;  背景颜色  简写:background:#00; 

   2.background-image:url("图片路径"); 设置背景图片 
     简写:background:url("图片路径"); 

   3.background-repeat:repeat-x/repeat-y/no-repeat;  图象平铺 
   注:可以简写background:背景颜色/背景图片/背景平铺 

文本属性: 

   1.letter-spacing:12px/normal;字间隔 normal 无 

   2.line-height:25px; 行高 

   3.text-indent:24px; 文本缩进 

方框属性: 

   1.border:1px solid #000;  边框 

   2.border-top/left/right/bottom:1px solid/dashed #000; 设置上左右下边框 

    solid :实线  dashed:虑线 

   3.display:block; 转块元素 

      displya:inline;转行内元素 

定位: 

   position:absolute; 绝对定位 

   position:relative; 相对定位 

   margin:0 auto;居中 

   margin 边距    
         margin-top:0px; margin-left:0px; margin-bottom:0px; margin-right:0px; 

   padding 内边距  
     padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px; 

   list-style:none; 

   float:left/right;css浮动 

   cursor:pointe;鼠标为手型 

   clear:both;清除浮动 

css简写 

font 
简写: 

font:italic small-caps bold 12px/1.5em arial,verdana;等效于: 

font-style:italic; 
font-variant:small-caps; 
font-weight:bold; 
font-size:12px; 
line-height:1.5em; 
font-family:arial,verdana;顺序:font-style | font-variant | font-weight | font-size | line-height | font-family 

(注:简写时,font-size和line-height只能通过斜杠/组成一个值,不能分开写。)

 

 background 

简写: 

background:#fff url(bg.gif) no-repeat fixed left top;等效于: 

background-color:#fff; 
background-image:url(bg.gif); 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-position:left top;顺序:background-color | background-image | background-repeat | background-attachment | background-position 
margin & padding 
简写: 

margin:1px 0 2em -20px;等效于: 

margin-top:1px; 
margin-right:0; 
margin-bottom:2em; 
margin-left:-20px;顺序:margin-top | margin-right | margin-bottom | margin-left 

padding的简写和margin完全一样。
 另外,简答描述一下外部样式:是相对于外部样式而言的,实际上是一个后缀名为.css的文件,独立于html页面,放在网站的某个文件夹内,都是样式的定义文件.连接外部样式都是通过link标签实现的,

链接式

CSS

样式表是使用频率最高,也是最为实用的方法。它

HTML

页面本身与

CSS

样式风格分离为两个或者多个文件,

实现了页面框架

HTML

代码与美工

CSS

代码的完全分离,使得

前期制作和后期维护都十分方便,

网站后台的技术人员与美工设

计都也可以很好的分工合作。而且对于同一个

CSS

文件可以链

接到多个

HTML

文件中,甚至可以链接到整个网站的所有页面

中,

使得网站整体风格统一协调,

并且后期维护的工作量也大大

减少。

 

分享到:
评论

相关推荐

    企业网站开发技术实验文档

    实验二:CSS --- 选择器(id、类、标签),引用方式(外部样式表、内部样式、内联样式、常用样式) 实验三:CSS --- 基本的颜色表示(英文单词表示、rgb、16进制)、a标签伪类、盒模型、块级元素页面水平居中、行内...

    CSS样式表学习

    我们建议你对第三种方法(即外部样式表)予以关注。 方法1:行内样式表(style 属性) 为HTML 应用CSS 的一种方法是使用HTML 属性style。我们在上例的基础之上,通过行内样式表将页面背景设为红色

    css样式表9.4.txt

    css 样式表 包含:链接外部样式 导入样式 行内样式 内嵌样式 里面还有分块展示代码 左浮动 友浮动 想了解的小伙伴可以看一下

    详解CSS文件的三种引入方式

    CSS的引入方式共有三种:行内样式、内部样式表、外部样式表。 一、行内样式 使用style属性引入CSS样式。 示例: &lt;h1 xss=removed&gt;style属性的应用 直接在HTML标签中设置的样式 实际在写页面时不提倡使用,在测试的...

    CSS基础入门总结(很详细的哟)

    一、CSS语法规范 二、CSS选择器 (1)基础选择器 (i)标签选择器 (ii)类选择器 (iii)id选择器 (iv)通配符选择器 (2)复合选择器 (i)后代选择器 (ii)子代选择器 ...(3)外部样式表 六、CSS的综合案例

    css的三大引入方式

    在head标签添加link标签,在属性href中填写新建的css文件路径——外部样式表 例如: css文件中可以进行样式修饰,例如: (3) 内联样式 语法:直接在需要修饰的标签中添加属性style,然后进行修饰 例如: 二、 ...

    HTML-层叠样式.rar

    不会html层叠样式表的可以下载学习,可以运行,用div+css实现的居中对齐,里面包括行内样式、内部样式、外部样式等知识

    前端基础-CSS样式的分类

    css样式的分类 1.内部样式—-内联样式 使用的是style标签 /* 样式 */ 多学一招:把页面的公共...多学一招:做项目最常用的是外部样式,link标签 三种样式表总结 样式表 优点 缺点 使用情况 控制范围 行内样

    stylesheets-and-nested-selectors-css-lab-abp-11-17

    到index.html外部样式表style.css 。 使用嵌套的元素选择器来设置“破冰船”首页的导航样式。 玩边框,高度,填充,边距,行内显示和浮动。指示我们将设置“破冰船”网站导航的样式。 目标是使用浮点数将h3移至左侧...

    老师 使用css美化网站.ppt

    掌握样式表的语法规则 样式表的分类: 行内样式表 内嵌样式表 外部样式表 导入样式表 掌握常用的样式 了解层和标签

    CSS的使用.pdf

    B) 外部:单独定义一个样式表文件(以CSS作为后缀名)在HTML页面中用&lt;link&gt;标记(href属性指定CSS文件路径,rel指定文件与页面的关系,或固定为stylesheet;或style标记添加@import指令引入,可以供多个页面...

    前端css+html+布局笔记

    将样式编写到外部样式表中,可以在不同的页面中使用同一个样式表,完全将表现和结构分离,方便后期的维护,推荐使用的方式 编写的位置 1.内联样式 将样式编写到标签的style属性中 ;"&gt; 这种样式只会对当前...

    css入门笔记

    创建样式表文件(.css) 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 &lt;link rel="stylesheet" href="URL../.css"&gt; 3.CSS样式特征 1.继承性 必须是父子(有层叠嵌套的关系)结构 大部分的...

    Web前端与移动开发之css的引入方式

    css的引入方式 (1)行内样式表(行内式 内联样式表) 控制一个标签 属性: 属性值;"&gt;&lt;/div&gt; ... (3)外部样式表(链接式) 控制多个页面 &lt;link rel="stylesheet" href="css文件相对路径"&gt;

    CSS 样式的使用方式、选择器

    在html中使用css的三种方式: 1、行内样式:同过元素的style属性来设置 &lt;p xss=removed&gt;hello 属性之间分号隔开。...引入外部样式表 p{font-size: 20px;color: red} &lt;link href="xxx.css" type="text

    css与html常见的三种结合方式示例介绍

    主要介绍了css与html常见的三种结合方式:内联样式、内部样式表、联接外部样式表,比较适合初学者

    wordpress入门到精通教程

    不管我们采用哪种编码,有一点就是包含的css样式表和其它文件也必须和本文档的编码一样,要不就会出现乱码。 3)html标签 成对的标签: &lt;head&gt;...&lt;/head&gt; &lt;body&gt;sdfsdfldjflsd...&lt;/body&gt; ...

    前端学习的第10天.zip

    样式表 优点 缺点 使用情况 控制范围 行内样式表 书写便捷权重高 ...外部样式表 完全实现结构与样式相分离 需要引入 最多 控制多个页面 六.综合案例 制作网页主要分为两步: 1. 搭建html结构页面 2. 修改CSS样式

Global site tag (gtag.js) - Google Analytics