码迷,mamicode.com
首页 > Web开发 > 详细

CSS 基础知识

时间:2017-07-13 20:27:35      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:data   继承   忽略   编辑   数字   并且   nal   htm   结束   

CSS 实例(CSS声明总是以分号(;)结束,声明组以大括号({})括起来:)

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

技术分享

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

p
{
color:red;
text-align:center;
} 

关于text-align

left 左对齐内容。
right 右对齐内容。
center 居中对齐内容。
justify 对行进行伸展,这样每行都可以有相等的长度(就像在报纸和杂志中)。

 

 

CSS 注释

注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。

CSS注释以 "/*" 开始, 以 "*/" 结束

 

id  选择器

如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。

以下的样式规则应用于元素属性 id="para1":

#para1
{
text-align:center;
color:red;
} 

注意:ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

 

class 选择器

 

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。

 

class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:

 

在以下的例子中,所有拥有 center 类的 HTML 元素均为居中

<style>
.center
{
 text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>   //所有class为center的都会居中
<p class="center">段落居中。</p>
</body>

注意:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。

<style>
p.center        //在点前面加了HTML元素p标签 表示该选择器仅对p有效
{
    text-align:center;
}
</style>
</head>

<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>

 

 

CSS 创建


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

如何插入样式表

插入样式表的方法有三种:

  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)

外部样式表

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部:

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

浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存

 

注意:不要在属性值与单位之间留有空格(如:"margin-left: 20 px" ),正确的写法是 "margin-left: 20px"

 

内部样式表

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}//外边距
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。 

例如,外部样式表拥有针对 h3 选择器的三个属性:

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

而内部样式表拥有针对 h3 选择器的两个属性:

h3
{
    text-align:right;
    font-size:20pt;
}

假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:

color:red;
text-align:right;
font-size:20pt;

即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。

 

多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下,优先级如下:

内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

<head>
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- 设置:h3{color:blue;} -->
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
</head>
<body>
    <h3>测试!</h3>
</body>

 

注意:如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。

 

CSS 基础知识

标签:data   继承   忽略   编辑   数字   并且   nal   htm   结束   

原文地址:http://www.cnblogs.com/fzuhyj/p/7162206.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!