您当前的位置: 首页 >  css

星球守护者

暂无认证

  • 4浏览

    0关注

    641博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

css 样式表的三种方式

星球守护者 发布时间:2019-09-21 14:14:46 ,浏览量:4

如何插入样式表,插入样式表的方法有三种:
  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)
  • 内部样式表(Internal style sheet)
  • 当单个文档需要特殊的样式时,就应该使用内部样式表。
  • 可以使用" style" 标签在文档头部定义内部样式表 案例
  • 
    	
    		css_in
    		
    		
    			div{			
    				background:yellow		
    			}				
    		
    		
    	
    		
    不走心的努力都是在敷衍自己青春微凉,惟愿不忘初心
    案例结果

    在这里插入图片描述

    内联样式(Inline style)
  • 由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。
  • 要使用内联样式,你需要在相关的标签内使用样式(style)属性。
  • tyle 属性可以包含任何 CSS 属性。 案例
  • 
    	
    		css_id
    		
    	
    	
    	
    		往后,开怀大笑也好,
    		

    热泪盈眶也好,都要是为了值得的人和事。

    案例结果

    在这里插入图片描述

    外部样式表(External style sheet)

  • 当样式需要应用于很多页面时,外部样式表将是理想的选择。
  • 在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观
  • 每个页面使用 标签链接到样式表。 标签在(文档的)头部: 案例
  • 
    	
    		css_in
    		
    		
    		
    	
    		不走心的努力都是在敷衍自己青春微凉,	
    		
    		

    惟愿不忘初心

    style.css文件

    	
    p{
    	color:red;
    	font-size:20px;
    	text-align:center;	
    	background:black;
    }
    h1{
    	color:yellow;
    	font-size:20px;
    	text-align:center;
    	background:blue
    }
    hr{
    	color:red;
    }
    body{
    		
    	background-image:url(./images/1.jpg)
    		
    }
    
    案例结果

    在这里插入图片描述

    [学习资料](https://www.w3cschool.cn/css/css-howto.html)
关注
打赏
1662051426
查看更多评论
立即登录/注册

微信扫码登录

0.0837s