CSS三种样式表 内部样式表、行内部样式表、外部引用

目录

CSS三种样式表

1、内部样式表

2、行内部样式表 

3、外部引用: 


CSS三种样式表

1、内部样式表
2、行内样式表(内联式)
3、外部样式表(外链式)

1、内部样式表

内嵌式:将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义。

直接在hello world.html 文件区域使用style元素来包含CSS。

hello world.html文件代码: 




    
    My first web page
    
   


    

LY python 练习

hahahaahhahhahahaha

hello world ,练习web加油加油,LY

小渣渣主页面
data1 data2 data3
11 22 33
111 222 333
  1. 情深缘浅
  2. 情非得以
  3. 纸短情长
  1. 说散就散
  2. 绿色
  3. 三生三世
  • 我曾
  • 鼓楼先生
    • 汉斯
    • 32
  • 寒鸦少年

2、行内部样式表 

内联样式:又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式。这个我们在上一篇文章中就有用上,可看上一章回顾一下。


3、外部引用: 

使用外部CSS文件,所以在这边我们要新建一个.css文件,我这边给它重命名为text.css。 

hello world.html文件代码:




    
    My first web page
    
      


    

LY python 练习

hahahaahhahhahahaha

hello world ,练习web加油加油,LY

小渣渣主页面
data1 data2 data3
11 22 33
111 222 333
  1. 情深缘浅
  2. 情非得以
  3. 纸短情长
  1. 说散就散
  2. 绿色
  3. 三生三世
  • 我曾
  • 鼓楼先生
    • 汉斯
    • 32
  • 寒鸦少年

text.css文件代码:

div{
    border:1px dashed red;
    width:500px;
    margin-bottom:50px;
    position: relative;
    left: 400px;
}
p{
    color: aqua;
}
ol{
    background-color: blueviolet;
}

 无论是用内部还是外部都是一样的结果。我们通常都使用外部引用,因为随着代码的不断增加,内部样式表会让我们后期修改变得更加不便。

运行结果展示图:

CSS三种样式表 内部样式表、行内部样式表、外部引用_第1张图片

总结:

 整体内容简单,掌握好即可。

CSS三种样式表 内部样式表、行内部样式表、外部引用_第2张图片

你可能感兴趣的:(web,servlet,前端,html)