- HTML5 Web Application Development By Example Beginner's Guide
- J.M. Gustafson
- 331字
- 2021-08-13 16:50:19
Time for action – creating the CSS file
Next we'll create our base CSS file named app.css
. This will have all of the basic styling that will be used by our applications, such as the default font and colors. The first part of the CSS file contains some document-wide element styles that set the basic look and feel.
body { font: 1em Verdana, Geneva, sans-serif; padding: 0; margin: 5px; color: Black; background-color: WhiteSmoke; } div { padding: 0; margin: 0; } button { cursor: pointer; } .hidden { display: none; }
First we set the style to be applied to the body, which will trickle down to the other elements. I like to set the font size to 1em
instead of a fixed pixel size so that it uses the browser's default font size. Then you can base other measurements off of that using ems or percent to give you a more reactive layout and make it easier to change the look of your application later on. Constant pixel sizes are good when you always need something to be the same size no matter what, or for small values for borders and margins, and so on.
Note
Typically, 1em is the same as 16px by default in most browsers.
Next we make sure all padding and margins are removed from all the div
elements, so we zero them out. It's also nice to have the cursor change to a pointer when the user hovers over a button, so we'll set that here too. Finally, there is a .hidden
class selector that can be added to any element to hide it from being displayed.
We'll finish the CSS off with some styles for the app
and main
elements. All we're setting at this point are margins, padding, and colors:
#app { margin: 4px; background-color: #bbc; } #app>header { padding: 0 0.5em; font-size: 1.5em; color: WhiteSmoke; background-color: #006; } #app>footer { padding: 0.25em; color: WhiteSmoke; background-color: #006; } #main { margin: 1em; }
- 深度實(shí)踐OpenStack:基于Python的OpenStack組件開發(fā)
- Visual C++程序設(shè)計學(xué)習(xí)筆記
- 程序員數(shù)學(xué):用Python學(xué)透線性代數(shù)和微積分
- Java從入門到精通(第5版)
- Rust Cookbook
- Silverlight魔幻銀燈
- Podman實(shí)戰(zhàn)
- ADI DSP應(yīng)用技術(shù)集錦
- Unity&VR游戲美術(shù)設(shè)計實(shí)戰(zhàn)
- 軟件項(xiàng)目管理實(shí)用教程
- Oracle實(shí)用教程
- 跟戴銘學(xué)iOS編程:理順核心知識點(diǎn)
- Professional JavaScript
- Mastering Clojure
- HTML5+CSS3+jQuery Mobile+Bootstrap開發(fā)APP從入門到精通(視頻教學(xué)版)