整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS的三种样式

CSS的三种样式

SS

CSS全称为 Cascading Style Sheets,译为层叠样式表。CSS有三种样式:内联样式,内嵌样式,外联样式。

内联样式

内联样式通过HTML元素的style属性来设置CSS样式,语法如下:

 style="CSS属性:CSS属性值";

示例代码:

 <!DOCTYPE html>
 <html>
     <head>
         <title>内联样式</title>
         <meta charset="UTF-8">
     </head>
     <body>
         <!-- style="css属性:css属性值;" -->
         <div style="color:red;">启嘉班</div> 
     </body> 
 </html>

* 内联样式的缺点: 只对当前元素有效, 导致CSS代码可能出现冗余

内嵌样式表

通过HTML元素的style属性来设置CSS样式,语法如下:

 <style>
     选择器{
         属性名:属性值;
     }
 </style>

示例代码:

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>内嵌样式</title>
     <style>
         p{
             color: chartreuse;
             font-size: 50px;
         }
        
     
     </style>
 </head>
 <body>
     <p>19级启嘉班</p>
 </body>
 </html>

优点: 相对于内联样式

*通过CSS选择器定位HTML页面中一个或一类元素

缺点:相对于内联样式

* 将CSS代码嵌入到HTML页面中,只能对当前HTML页面有效

* 编码的风格不符合编码原则中的低耦合

* 导致CSS代码可能出现冗余


外联样式

通过HTML元素的<link>元素来设置CSS样式表

1.创建一个CSS文件,用来存储CSS样式内容

2.在HTML页面中通过<link>元素引入外部指定的CSS文件

<link>元素:

* 作用: 用来引入HTML页面外部的资源

属性:

* rel属性: 用来设置外部资源与当前HTML页面的关系

* href属性: 用来设置引入外部资源的路径(相对路径和绝对路径)

语法结构如下:

 <link rel="stylesheet" href="CSS文件路径">

示例代码:

 <link rel="stylesheet" href="style.css">

优点: 相对于内嵌样式表和内联样式

* 将CSS样式与HTML页面进行分离(低耦合)

* 不会出现内嵌样式表或内联样式产生的代码冗余

缺点: 可能对HTML页面的加载造成负担,导致性能下降


下一节更新CSS选择器

、//火狐

@-moz-document url-prefix() {

div {

margin-left:15px;

}

}

background:-moz-linear-gradient(top,#15A216,#fafafa);/*火狐*/

2、//谷歌

@media screen and (-webkit-min-device-pixel-ratio:0) {

div{

margin-left:360px;

}

}

background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#15A216), to(#fafafa));/*谷歌*/

3、//声名兼容ie下的浏览器 IE8 IE9

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> //兼容IE7

ss是一种用来为Html文档添加样式(字体、间距、位置、颜色、角度等显示效果)的计算机语言。学习网站W3school。

css的引用样式:

一:style标签(内联样式)


通过在head标签中间新建一个style标签,该标签内部存放的就是网页文件中的css代码。

二:外部引用css文件(外联样式)



新建一个css文件

在head标签中间新建一个link标签,通过href属性设置外部的css文件地址。rel=“stylesheet”表示我们引用的一个样式表(css文件)。

三:标签内部style属性(行内样式)

在开始标签的内部可以设置一个叫做style的属性,属性的双引号存放该元素代码的css样式(不推荐使用)。


一般用的就是通过link标签来引入外部css文件来修改样式,一般修改样式有字体,颜色,大小,文本居中,间距等。