Home > Article > Web Front-end > How to connect html5 to css

How to connect html5 to css

下次还敢Original: 2024-04-11 06:34:46638browse

You can connect an external CSS file to an HTML5 document by using the tag in the <head> section of the HTML document: Create a CSS file with a .css extension, such as styles.css. Within the <head> section of your HTML document, add a tag that points to the location of the CSS file, for example: . In the CSS file,

How to use HTML5 to connect CSS

Introduction:
CSS (Cascading Style Sheets) is used to add style and layout to HTML documents. In order to use CSS, it needs to be concatenated into an HTML file. This article explains how to connect CSS in HTML5.

Steps:

Create a CSS file:
Use a text editor to create a new CSS file, usually ending with .css is the extension. For example, styles.css.
Reference a CSS file in an HTML document:
Within the <head> section of the HTML document, use <link>## The # tag references a CSS file. The <head> section is located at the top of the document, before the <code> tag. </code> </li> <pre class="brush:php;toolbar:false"><code class="html"><head> <title>我的页面</title> <link rel="stylesheet" href="styles.css"> </head></code></pre> </ol> <ol start="3"> <li>Writing styles in CSS files: <strong></strong>In CSS files, use CSS rules to add styles to HTML elements. CSS rules consist of selectors and declaration blocks. The selector specifies the HTML element to apply the style to, and the declaration block specifies the style attribute to apply. <br> </li> <pre class="brush:php;toolbar:false"><code class="css">body { font-family: Arial, sans-serif; font-size: 16px; }</code></pre> </ol> <p>Tip: <strong></strong></p> <ul>Place the CSS file in the same directory as the HTML document to ensure proper linking. <li>You can reference multiple CSS files by adding additional <li><link><code> tags in the </code><head><code> section. </code> </li>Using external CSS files can make HTML documents easier to maintain because the styles are saved in a separate file. <li> </ul><p>The above is the detailed content of How to connect html5 to css. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">html5</a> <a href="javascript:void(0);">css</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">选择器</a> <a href="javascript:void(0);">样式表</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="How to add external links to html" href="http://m.php.cn/faq/743600.html">How to add external links to html</a></span><span>Next article：<a class="dBlack" title="How to add external links to html" href="http://m.php.cn/faq/743602.html">How to add external links to html</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/409962.html" title="How to center CSS absolute positioning? Four implementation methods of css absolute positioning and centering" class="aBlack">How to center CSS absolute positioning? Four implementation methods of css absolute positioning and centering</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/412305.html" title="How to set the background color to be transparent in css? Introduction to two methods of setting background color transparency in css" class="aBlack">How to set the background color to be transparent in css? Introduction to two methods of setting background color transparency in css</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/473968.html" title="How to set css to exceed automatic line wrapping" class="aBlack">How to set css to exceed automatic line wrapping</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/479596.html" title="How to set underline in css" class="aBlack">How to set underline in css</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/483996.html" title="How to set background image in css" class="aBlack">How to set background image in css</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/"><b class="icon1"></b><p>Home</p></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><p>Course</p></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/login"><b class="icon5"></b><p>My</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/"><b class="icon1"></b><span>Home</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><span>Course</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/dic.html"><b class="icon6"></b><span>Dictionary</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/xiazai/"><b class="icon8"></b><span>Download</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/faq/zt" title="Topic"><b class="icon12"></b><span>Topic</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/" >Home</a></div><div class="swiper-slide"><a href="http://m.php.cn/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/course.html" >Course</a></div><div class="swiper-slide"><a href="http://m.php.cn/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="http://m.php.cn/xiazai" >Download</a></div><div class="swiper-slide"><a href="http://m.php.cn/game" >Game</a></div><div class="swiper-slide"><a href="http://m.php.cn/dic.html" >Dictionary</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>