html中使用css的方法有哪几种

html-css030

html中使用css的方法有哪几种,第1张

1.内联方式(行内样式)

就是在HTML的标签中使用style属性来设置css样式

格式:<html标签 style="属性:值属性:值....">被修饰的内容</html标签>

<p style="color:orangefont-size:18px">在HTML中如何使用css样式</p>

1

特点:仅作用于本标签。

2. 内部方式(内嵌样式)

就是在head标签中使用标签来设置css样式

格式: <style type="text/css">....css样式代码 </style>

特点:作用于当前整个页面

3. 外部导入方式(外部链入)

3.1 (推荐)就是在head标签中使用标签导入一个css文件,在作用于本页面,实现css样式设置

格式:<link href="文件名.css" type="text/css" rel="stylesheet"/>

3.2 还可以使用import在style标签中导入css文件。

如:<style type="text/css">@import "style.css"</style>

特点:作用于整个网站

他们的优先级:当样式冲突时,就是采用就近原则,是值css属性离被修饰的内容最近的为主。

若没有样式冲突则采用叠加效果。

用css设置textarea代码如下:

<textarea style="width:200pxheight:100pxborder:solid 1px #f00border-radius:20pxresize:none"></textarea>

border-radius:20px;

resize:none

1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)

overflow-x水平方向内容溢出时的设置

overflow-y垂直方向内容溢出时的设置

以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

2.scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色)

scrollbar-arrow-color上下按钮上三角箭头的颜色

scrollbar-base-color滚动条的基本颜色

scrollbar-dark-shadow-color立体滚动条强阴影的颜色

scrollbar-face-color立体滚动条凸出部分的颜色

scrollbar-highlight-color滚动条空白部分的颜色

scrollbar-shadow-color立体滚动条阴影的颜色

我们通过几个实例来讲解上述的样式属性:

1.让浏览器窗口永远都不出现滚动条

没有水平滚动条

<body style= "overflow-x:hidden ">

没有垂直滚动条

<body style= "overflow-y:hidden ">

没有滚动条

<body style= "overflow-x:hiddenoverflow-y:hidden ">或 <body

style= "overflow:hidden ">

2.设定多行文本框的滚动条

没有水平滚动条

<textarea style= "overflow-x:hidden "></textarea>

没有垂直滚动条

<textarea style= "overflow-y:hidden "></textarea>

没有滚动条

<textarea style= "overflow-x:hiddenoverflow-y:hidden "></textarea>

或 <textarea style= "overflow:hidden "></textarea>

3.设定窗口滚动条的颜色

设置窗口滚动条的颜色为红色 <body style= "scrollbar-base-color:red ">

scrollbar-base-color设定的是基本色,一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。

加上一点特别的效果:

<body style= "scrollbar-arrow-color:yellowscrollbar-base-color:lightsalmon ">

4.在样式表文件中定义好一个类,调用样式表。

<style>

.coolscrollbar{scrollbar-arrow-color:yellowscrollbar-base-color:lightsalmon}

</style>

这样调用:

<textarea class= "coolscrollbar "></textarea>

Html中引入css的主要方式有四种,分别是外部样式、内部样式、内联样式、导入式。

一、外部样式

(一) 使用外部样式的好处

1.减少代码量 ,网站中相同部分的样式只需要编写一次,我们只需要把css文件引入到不同的html页面中即可实现展示效果。

2.更改网站风格方便,我们可以通过修改一个css文件就可以实现整个网站的外观修改。

3.Html页面渲染时,css文件能够被同时加载。

4.结构与表现分离,便于后期维护。

(二) 适用于多个页面需要相同样式内容的时候使用

(三) 书写位置:新建单独的后缀名为.css文件,使用link标签引入到html页面中,将link标签放到Html页面的head标签中

例:

rel:规定当前文档与被连接文档之间的关系.

href:规定为连接文档的位置

type:规定被连接文档的MIME类型

二、内部样式

(一) 使用内部样式的好处

1.结构与表现分离,便于后期维护。

2.所有的CSS控制都是针对单独的面,没有多余的CSS代码。

3.同样页面中相同的样式可以重复使用。

(二) 使用内部样式的缺点

1.只能在一个页面中使用

2.网站更换风格麻烦

3.Css在html页面中,页面显得臃肿

(三) 适用于个别页面需要特殊样式时

(四) 书写位置:写在html页面的head标签之间,在head标签之间书写style标签

例:

三、行间样式

(一) 使用内部样式的好处

1. 单独修改单个标签的样式

(二) 使用内部样式的缺点

1. 结构与表现没有分类,不利于后期维护。

2. 只能修改单个标签的样式,代码重复利用率不高,代码冗长。

(三) 适用于个别标签需要特殊样式时

(四) 书写位置:在标签的开始标签内部书写style=””

例:

四. 导入式

(一) 使用导入的好处

1.减少代码量,网站中相同的部分的样式只需要书写一次,后续只需要把css文件引入到不同的Html页面中即可。

2.更改网站风格方便,我们可以通过修改一个css文件,就可以修个整个网站的外观。

3.结构与表现分离,便于后期维护。

(二) 使用导入的缺点

1.需要等Html页面全部加载完才能加载css文件。

(三) 适用于多个页面需要展示相同样式的时候

(四) 书写位置:写在Html页面的head标签中的style表现中,用@import导入css文件

以上就是html导入css代码的详细介绍,更多关于html方面的知识点,可以看下这个视频教程:网页链接,希望我的回答能帮到你。