maoting
- 浏览: 47172 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
Css的几种设置方式
1.内联样式表（inline style sheets）：直接设置Html正文标签的style属性。
在使用内联样式表时，html4.01建议用户在</head></head>中加入<meta>标签，语句为：
<meta http-equiv=”Content-Style-type” content=”text/css”>
Eg:<body style=”FONT-SIZE:20px;COLOR:blue”></body>
2.嵌入样式表 (embedded style sheets):是在网页文档的头部(<head></head>标签对之间),定义一个<style></style>标签对中加入各种网页元素的样式规则定义，如下定义：
<head>
<style type=”text/css” media=”screen,projection”>
<!--
P{FONT-SIZE:20pt;COLOR:blue}
-->
</style>
</head>
3．外部样式表 (linked style sheets):一个外部样式表文件（.css文件）可以通过html的<link>标签连接到html文档中。
首先编写一个test.css文件，文件内容如下：
P{FONT-SIZE：20pt;COLOR:blue}
接着编写一个要使用样式表文件的网页文件，假设网页文件与test.css文件放置在相同的目录下，网页文件的内容如下：
<head>
<link rel=”StyleSheet” href=”test.css” type=”text/css” media=”screen”>
</head>
<body>
<p>this is a css test</p>
</body>
4.输入样式表 (imported style sheets):可以使用CSS的@import声明将一个外部样式表文件（CSS文件）输入到另外一个CSS文件中，被输入的CSS文件中的样式规则定义语句 ， 就成了输入到CSS文件的一部分。
<head>
<style type=”text/css” media=”screen,projection”>
<!--
@import url(http://www.it315.org/style.css);
@import url(/stylesheets/style.css)
-->
</style>
</head>
Css样式规则的选择器
Selector {property:value; property:value; property:value;……}
1、【html标签选择器】
<style type="text/css">
p{
font-size:1cm;
color:green;
}
div{
font-size:2cm;
}
</style>
如何引用：
<p>dddddddd</p>
<div>ssssssss</div>
2、【类选择器】
<style type="text/css">
.one{
font-size:2cm;
}
.two{
background:green;
}
</style>
如何引用：
<div class="one">dsfsdfsdf</div>
<p class="two" > sfsdfsdf</p>
注：如果一个样式被多次调用，可以做成类选择器
3、【id选择器】
如：
<style type="text/css">
#one{
font-size:2cm;
}
#two{
background:green;
}
</style>
如何引用:
<div id="one"> sfsdfsdf</div>
<p id="two"> ssadfasdf</p>
注：如果一个样式只被且只调用一次，可把该样式做成id选择器
4、【关联选择器】
<style type="text/css">
p em{
color:red;
}
</style>
如何引用：
<p>
<em>sdfsdfsdf</em>
</p>
注：反之em标签包含p标签以上样式是不成立的
5、【组合选择器】
<style type="text/css">
p,div,h1,#one,.two{
color:red;
}
</style>
如何引用:
<p>ssssssss</p>
<div>aaaaaaa</div>
<h1>sdfdfdf</h1>
<div id="one">bbbbbbbbbbbbbb</div>
<div class="two">skkkkkkkkk</div>
注;以上标签都使用了同一种样式
6、【伪元素选择器】
<style type="text/css">
a:link{font-size:10cm;}
a:hover{font-size:5cm;}
a:visited{font-size:1cm;}
</style>
Css样式规则的优先级
总起来是：从上到下，从总提到局部。
ID选择器>CLASS选择器>HTML标签选择器
内联样式表>嵌入样式表>链接样式表
Css样式表中的注释：/*要注释的内容*/
1.内联样式表（inline style sheets）：直接设置Html正文标签的style属性。
在使用内联样式表时，html4.01建议用户在</head></head>中加入<meta>标签，语句为：
<meta http-equiv=”Content-Style-type” content=”text/css”>
Eg:<body style=”FONT-SIZE:20px;COLOR:blue”></body>
2.嵌入样式表 (embedded style sheets):是在网页文档的头部(<head></head>标签对之间),定义一个<style></style>标签对中加入各种网页元素的样式规则定义，如下定义：
<head>
<style type=”text/css” media=”screen,projection”>
<!--
P{FONT-SIZE:20pt;COLOR:blue}
-->
</style>
</head>
3．外部样式表 (linked style sheets):一个外部样式表文件（.css文件）可以通过html的<link>标签连接到html文档中。
首先编写一个test.css文件，文件内容如下：
P{FONT-SIZE：20pt;COLOR:blue}
接着编写一个要使用样式表文件的网页文件，假设网页文件与test.css文件放置在相同的目录下，网页文件的内容如下：
<head>
<link rel=”StyleSheet” href=”test.css” type=”text/css” media=”screen”>
</head>
<body>
<p>this is a css test</p>
</body>
4.输入样式表 (imported style sheets):可以使用CSS的@import声明将一个外部样式表文件（CSS文件）输入到另外一个CSS文件中，被输入的CSS文件中的样式规则定义语句 ， 就成了输入到CSS文件的一部分。
<head>
<style type=”text/css” media=”screen,projection”>
<!--
@import url(http://www.it315.org/style.css);
@import url(/stylesheets/style.css)
-->
</style>
</head>
Css样式规则的选择器
Selector {property:value; property:value; property:value;……}
1、【html标签选择器】
<style type="text/css">
p{
font-size:1cm;
color:green;
}
div{
font-size:2cm;
}
</style>
如何引用：
<p>dddddddd</p>
<div>ssssssss</div>
2、【类选择器】
<style type="text/css">
.one{
font-size:2cm;
}
.two{
background:green;
}
</style>
如何引用：
<div class="one">dsfsdfsdf</div>
<p class="two" > sfsdfsdf</p>
注：如果一个样式被多次调用，可以做成类选择器
3、【id选择器】
如：
<style type="text/css">
#one{
font-size:2cm;
}
#two{
background:green;
}
</style>
如何引用:
<div id="one"> sfsdfsdf</div>
<p id="two"> ssadfasdf</p>
注：如果一个样式只被且只调用一次，可把该样式做成id选择器
4、【关联选择器】
<style type="text/css">
p em{
color:red;
}
</style>
如何引用：
<p>
<em>sdfsdfsdf</em>
</p>
注：反之em标签包含p标签以上样式是不成立的
5、【组合选择器】
<style type="text/css">
p,div,h1,#one,.two{
color:red;
}
</style>
如何引用:
<p>ssssssss</p>
<div>aaaaaaa</div>
<h1>sdfdfdf</h1>
<div id="one">bbbbbbbbbbbbbb</div>
<div class="two">skkkkkkkkk</div>
注;以上标签都使用了同一种样式
6、【伪元素选择器】
<style type="text/css">
a:link{font-size:10cm;}
a:hover{font-size:5cm;}
a:visited{font-size:1cm;}
</style>
Css样式规则的优先级
总起来是：从上到下，从总提到局部。
ID选择器>CLASS选择器>HTML标签选择器
内联样式表>嵌入样式表>链接样式表
Css样式表中的注释：/*要注释的内容*/
分享到：
发表评论
文章已被作者锁定，不允许评论。
-
iconfont font_1
2013-12-26 13:43 0http://ux.etao.com/posts/401 ... -
iconfont font
2013-12-26 13:41 0图形设计生成总结 http://www.yixieshi ... -
IE6,IE7绝对定位元素神秘消失或被遮挡的解决
2013-12-04 16:36 0IE6,IE7绝对定位元素 ... -
css float文字的显示问题（兼容性）
2013-11-22 17:55 0如果float容器未定义宽度，ff下内容会尽可能的撑 ... -
white-space:nowrap
2013-11-19 09:40 0white-space:nowrap应用 注意：f ... -
css3 target
2013-11-17 10:57 0转自：http://www.qianduan.net/cs ... -
css bugs
2013-10-24 10:36 0HR { clear: both; backgro ... -
使用CSS3的appearance属性改变元素的外观
2013-07-30 14:19 0转：http://www.w3cplus.com/css3/ ... -
css 技巧
2013-07-18 09:30 0使用background设置图片来替换文本： 每个网站都 ... -
CSS3 Word-wrap word-break white-space（待整理）
2013-06-15 22:45 0http://www.w3cplus.com/content ... -
浏览器兼容问题
2013-04-27 18:31 0兼容性： 1)浮动双边距：display:inline ... -
CSS竖直对齐vertical-align属性详解
2013-04-27 13:12 0转自：http://zhengguoting.blog. ... -
IE6 fixed min-height max-height
2013-04-08 22:03 0Fixed 1.expression 例子 ... -
ie6 bugs-2
2013-04-08 17:38 0ie6 overflow-y:auto BUG修复 h ... -
中间div滚动
2013-04-08 15:13 0<!DOCTYPE html PUBLIC &quo ... -
font-size:0对取消img的右侧和下侧margin
2013-04-04 21:21 0在做人人面试题时，发现默认情况下img并排会出现右边 ... -
工作总结
2013-02-25 13:57 0hr { width:100%; backgr ... -
IE6 BUG汇总
2013-02-24 08:48 0IE6 BUG汇总http://hi.baidu.com ... -
hasLayout
2013-02-23 17:11 0什么是hasLayout？http://ne ... -
各浏览器对常用行内替换元素的 'baseline' 位置理解不同
2013-02-17 14:44 0转自：http://www.w3help.org/ ...
相关推荐
DIV+CSS教程——第一天XHTML_CSS基础知识
### CSS基础知识学习笔记 #### 一、CSS简介与基本概念 **CSS**(Cascading Style Sheets)即层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。CSS的作用在于控制网页的布局和样式，使网页内容的展现更加...
【CSS基础知识】是针对初学者入门的一门课程，旨在教授如何使用CSS来控制网页的样式和布局。CSS，即层叠样式表（Cascading Style Sheets），是一种样式语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）...
整理好的一份关于css的知识大纲，希望能够帮助到大家，可以用来复习回顾
【CSS基础知识】是Web开发中的重要组成部分，它用于控制网页元素的样式、布局和呈现方式。CSS（Cascading Style Sheets）允许开发者分离内容（HTML或XML）与表现（样式），使得网页设计更加灵活和可维护。 **1. CSS...
【CSS基础知识详解】 CSS，全称为Cascading Style Sheets，中文通常翻译为“层叠样式表”，是用于控制网页布局和样式的规范。它弥补了HTML在表现层设计上的局限性，让网页设计更加灵活多样。自IE 3.0开始，浏览器...
【XHTML CSS基础知识】是网页设计中的核心概念，它们构成了网页的基本结构和表现方式。XHTML，即Extensible Hypertext Markup Language，是HTML的一个增强版本，遵循XML的语法规则，更加严谨和标准。CSS，Cascading ...
HTML+CSS 基础知识点总结 HTML+CSS 是前端开发的基础技术，掌握 HTML、CSS 和 JavaScript 语言是必不可少的。下面是 HTML+CSS 基础知识点总结： 1. HTML 是网页内容的载体，内容就是网页制作者放在页面上想要让...
### CSS基础知识解析 #### 一、CSS简介 - **1.1 HTML的局限性** HTML是一种用于构建网页内容的标准标记语言。它主要用于定义网页内容的结构和意义，例如使用`<h1>`标签来表示一级标题，使用`<p>`标签来表示段落...
HTML和CSS基础知识点 HTML是用来描述网页的一种语言，指的是超文本标记语言（Hyper Text Markup Language），它不是一种编程语言，而是一种标记语言。HTML使用标记标签来描述网页的结构和内容。 标记语言是一套...
这个“css基础知识 code”主题涵盖了CSS的基本概念、语法和常见应用，旨在帮助初学者理解并掌握CSS的核心知识。下面我们将深入探讨这些知识点。 首先，CSS是用来分离HTML或XML（包括如SVG、MathML等各种XML方言）...
《Dreamweaver8系列DIV+CSS教程XHTML_CSS基础知识》是一个综合性的教学资源，主要针对网页设计初学者，旨在帮助他们掌握XHTML和CSS的基础知识，以及如何在Adobe Dreamweaver 8环境下进行实践操作。这个教程涵盖了...
第2章 CSS基础知识,讲解CSS的盒子模型，CSS的浮动与定位,利用CSS布局网页等等。
**CSS基础知识概述** CSS，全称Cascading Style Sheets，是一种用于定义网页中元素样式和布局的语言。它允许我们将设计和结构分离，使网页的样式更易于管理和维护。本资料集合了CSS的基础知识，包括代码示例和用...
**DIV+CSS基础知识详解** 在网页设计领域，`DIV+CSS`是一种常用的技术组合，用于实现页面布局和样式控制。`DIV`（Division）是HTML中的一个区块元素，主要用于组织和划分网页内容；而`CSS`（Cascading Style Sheets...