CSS三种插入样式表格式

首先简单理解浏览器与网页的交互过程

CSS样式表(stylesheet)

  cascading style sheet 级联样式表

  表现HTML或XHTML文件样式的计算机语言:包含对字体、颜色、边距、高度、背景图片、网页定位等设定

  css优势:内容于表现分离

  网页的表现统一,容易修改

  丰富的样式,使得页面布局更加灵活

  减少网页的代码量,增加网页的浏览速度,节省网络带宽

  运用独立于页面的css有利于网页被搜索引擎收录

插入CSS样式表分为三种:

外部样式表(External style sheet)

链接式与导入式的区别

1 <link rel=”stylesheet” type=”text/css”

href=”path”>

<style type="text/css">

@import url(path);

</style>

<link/> 标签属于XHTML,@import是属于CSS2.1

使用<link/> 链接的CSS文件先加载到网页当中再进行编译显示

使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中

@import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的

内部样式表(Internal style sheet)

CSS代码写在<head>的<style>标签中

<style>

h1{color:green;}

</style>

优点:方便在同页面中修改样式

缺点:不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底。

内联样式(Inline style)

使用style属性引入CSS 样式

<h1 style=”color:red;”>style属性的应用</h1>

<p style=”font-size:14px;color:green;”>直接在HTML标签中设置样式</p>

时间: 2024-10-13 02:22:32

CSS三种插入样式表格式的相关文章

(一)CSS三种插入方式

CSS概述 CSS(Cascading Style Sheets)指层叠样式表,样式定义了如何显示HTML元素. 样式通常存储在样式表中,样式与HTML分离解决了内容与表现分离的问题. 多个样式表可以层叠为一. 在同一个HTML文档头部可以引用多个外部样式表. 以上,是对CSS一个概述. 创建CSS 插入样式表的方法有三种: 1.外部样式表, <head> <link rel="stylesheet" type="text/css" href=&q

三种方式来插入样式表

如何使用样式 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化.有以下三种方式来插入样式表: 外部样式表 当样式需要被应用到很多页面的时候,外部样式表将是理想的选择.使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观. <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 内部样式表 当单个文件

CSS三种样式

插入CSS的三种方法 有三种方式插入样式表: 外部样式表 内部样式表 行内式样 外部样式表 使用外部样式表,值改变一个文件,您可以改变整个网站的外观! 每个页面必须包含一个外部样式表文件的引用,在<link> 元素里面. <link> 元素包含在 <head> 里面: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"

css三种引用方式

1 直接在标签内添加 style属性 1 <body> 2 <!-- 内嵌写在标签内 --> 3 <div style="color: red;font-size: 20px">山无陵,天地合</div> 4 </body> 运行效果: 2 写在标签<head>中,内部样式 1 <html lang="en"> 2 <head> 3 <meta charset=&q

实例365(8)---------三种方法将字符串格式化为日期

一:DateTime.ParseExact方式,截图 二:代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace ConvertToString { public

样式表 格式布局

一.样式表 1.分类 (1)内联样式表 即在body里面设置style. (2)内嵌样式表 即在head里面设置style. (3)外部样式表 即在CSS里面设置style. 2.选择器 (1)标签选择器.用标签名做选择器. (2)class选择器.都是以“.”开头. (3)ID选择器.以“#”开头. (4)复合选择器   用“,”隔开,表示并列. 用空格隔开,表示后代.相当于共有的. 筛选“.”. 二.样式属性 (一)背景与前景 2.前景字体: (二)边界和边框 (三) 链接的style:  

CSS设计指南之CSS三种机制:继承、层叠和特指

一.继承 CSS中的祖先元素也会向后代传递一样东西:CSS属性的值.body元素是所有元素的祖先,所有标签都是它的后代,比如为body元素设置一种字体,那么文档中的所有元素,无论它在层次结构中多么靠下,都将继承这些样式.CSS中有很多属性都可以继承,其中相当一部分都与文本有关. 二.层叠 层叠,就是层叠样式表中的层叠,是一种样式在文档层次中逐层叠加的过程.目的是让浏览器面对某个标签特定属性的多个来源时,确定最终使用哪个值. 1.样式来源 浏览器默认样式表:因为你还没有显示设置CSS属性,h1就会

CSS基础整理(样式表 样式属性)

样式属性 1· 背景与前景 background-color:#00F; /*背景色,样式表优先级高*/ background-image:url(); /*设置背景图片(默认)*/ word-wrap:break-word; word-break:break-all; /*自动换行*/ background-attachment:fixed; /*背景是固定的,不随字体滚动*/ background-repeat:no-repeat; /*背景图 no-repeat不平铺:repeat平铺:r

CSS样式表--格式与布局

一:position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角弹窗 例如: <head> <title>网页标题</title> <style type="text/css"> #a { border:5px solid blue; width:100px; heigth:100px; margin:10px; background-color:red; left:30px; bottom:20px; positi