css样式的定义有哪些方法

html-css016

css样式的定义有哪些方法,第1张

定义CSS样式 (三种方式)

一、在head标签中加载一个CSS文件示例<head><link rel="stylesheet" type="text/css" href="style.css" /></head>

此例使用了link标签。

abbr { font-size:12px}.text10pxwhite { font-size:10pxcolor: #FFFFFF}

style.css的内容

二、直接把CSS内容写在HTML文件的head标签中示例<head><style type="text/css">abbr { font-size: 12px} .text10pxwhite { font-size: 10pxcolor: #FFFFFF} </style></head>

此例使用了style标签。

两种方法是殊途同归的(但是推荐使用第一种方法).

三、使用style属性对标签加载样式示例<p style="font-size: 12pxcolor: #000">使用css</p>

此例使用了标签的style属性。

　

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>

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

</head>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style>标签定义内部样式表。

<head>

<style type="text/css">

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: redmargin-left: 20px">

This is a paragraph

</p>

定位方案有四种：静态定位、相对定位、绝对定位和固定定位。你可以使用CSS 3中的「position」属性来决定要使用的定位方式。

在这四种方案中，静态和相对定位不会影响整个文档的布局，而绝对和固定定位会与文档分开，因此页面不会为这两种类型的定位元素保留空间。 在默认状态下，所有元素都是静态放置的，即元素从上到下以及从左到右的顺序排列。

只要为元素设置了“ position”属性，就可以使用“ top”，“ right”，“ bottom”和“ left”属性精确定义其位置。

扩展资料：

相对定位中的“top”，“right”，“bottom”和“left”用于设置距元素原始位置的偏移量，但是绝对定位的四个属性不同。

在绝对定位中，“top”是指所定位元素上方的外部边界与容纳块上方的内部边界之间的距离。 换句话说，已定位元素的边距和包含块的边界将影响top的值，进而影响绝对定位元素的位置，但包含块的填充将不起作用。

在相对定位中，“top”是指被定位元素上方的外边界与其原始位置的上边缘之间的距离。“bottom”的含义类似于“top”，是指定位元素下方的外部边界与容纳块下方的内部边界之间的距离，“left”和“right”也是如此。

HTML引用CSS的方法有四种：

1.内联式：直接将CSS放在HTML标记中使用，如下：

<p style="color:bluemargin-left:20px">

这是一个段落

</p>

<!--这个段落颜色为蓝色，左边距为20像素-->

使用这种方法可以简单直接地对某个元素定义样式，但是一旦页面元素比较多时，代码会开始繁杂。所以我们进一步使用了另一种方法，内部样式表；

2.内部样式表：把样式表放到页面的<head>标记里面，如下：

<head>

    <style type="text/css" >

        p{color:bluemargin-left:20px}

    </style>

</head>

……

<body>

    <p>这是一个段落</p>

</body>

<!--这个段落将生成和例一一样的效果-->

使用内部样式表可以把css代码和html代码分离，使页面更加整洁，但是我们定义的css样式多了之后，同样页面会变得内容很多，编辑代码也会变得麻烦，我们进一步使用更好的办法，链入外部样式表；

3.链入外部样式表：将样式表保存为一个css文件，在html页面中用<link>标记连接到这个样式表文件，如下：

index.html

<head>

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

</head>

<body>

<p>这是一个段落</p>

</body>

index.css

p{color:bluemargin-left:20px}

/*定义了段落的颜色为蓝色，左边距为20像素*/

这种方法有效的将css和html分离开来，也使代码工作变得更简单，是现在比较常用的方法。同样的一个样式表文件也可以供多个html页面使用，在制作大量相同样式的页面时，可以减少很大的工作量，而且也有利于我们修改编辑。

4.导入外部样式表：导入外部样式表时使用@import，如下：

<head>

    <style>

        @import url(myStyle.css)

    </style>

</head>

这种方法和第三种方法相似，但是在输入方法更有优势，实质上相当于存在内部样式表中。缺点在于他增加了请求数，加大了浏览器的开销；@import是css2.1的产物，低版本的浏览器将会不支持；

另外，当加载html页面时，link引用的文件会同时加载，@import是等HTML页面内容全部下载下来，再下载@import后面的文件，如果文件内容过大的话没页面会出现无样式的页面，闪烁几下才能正常显示，所以相比link，@import比较不利于用户体验

几种方法的优先级

内联式>外部样式表>内部样式表

个人根据学的时候理解的顺序整理下来的，希望采纳鸭~谢谢~

有什么问题还可以问我~