css样式表的方式（CSS样式表怎么做）

本文目录

• CSS样式表怎么做
• css 样式的导入的三种方式
• 创建CSS样式表的三种方式
• css样式表的三种样式
• 网页添加CSS样式表的四种方式
• css样式怎么引用的
• 引入CSS的方式有哪些
• 在网页中使用CSS 样式表的三种方式是什么
• css的四种引入方式分别是什么
• CSS 样式表有哪几种

CSS样式表怎么做

在网页中使用CSS：
一、内部规则 - 直接写在网页文件内部的样式
1.将以下代码插入在与之间可设定此页的默认的样式
2.在HTML行中加入样式规则
如：
Amaze your friends!
二、外部规则 - 独立的样式表文件
1.链接样式表文件
方法：在内使用标签：
如：
并建立一个文本文件，起名mystyles.css (和上面对应)。文件内容如：
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
2.输入样式表文件(返回)
方法：在内插入列代码：
并建立一个文本文件，起名company.css (和上面对应)。文件内容如：
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
可见该种方法的好处是可与网页的内部样式共存。
三、CSS举例
指定全文的文本格式：
body{background: yellow;color=red; font-size=9pt}
指定局部的默认的文本格式：
P{...}
H1{...}
TH{...}
TD{...}
...
指定超链接的样式：
A:link {text-decoration: none; color:#0000FF; font-family: 宋体}
A:visited {text-decoration: none; color: #800000; font-family: 宋体}
A:active {text-decoration: none; color: #FF0000; font-family: 宋体}
A:hover {text-decoration: underline; color:#FF0000}
推荐你可以上菜鸟教程官网学习

css 样式的导入的三种方式

1.行内样式 行内样式只能影响它所在的标签，而且总会覆盖嵌入样式和链接样式。
《p style="font-size: 12px; font-weight:bold; font-style:italic; color:red;"》By adding inline CSS styling to the》《/p》
2.嵌入样式 嵌入样式的应用范围仅限于当前页面。页面样式会覆盖外部样式表中的样式，但会被行内样式覆盖。
《head》

《style type="text/css"》
h1 {font-size:16px;}
p {color:blue;}
《/style》
《/head》
3.链接样式
《link href="styles.css" rel="stylesheet" type="text/css" /》

样式的写法
例子如下
1 ) p {color:red; font-size:12px; font-weight:bold}
2 ) h1 {color:blue; font-weight:bold;}
h3 {color:blue; font-weight:bold;}
h3 {color:blue; font-weight:bold;}

3）假设，你在写完前面那条规则后，又想只把h3变成斜体，那可以再为h3写一条规则：
h1, h3, h3 {color:blue; font-weight:bold;}
h3 {font-style:italic;}

创建CSS样式表的三种方式

主要探讨HTML5中CSS（层叠样式表），它是用来对HTML文档外观的表现形式进行排版和格式化。

使用CSS

CSS样式由一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个CSS属性和属性值。

《p style="color:red;font-size:50px;"》这是一段文本《/p》

解释：style是行内样式属性。color是颜色属性，red是颜色属性值；font-size是字体大小属性，50px是字体大小属性值。

三种方式

创建CSS样式表有三种方式：1.元素内嵌样式；2.文档内嵌样式；3.外部引入样式。

1.元素内嵌样式

《p style="color:red;font-size:50px;"》这是一段文本《/p》

解释：即在当前元素使用style属性的声明方式。

2.文档内嵌样式

《styletype="text/css"》

p{

color:blue;

font-size:40px;

}

《/style》

《p》这是一段文本《/p》

解释：在《head》元素之间创建《style》元素，通过选择器的方式调用指定的元素并设置相关CSS。

3.外部引用样式

《linkrel="stylesheet"type="text/css"href="style.css"》

//style.css

@charset"utf-8";

p{

color:green;

font-size:30px;

}

解释：很多时候，大量的HTML页面使用了同一个组CSS。那么就可以将这些CSS样式保存在一个单独的.css文件中，然后通过《link》元素去引入它即可。@charset"utf-8"表明设置CSS的字符编码，如果不写默认就是utf-8。昌平镇电脑培训认为如果有多个.css文件，可以使用@import导入方式引入.css文件。只不过，性能不如多个《link》链接。

css样式表的三种样式

CSS样式表可以分为外部样式表、内部样式表、内联样式。

一、外部样式表

外部样式表的作用：设置一个外部样式表，在Html页面的head中添加，通过link标签标记，rel：指定其样式为stylesheet，type：指定其格式为text/css，herf：指定到欲应用的css样式文件。此样式表应用于当前整个页面效果。

二、内部样式表

内部样式表的作用：设置一个内部样式表，在Html页面的head中添加，通过在head中添加style标签标记，type：指定其格式为text/css，此样式表只应用于当前文档。

三、内联样式

内联样式表的作用：设置一个内联样式表，在Html页面的body中添加，在添加元素的标签中声明样式，都包含在style属性中。在三个样式表中，内联样式表的优先级最高，若页面中同时存在三种样式表，内联样式会覆盖其他两种样式。

CSS的发展历程

1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变得越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

网页添加CSS样式表的四种方式

一、使用STYLE属性： 将STYLE属性直接加在个别的元件标签里。
元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}
例如：
TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%
这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。
二、使用STYLE标签： 将样式规则写在STYLE.../STYLE标签之中。
STYLE TYPE="text/css"
!--
样式规则表
--
/STYLE
例如：
STYLE TYPE="text/css"
!--
BODY {
color: BLUE;
background: #FFFFCC;
font-size: 9pt}
TD, P {
COLOR: GREEN;
font-size: 9pt}
--
/STYLE
通常是将整个的 STYLE.../STYLE结构写在网页的HEAD /HEAD部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。
三、使用 LINK标签： 将样式规则写在.css的样式档案中，再以LINK标签引入。
假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入
LINK REL=STYLESHEET TYPE="text/css" HREF="example.css"
即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的head/head部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。
四、使用@import引入： 跟LINK用法很像，但必　放在STYLE.../STYLE 中。
STYLE TYPE="text/css"
!--
@import url(引入的样式表的位址、路径与档名);
--
/STYLE
例如：
STYLE TYPE="text/css"
!--
@import url;
--
/STYLE
要注意的是，行末的分号是绝对不可少的！这种方式也可以把
@import url;
加到其它样式内调用。

css样式怎么引用的

CSS样式的引用方式有三种：
一、行间样式表
行间样式表是指将CSS样式编码写在HTML标签中，格式如下
《h1 style="font-size:12px;color:#000FFF"》
我的CSS样式。
《/h1》
行间样式表由HTML元素的HTML元素的style支持，只需将CSS代码用分号隔开写在style=""之中。这是最基本的形式，但是它没有实现表现与内容分离且不能灵活的控制多个页面所以我们只是在调试CSS代码的时候使用。
二、内部样式表
内部样式表与行间样式表相似都是把CSS代码写在HTML页面中，稍微不同的是前者可以将样式表放在一个固定的位置，格式如下
《html》
《head》
《title》内部样式表《/title》
《style type="text/css"》
h1{font-size:12px;
color:#000FFF
}
《/style》
《/head》
《body》
《h1》我的CSS样式。《/h1》
《/body》
《/html》
内部样式表编码是初级的应用形式，不能达到跨页面使用所以不适合使用。
三、外部样式表
外部样式表是CSS应用中最好的一种形式，它将CSS样式代码单独放在一个外部文件中，再由网页进行调用。多个网页可以调用一个样式文件表，这样能够实现代码的最大限度的重用及网站文件的最优化配置，格式如下
《html》
《head》
《title》外部样式表《/title》
《link rel="stylesheet" rev="stylesheet" href="style.css"》
《/head》
《body》
《h1》我的CSS样式。《/h1》
《/body》
《/html》
在style.css中的代码为
h1{font-size:12px;
color:#000FFF
}
我们在《head》中使用了《link》标签来调用外部样式表文件。将link指定为stylesheet方式，并使用了href="style.css"指明样式表文件的路径便可将该页面应用到在style.css中定义的样式。

引入CSS的方式有哪些

css主要有三种引用方法：
1，内部引用，在html文档中在《style》标签里面写的css样式
《style》
bdoy{font-size:14px;}
《/style》
2，外部引用，用《link》标签引用外部的css文件，将样式引用到html文档来。
《link rel="stylesheet" type="text/css" href="style.css"》
3，在标签中使用，使用style属性将当前的标签样式改变。
《div style="color:red"》《/div》

在网页中使用CSS 样式表的三种方式是什么

你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。
链入外部样式表文件 (Linking to a Style Sheet)
你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：
《head》
《title》文档标题《/title》
***隐藏网址***
《/head》
而在XML中，你应该如下例所示在声明区中加入：
***隐藏网址***
定义内部样式块对象 (Embedding a Style Block)
你可以在你的HTML文档的《HTML》和《BODY》标记之间插入一个《STYLE》...《/STYLE》块对象。示例如下：
《html》
《head》
《title》文档标题《/title》
《style type="text/css"》
《!--
body {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
h3 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
p {font: 10pt/12pt "Arial"; color: black}
--》
《/style》
《/head》
《body》
请注意，这里将style对象的type属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单。
内联定义 (Inline Styles)
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下：
《p style="margin-left: 0.5in; margin-right:0.5in"》这一行被增加了左右的外补丁《p》
》》CSS基本语法

css的四种引入方式分别是什么

CSS的四种引入方式分别是：行内样式、内嵌样式、链接样式和导入样式。
1、行内样式
最直接最简单的一种，直接对HTML标签使用style=""，例如：
《p style="color:#F00; "》《/p》缺点：HTML页面不纯净，文件体积大，不利于蜘蛛爬行，后期维护不方便。
（视频教程推荐：css视频教程）
2、内嵌样式
内嵌样式就是将CSS代码写在《head》《/head》之间，并且用《style》《/style》进行声明，例如：
《style type="text/css"》
body,div,a,img,p{margin:0; padding:0;}
《/style》优缺点：页面使用公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护难度也大，如果文件很少，CSS代码也不多，这种样式还是很不错的。
3、链接样式
链接样式是使用频率最高，最实用的样式，只需要在《head》《/head》之间加上《link?/》就可以了，如下：
《link type="text/css" rel="stylesheet" href="style.css" /》优缺点：实现了页面框架代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便
4、导入样式（不建议使用）
导入样式和链接样式比较相似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，类似第二种内嵌样式。
@import在html中使用，如下：
《style type="text/css"》
@import url(style.css);
《/style》@import在CSS中使用，如下：
@import url(style.css);推荐教程：css快速入门

CSS 样式表有哪几种

1.1 内联样式表
在标签中直接添加style 例：《p style=“”》 《/p》

1.2 内嵌样式表
作为一个独立区域内嵌在网页内，必须卸载head标签内
例：《head》
《style=“”》
《/style》
《/head》

1.3 外部样式表
即css样式表，需要新建一个css文件，用来放样式表。如果在html文件中调用样式表，需在html文件中点击 右键→CSS样式→附加样式表。（一般用link连接方式）
注：有些标签会有默认的边距，一般写代码的时候会先去除（也可以设置其他需要的样式）
* （对所有标签起作用）
{margin：0px； （边距）
padding：0px；} （间距）