CSS Cheat Sheet
Reference:
*https://www.w3schools.com/cssref/css_selectors.asp
*https://css-tricks.com/almanac/
Cascading Style Sheets at the most basic level it indicates that the order of CSS rules matter.
.class
#id
*
element
element, element
element element
element > element
element + element
:hover
:last-child
:first-child
!important (not recommended)
What selectors win out in the cascade depends on:
-Specificity
-Importance
-Source Order
----CSS tricks
推荐
--- body
body is the parent of everything
---- put an image as the background
background-image: url(background.jpg);
background-size: cover;
---- make the text in the center
text-align: center;
--- when we wanna change background but don't know the functions in there
search 'background' in CSS tricks
----display inline
display: inline
--- find the specific color
paletton.com
--- class
.class
<p class="webtext active">Lorem ipsum</p>
<p class="webtext">Lorem ipsum</p>
<p class="webtext">Lorem ipsum</p>
<p class="webtext">Lorem ipsum</p>
.webtext{
border: 5px dashed green;
}
class is a good way to select a group of elements and make sure that they all have the same styles
we can add multiple ones , so this one can be 'active'
<p class="webtext active">Lorem ipsum</p>
.active{
color: red;
}
.webtext{
border: 5px dashed green;
}
------- id
rule : only one id per page
id could be very faster
here is html,
<p class="secondary">Test how to use class to CSS</p>
<p id ="special">Test how to use class to CSS</p>
here is CSS
.secondary{
background: none;
color: yellow;
}
#special{
background: red;
color:white;
}
------CSS layouts
<body>
<header>
<nav>
</nav>
</header>
<div></div>
<footer></footer>
</body>
they are non styling tags by default .they're just container tags called semantic tags, and they help you kinda give meaning to the content with them , just by looking at the code clearly. more readable
------ pixel
with marigin and padding , it goes top bottom left right
-----marigin
it adds spacing on the outside of your element
------padding
padding creating padding inside of my element
-----float
if you can understand float , then you understand 80% of CSS layouts
---- witdth
width: 31%;
默认以整个界面为背景的百分比，一旦界面伸缩，该图形也会跟着伸缩
这样，不论在电脑、手机还是其他客户端，界面的显示都会work
width: 200px;
如果定义的是200px， 那么不同的screen size 可能会有不同显示
-------display: inline;
所有的东西 都以横着的形式展示
--------border-radius: 5px;
将外观的直角变成有弧度的角
------ clear: both;
不care之前的定义， 全盘clear
以下是html
<!DOCTYPE html>
<html>
<head>
<title>CSS layouts</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<nav>
<h1>My Page</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="">Blog</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Links</a></li>
</ul>
</nav>
</header>
<div class="row">
<div class="col">col1</div>
<div class="col">col2</div>
<div class="col">col3</div>
</div>
<footer>@2018</footer>
</body>
</html>
以下是CSS
body{
margin: 0;
}
header{
background: #999;
color: white;
padding: 15px 15px 0 15px;
}
header h1{
margin: 0;
display: inline;
}
nav ul{
margin: 0;
display: inline;
padding: 0 0 0 15px;
}
nav ul li{
background: black;
color: white;
display: inline-block;
list-style-type: none;
padding: 5px 15px;
margin: 0;
}
nav ul a {
color: white;
}
.row{
}
.col{
float: left;
border-radius: 5px;
padding: 10px .5%;
background: #333;
color: white;
width: 31%;
margin: .5%;
}
footer{
clear: both;
}
-----flexbox
make sure items displayed in the location that we want
flexbox is the most efficient and elegant way to solve website layout.
-----can i use
this is the website telling you whether this property is supported by your browser
---- responsive UI should be priority when building websites
make sure your website is responsive
what is responsive UI ?
when we open Developer tools,
one the bottom left, you will see there is a little phone icon
if we click, it will show you what your website will look like
it means there is no cut-off
everything looks good no matter what size the screen is