Day01 基本标签和基本css用法

A.今天学到什么

1.什么是HTML和CSS

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

2.常用的HTML标签

//标题
h1~h6
//段落
p
//区块
div
//链接
a
//输入框
input
//按键
button
//无序列表
ul
//列表内容
li
//定义列表
dl
//定义条目的标题
dt
//定义条目的详情
dd

3.常用的CSS样式

• 3.1CSS的语法

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

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

• 3.2常用的选择器

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

//css
//元素选择器
p{}
//class选择器
 /*特点：1.可以给多个标签命名同一个class名
              2.可以给一个标签多个class名*/
.one{}
 /*#+idName
    id选择器
    特点:每个ID名都是唯一的*/
#two{}

• 3.3盒子模型

盒子模型.jpg

元素居中仅仅针对块元素有效
margin-left:auto; 
margin-right:auto;

• 3.4常用的CSS样式

//设置文字的颜色
color: red;
//设置一个元素的宽度
width:500px;
//设置一个元素的高度
height:500px;
//设置背景颜色
background-color:red;
//设置一个元素的背景图片
background-image:url("images/test.jpg");
//设置文字的行高
line-height:20px;
//设置文字对其的方式
text-align: center;
//边框的宽度
border-width: 1px;
//边框的样式
border-style: solid;
//边框的颜色
boeder-color: red;
//当鼠标移动到元素上时可以改变元素的css样式
p:hover{color:blue}

• 3.5样式重置

*{
    margin: 0;
    padding: 0;
}

B.没有掌握的

null