css样式简介

<!-- CSS样式:

当读到一个样式的时候,浏览器会根据它来格式化HTML文档

如何插入样式表:

我们应该知道什么是样式表,样式表有哪几类,我们用来格式化HTML文档的

CSS文件就是样式表,样式表可以分为三类:

外部样式表

内部样式表

内联样式表

那么这三类样式表分别是什么意思,我们通过几个例子来为大家解析一下:

首先是外部样式表:

当我们的样式想应用于很多的界面的时候,外部样式表是我们理想的选择,使用外部样式表我们可以通过改变一个文件来改变多个界面的外观,

怎样来使用外部的样式表:

我们在想要使用该外部的样式表的网页中使用<link>标签连接到外部的样式表。

html文档:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

<title></title>

</head>

<body id="b">

<p id="para">我是一个段落</p>

</body>

</html>

css文件:

#para

{

font-size: 7;

color: red;

}

#b

{

background-color: green;

}

我们要知道是外部样式表是可以在任何的文本编辑器中进行编辑的,文件是不能包含任何

html表签,也就是不能用<p>,<h>之类的,但是元素是可以用的,比如p,h,样式表应该用.css扩展名进行保存

内部的样式表:

我们刚才看的哪一个是外部的样式表,在HTML文档的 外部进行的定义,可以想到内部的

样式表应该在HTML文档的内部进行定义,正如你想的那样,内部样式表在HTML文档中是

通过在<head>之间通过一个<style>进行定义的,也就是使用<style>标签在文档的 头部定义内部样式,下面我我们通过一个例子来解释一个内部样式表的定义

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

.bo

{

background-color: green;

}

.para

{

color: red;

font-size:7;

/*字体最大设置为7号字体*/

}

</style>

<title></title>

</head>

<body class="bo">

<p class="para">我是段落</p>

</body>

</html>

最后还有一个样式是内联样式:

由于主要是表现和内容混杂在一起,内联样式会损坏失掉样式表中的

许多的优势,请慎用这种办法,比如说样式仅仅是需要一个元素上应用

一次可以使用内联样式,你需要的是相关的标签内使用style这个属性

比如:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body bgcolor="red">

<p style="color:siena;margin-left:20px">This is a paragraph</p>

</body>

</html>

要知道的是bgcolor表示的是body的属性,但是background并不是他的属性

有的时候可能出现多重样式,比如我们引入了外部的样式,但是又在这个文档中的定义了内部的样式,这个时候两种样式会有重叠

也就是说比如我们在外部的样式中对p定义了三个属性:

p{

color:green;

text-align:left;

font-size:7;

}

而且我们在内部的样式中一样是定义了两种样式,也是针对p这个元素:

p{

text-laign:right;

font-szie:30pt;

}这个时候我们在HTML文档中定义段落时候,会是怎样的段落:

是这样的:

p{

color:green;

text-align:right;

font-size:30pt;

}很明显我们可看到当使用的时候,外部属性和内部属性都会有,但是当外部的 和内部的一样的时候,这个时候属性的值是取内部的

也就是有这样的了规律,当多重样式重叠为一个的时候:并且属性的值是一样的这个时候我们所取的是这样的:内联样式优先,

内部的样式次之,外部样式的优先性最低。

时间: 2024-12-14 03:42:35

css样式简介的相关文章

第三篇、CSS样式简介

<!--1.行内样式 <p style="background-color:red;font-size:20px"> --> <!--2.页内样式 <head> <meta charset="UTF-8"> <title></title> <style> body{ background-color:gray; } div{ background-color:red; } p{

CSS入门(css简介与样式汇总、CSS的使用方式、CSS样式表的特征、CSS基础选择器和复杂选择器、边框阴影)

一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 CSS :构建HTML元素的样式 样式汇总: color:red 字体颜色 font-size:字体大小 font-family:字体样式 background-color 背景颜色 width:宽度 height:高度 字体使用实例(样式) font-family:字体的种类 font-size:字

bootstrap 全局 CSS 样式

http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. 复制 <!DOCTYPE html> <html lang="zh-CN"> ...

css命名规范&mdash;CSS样式命名整理

CSS样式命名整理 页面结构 容器: container/wrap整体宽度:wrapper页头:header内容:content页面主体:main页尾:footer导航:nav侧栏:sidebar栏目:column中间内容:center 导航 导航:nav导航:mainbav/globalnav子导航:subnav顶导航:topnav边导航:sidebar左导航:leftsidebar右导航:rightsidebar边导航图标:sidebarIcon菜单:menu子菜单:submenu标题: t

全局CSS样式

bootstrap全局css样式:一共12个内容模块 概览 栅格系统 排版 代码 表格 表单 按钮 图片 辅助类 响应式工具 使用Less 使用Sass 一.概览类 1.html5文档类型 <!DOCTYPE html> 2.移动设备优先 <meta name="viewport" content="width=device-width, initial-scale=1"> 3.排版与链接 bootstrap排版.链接样式设置了基本的全局样式

css的简介

昨天内容回顾    1.html的操作思想        ** 使用标签把要操作的数据包起来,通过修改标签的属性值来实现标签内数据样式的变化        *** <font size="5"></font>        2.图像标签        <img src="图片的路径"/>        ** 通过html访问本地图片,使用绝对路径,目前有问题        3.超链接标签        <a href=&qu

CSS样式命名整理(非原创)

非原创,具体出自哪里忘了,如果侵害您的利益,请联系我. CSS样式命名整理 页面结构 容器: container/wrap 整体宽度:wrapper 页头:header 内容:content 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 中间内容:center 导航 导航:nav 导航:mainbav/globalnav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightside

【03】全局 CSS 样式

全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. <!DOCTYPE html> <html lang="

css命名规范—CSS样式命名整理

CSS样式命名整理 页面结构 容器: container/wrap整体宽度:wrapper页头:header内容:content页面主体:main页尾:footer导航:nav侧栏:sidebar栏目:column中间内容:center 导航 导航:nav导航:mainbav/globalnav子导航:subnav顶导航:topnav边导航:sidebar左导航:leftsidebar右导航:rightsidebar边导航图标:sidebarIcon菜单:menu子菜单:submenu标题: t