CSS - 创建方式 ¶

作者：KK
发表日期：2016.1.26

前面我们都是在HTML代码中添加style标签再在标签里面写CSS代码实现CSS效果的

这里教你将CSS代码写到一个独立文件中,不需要修改HTML代码,先试一下再解释吧

在html文件相同目录下建立一个叫style.css的文件,其实名字你可以自己喜欢,没有规定的
然后打开这个文件,将样式代码写到这里,比如body{background-color:red;},注意这里不需要用style标签包住,因为不在html范围里
在html文件的head标签里添加一个link标签,这样写:
```
<link rel="stylesheet" href="style.css" />
```
主要就是把css的文件名放在link标签的href属性里,而另外rel="stylesheet"这个属性不用动它，也别删除它
然后浏览器打开html文件,就会看到html中的body被渲染了红色背景

以后要修改样式则只要修改style.css就行了.总结下来思路就是:将CSS代码写到一个独立文件中,然后通过link标签来引用它

内联样式 ¶

顺便提一下,你还可以不需要封装独立文件也不需要添加style标签,只需要在标签里添加一个style属性就可以写样式,比如

<p style="color:red; font-size:18px;">通过属性来写样式叫内联样式</p>

属性名称叫style,然后属性值就是像平时写CSS属性一样就行了.而此前教的通过style标签来写样式的叫做内部样式表,不用死记,你知道有这三种写样式的方式就可以

var shiftWindow = function () { scrollBy(0, -50) }; if (location.hash) setTimeout(shiftWindow, 1); window.addEventListener("hashchange", shiftWindow); var element = document.createElement("script"); element.src = "./jssearch.index.js"; document.body.appendChild(element); var searchBox = $('#searchbox'); // search when typing in search field searchBox.on("keyup", function(event) { var query = $(this).val(); if (query == '' || event.which == 27) { $('#search-resultbox').hide(); return; } else if (event.which == 13) { var selectedLink = $('#search-resultbox a.selected'); if (selectedLink.length != 0) { document.location = selectedLink.attr('href'); return; } } else if (event.which == 38 || event.which == 40) { $('#search-resultbox').show(); var selected = $('#search-resultbox a.selected'); if (selected.length == 0) { $('#search-results').find('a').first().addClass('selected'); } else { var next; if (event.which == 40) { next = selected.parent().next().find('a').first(); } else { next = selected.parent().prev().find('a').first(); } if (next.length != 0) { var resultbox = $('#search-results'); var position = next.position(); // TODO scrolling is buggy and jumps around // resultbox.scrollTop(Math.floor(position.top)); // console.log(position.top); selected.removeClass('selected'); next.addClass('selected'); } } return; } $('#search-resultbox').show(); $('#search-results').html('

No results

'); var result = jssearch.search(query); if (result.length > 0) { var i = 0; var resHtml = ''; for (var key in result) { if (i++ > 20) { break; } resHtml = resHtml + '

' + result[key].file.t + '' + '' + result[key].file.d + '

'; } $('#search-results').html(resHtml); } }); // hide the search results on ESC $(document).on("keyup", function(event) { if (event.which == 27) { $('#search-resultbox').hide(); } }); // hide search results on click to document $(document).bind('click', function (e) { $('#search-resultbox').hide(); }); // except the following: searchBox.bind('click', function(e) { e.stopPropagation(); }); $('#search-resultbox').bind('click', function(e) { e.stopPropagation(); }); });