今天开始用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
