day01

今天开始用vs code 编写前端网页

1.什么是HTML和CSS

HTML 负责网页的结构，CSS负责修饰

2.常用的HTML标签

h1~h6,p,img,div,a,input,button,ul,li,dl,dt,dd

3.常用的CSS样式

• 3.1CSS基本语法

//HTML
<p>hello world</p>

<style>
p{color:red;}
</style>

• 3.2常用的选择器

//HTML
<p class="one" id="two">hello world </p>
<p class="one" >hello world </p>
<p>hello world </p>

//css
//元素选择器，
p{}

会修改所有p元素的属性

//css
//class
.one{}

一个class可以给不同的元素同时命名

//css
//id选择器
#two{}

id命名不可以重复

• 3.3盒子模型

盒子模型.png

• 3.4实现块元素的水平居中

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

• 3.5常用的css样式

color:设置文字的颜色
width:设置一个元素的宽度
height:设置一个元素的高度
background-color:设置背景颜色
background-image:设置一个元素的背景图片
line-height:设置文字的行高
text-align:设置文字对其的方式
border-width:边框的宽度
border-style:边框的样式
boeder-color:边框的颜色
p:hover{color:blue}当鼠标移动到元素上时可以改变元素的css样式

• 3.6样式重置

 //*代表所有的元素
*{margin:0; padding:0px }

• 3.7盒子模型的一个例子

//css
<style>
        .one {
            width: 100px;
            height: 100px;
            background-color: red;
            /* margin可以改变元素的位置 */
            margin-left: auto;
            margin-right: auto;
            /* border   可以改变元素的宽度 */
            /* 边框的样式 */
            border-style: solid;
            /* 边框的宽度 */
            border-width: 10px;
            /* 边框的颜色 */
            border-color: black;
            /* padding
            填充可以改变元素的宽度 */
            padding: 20px;
        }
</style>

//HTML
<div class="one"></div>

代码效果：

盒子居中.png