HTML&CSS Basics 网站构建基础

最新推荐文章于 2024-10-10 22:10:24 发布

SimonHeeeee

最新推荐文章于 2024-10-10 22:10:24 发布

阅读量136

点赞数

分类专栏： Web 文章标签： html

本文链接：https://blog.csdn.net/SimonHeeeee/article/details/108326114

版权

Web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

HTML

<!DOCTYPE html>
<html>
	<head>
    <!--essential information-->
    <title>
    title
    </title>
  </head>
  <body style="background-color: purple">
    <h1>Section 1</h1>
    <h2>Section 1.1</h2>
    <p>
      <strong>Here </strong>is the content
      <!--bold-->
		</p>
    <p style="font-size: 21px;">
      Here is the<em> content</em>
      <!--italic-->
      Go to <a href="https://www.google.com">Google</a>!
    </p>
    <header></header>
    <footer></footer>
    <main></main>
    <nav></nav>
    <section></section>
    <div></div>
  </body>

</html>

HTML cheatsheet

List

<ol>
  <li></li>
  <li></li>
</ol>
<ul>
</ul>

Image

<img src="" alt="describe image">

CSS

color: red/#13a351/rgb(206, 105, 72);
background-color: white;
font-size: 21px;
font-weight: 100~900;
text-align: left/center/right;

Internal CSS

<style>
 /*ElementSelector*/
  body{
    color: red;
  }
	/*ClassSelector class=""
  	Can be used over and over again*/
  .class{
    color: blue;
  }
  /*IDSelector: id=""
  	ID can be only used one time per page
  	ID overwrite Class*/
  #ID{
    color: white;
  }
  ...
</style>

External CSS

<link href="" rel="stylesheet">

Box Model

Margins & Padding

width: 100px;
height:;

/*empty space*/
margin-top: 100px;
margin-bottom: 100px;
margin-left: 100px;
margin-right: 100px;

margin 100px 100px 100px 100px; /*top right bottom left*/
margin 100px; /*all sides*/
margin 100px 100px 100px; /*top right&left bottom*/
margin 100px 100px; /*top&bottom right&left*/

/*background*/
padding-left: 20px;
padding-right: 50px;
padding-top: 100px;
padding-bottom: 200px;

padding: 20px 30px 40px 50px;

Borders

border-color: yellow;
border-width: 3px;
border-style: solid; /*dotted/dashed/double/groove/ridge/inset/outset*/

border: yellow 20px solid;

border: 10px solid red;
border-bottom-color: yellow; 
border-bottom-style: dashed;

Total size:

content (width & height)

padding

border

margin

Center

body {
    margin: 0;
}

margin-left: auto;
margin-right: auto;

margin 0 auto;

Colums

<div class="columns">
		<!-- column 1 -->
		<div class="column">
		</div>
                    
		<!-- column 2 -->
		<div class="column">
		<h3>CSS</h3>
		</div>
                    
		<!-- column 3 -->
		<div class="column">
		<h3>And More!</h3>
		</div>
</div> <!-- / columns -->

.columns {
    width: 750px; 
    display: flex;
}

SimonHeeeee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录