本文介绍了CSS的基础知识，包括它不是一种编程语言而是样式表语言，用于网站布局和设计。讨论了三种添加CSS的方法：内联、内部和外部，并强调了外部链接样式表的最佳实践。此外，文章还涵盖了CSS选择器、颜色、字体、盒模型、定位、类和ID的选择，以及一些实用的样式技巧，如列表、链接和表单的样式设置。最后，提到了响应式设计中的媒体查询和浮动元素清除。
Author: David Zhang
Date: 08/10/2021
Version: 1.0
CSS Notes
Based on CSS Crash Course
Intro
-
CSS - Cascading Style sheets
Cascading style sheets are called cascading because several different style sheets can be active for a single document at the same time. When multiple style sheets are in effect, they are applied to the document in a pre-determined sequence set by the browser: their formatting instructions can be thought of as cascading from one style sheet to the next.
-
NOT a programming language
-
Style sheet/Styling language
-
Used for website layout and design
-
Can be extended with Sass/Less
Three Methods for Adding CSS
- Inline CSS: Directly in the html element(NO!)
<h1 style="color:red">Hello World!</h1>
Keep the presentation and functionality and styling separate or as much as possible
- Internal CSS: Using
<Style>tags within a single document
<head>
<style type="text/css">
h1{
color:"red"
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
Can only be used in the particular html file and fatten the html file as well
- External CSS: Linking an
external.cssfile(BEST)
/*This is a CSS file, style.css*/
h1{
color:"red"
}
<head>
<link rel="stylesheet" type="text/css"
href="../style.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
CSS Selectors
Font & Layout & Format
Colors
body{
color:red;
background:coral;
}
h1{
color:#00ff00;
}
p{
color:rgb(0,0,255);
}
-
Color names
-
HTML5 color names
-
Hexadecimal
-
RGB
Font
body{
/* If the first font cannot be applied the apply the second one */
font-family:Arial, sans-serif;
font-size:16px;
font-weight:bold;
/* Same as above */
font: bold 16px Arial,sans-serif;
text-decoration:underline;
text-transform:uppercase;
text-align:center;
letter-spacing:0.2em;
word-spacing:1em;
line-height:1.6em;
margin:auto;
/* Use percent can adapt to the change of browser size */
width:80%;
border:5px red solid;
/* rounded corner */
border-radius:15px
}
- Web-safe font(can be directly used); special font(needed to be imported)
Box Model
/* All same */
p{
margin-top:5px;
margin-bottom:5px;
margin-right:10px;
margin-left:10px;
}
/* top right bottom left */
p{
margin:5px 10px 5px 10px;
}
/* top and bottom right and left */
p{
margin: 5px 10px;
}
Class and ID
-
Basically no difference
-
ID should be unique; class may be reused
-
Use
.to target class,#to target ID in.cssfile
.box-1{
}
List
ul{
list-style:square;
list-style:none;
list-style-image:url('../images/check.png');}
li{
display: inline;
}
Link
a{
text-decoration:none;
color:#000;
}
a:hover{color:red;}
a:active{color:green;}
a:visited{color:black;}
Form
<form class="my-form">
<div class="form-group">
<label>Name: </label>
<input type="text" name="name">
</div>
<div class="form-group">
<label>Email: </label>
<input type="text" name="email">
</div>
<div class="form-group">
<label>Message: </label>
<textarea name="message"></textarea>
</div>
<input class="button" type="submit" value="Submit" name="">
</form>
.my-form{
padding:20px;
}
.my-form .form-group{
padding-bottom:15px
}
.my-form .label{
display:block;
}
.my-form input[type="text"], .myform textarea{
padding:8px;
width:100%
}
.button{
background-color:#333;
color:#fff;
padding:10px 15px;
border:none;
}
.button:hover{
background-color:red;
color:#fff;
}
Main Block & Side Bar
<div id="main-block">
<p>smth</p>
</div>
<div id="sidebar">
<p>smth</p>
</div>
<div class="clr"></div>
/* clear the float */
.clr{
clear:both;
}
#main-block{
float:left;
width:70%;
padding:15px;
box-sizing:border-box;
}
#sidebar{
float:right;
width:30%;
background-color:#333;
color:#fff;
padding:15px;
box-sizing:border-box;
}
Positioning
-
Static (default)
render the elements in order of the document
-
Relative
- the element is positioned relative to its normal position
- can add properties like top bottom left right to push it where we want
-
Absolute
allow us to target whatever position we want inside a relative element
-
Fixed
always in the same position
-
Initial
-
Inherit
<div class="p-box">
<h1>Hello World!</h1>
<h2>Goodbye!</h2>
</div>
/* h1 will stay in the top of the page not the block because its position is absolute */
.p-box{
width:800px;
height:500px;
border:1px solid #000;
margin-top:30px;
}
.p-box h1{
position:absolute;
top:40px;
}
/* in this way h1 will be in the given position inside the block */
.p-box{
width:800px;
height:500px;
border:1px solid #000;
margin-top:30px;
position:relative;
}
.p-box h1{
position:absolute;
top:40px;
left:200px;
}
<!-- this element has two classes -->
<a class="fix-me button" href="">Hello</a>
/* the button will stuck in the fixed position */
.fix-me{
position:fixed;
}
/* some features about background image */
.p-box{
background-image:url('../bgimage.jpg');
background-repeat:no-repeat;
background-postion:100px 200px;
background-position:center center;
background-position:center top;
}
Pseudo Classes
<ul class="my-list">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
<li>List 6</li>
<li>List 7</li>
</ul>
.my-list li:first-child{
background:red;
}
.my-list li:last-child{
background:blue;
}
.my-list li:nth-child(5){
background:green;
}
.my-list li:nth-child(even){
background:yellow;
}
Media Query
For response
@media(max-width: 600px){
#main{
float: none;
width: 100%;
}
#sidebar{
float: none;
width: 100%;
}
}
扫一扫
466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
