CSS自学笔记(4):CSS样式表的使用
当浏览器读到一个样式表时,浏览器会根据这个样式表来格式化html文档,从而表现出各式各样的网页。
想要浏览器读到样式表,有三种方法:
1.外部样式表
外部样式表可以理解为.CSS文件。当多个页面使用同一个样式的时候,外部样式表是一个很理想的选择。
在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观,无需在调整html文件,尤其是多个页面使用同一个样式的时候。
每个html页面使用标签<link>来连接外部样式表:
<head>
<linkrel="stylesheet" type="text/css" href="mystyle.css" />
</head>
浏览器会从样式表mystyle.css中读取样式声明,格式化html文档。
注:样式表中,属性值和单位之间不能留有空格。
2.内部样式表
内部样式表就是将样式的定义放在html文档的开头处。
当单个html文档需要特殊的样式时,内部样式是个很不错的选择。
可以使用<style>标签中定以内部样式。
<head>
<style type="text/css">
hr {color: #3F0;}
p {margin-left: 100px;}
body {background-image: url("bg.gif");}
</style>
</head>
3.内联样式
内联样式表就是将样式的定义放在html的标签中。
使用内联样式,需要在相关的html标签内使用样式属性(style),style属性中可以包含任何CSS的属性。
<pstyle="color: #3F0; margin-left: 100px">
This is a paragraph
</p>
这是标签p的内联样式,效果是

注:内联样式会损坏样式表的许多优势。
4.多重样式的问题
如果同一个选择器将不同的属性定义在不同的样式表中,这是属性值会根据样式表的类型进行继承。
内部样式会继承外部样式的属性。
例如:外部样式定义的属性
h3 {
color: #F00;
text-align: left;
font-size: 8pt;
}
内部样式定义属性
h3 {
text-align: right;
font-size: 20pt;
}
当显示的浏览器上时

可看出内部样式会继承外部样式的属性。
当再一次的定义了内联样式
<h3 style="color:#006">测试h3标题</h3>

CSS自学笔记(4):CSS样式表的使用的更多相关文章
- CSS 小结笔记之三种样式表
CSS 引入共有三种方式:内部样式表,内联样式(行内样式)表,外部样式表,当然也可以使用多重样式 内联样式 <div style="color:red;font-size:20px&q ...
- CSS自学笔记(5):CSS的样式
CSS中拥有各种各样的样式表,而基本的样式有背景,文本,字体,链接,列表,表格,轮廓. 一.CSS-背景 CSS中允许用纯色背景,也允许用图片来创建复杂的个性背景. p {background-col ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- CSS自学笔记(1):CSS简介
一.什么是CSS CSS(Cascading Style Sheet(级联样式表))是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- Head First Html and CSS学习笔记之CSS
第七章 CSS入门 元素的许多属性都可以设置样式,太多了,记不住,可以参考<CSS Pocket Reference>. 外部样式表,<link type = "text/ ...
- CSS学习笔记01 CSS简介
1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...
- DIV+CSS学习笔记(CSS)
css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签 ...
- CSS自学笔记(11):CSS3背景和边框
CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...
- CSS自学笔记(2):CSS语法
CSS的语法规则主要有两个分构成选择器和声明(声明问一条或者多条). selector {declaration1; declaration2; ... declarationN } 选择器(selc ...
随机推荐
- Char型和string型字符串比较整理
1.赋值 char赋值: char ch1[] = "give me"; char ch2[] = "a cup"; strcpy(ch1,ch2); cout ...
- Hive的安装配置
Hive的安装配置 Hive的安装配置 安装前准备 下载Hive版本1.2.1: 1.[root@iZ28gvqe4biZ ~]# wget http://mirror.bit.edu.cn/apac ...
- 初学Django
纵然有众多大牛写过这些简单入门文章,但作为记录,还是要自己动手写下来的比较靠谱,‘好脑筋不如烂笔头’啊! Python 安装 Django本身是纯Python编写的,所以安装框架的第一步是确保你已经安 ...
- Android HandlerThread的用法
HandlerThread 继承自Thread,内部封装了Looper. 首先Handler和HandlerThread的主要区别是:Handler与Activity在同一个线程中,HandlerTh ...
- java常量池理解
String类两种不同的创建方式 String s1 = "zheng"; //第一种创建方式 String s2 = new String("junxiang" ...
- 探究android控件及布局
控件(widget) 1. TextView(该控件的一些需要注意的属性,下同) gravity="center"textSize="24sp"textColo ...
- 优雅智慧女性课程班 - 公开课程 - 课程介绍 - 中国人民大学商学院EDP中心
优雅智慧女性课程班 - 公开课程 - 课程介绍 - 中国人民大学商学院EDP中心 优雅智慧女性课程班 课程总览 思想睿智成熟,外表美丽自信,气质优雅端庄,是魅力女性所应具备的特性.在当今不确定环境下, ...
- linux中ctrl+z、ctrl+d和ctrl+c的区别
ctrl+c和ctrl+z都是中断命令,但是他们的作用却不一样.ctrl+c是强制中断程序的执行,而ctrl+z的是将任务中断,但是此任务并没有结束,他仍然在进程中他只是维持挂起的状态,用户可以使用f ...
- chroot_local_user和chroot_list_enable含义
很多情况下,我们希望限制ftp用户只能在其主目录下(root dir)下活动,不允许他们跳出主目录之外浏览服务器上 的其他目录,这时候我就需要使用到chroot_local_user,chroot_l ...
- uva 103 Stacking Boxes(DAG)
题目连接:103 - Stacking Boxes 题目大意:有n个w维立体, 输出立体互相嵌套的层数的最大值, 并输出嵌套方式, 可嵌套的要求是外层立体的w条边可以分别对应大于内层立体. 解题思路: ...