HTML和CSS
把网页比作一个房子,网页就是由一个个HTML标签组成,CSS样式负责修饰HTML标签。
HTML标签特点:语义化
<p></p>//段落
<body>//开始标签
</body>//结束标签
h1~h6//标题1到标题6
div//分隔
ul//不排序列表
li//列表项目
dl//定义列表
dt//定义术语
dd//定义描述
a//锚
br//换行
font//字体
img//图像
input//用于搜集用户信息
button//按钮

图中的<div class="container">定义了div的类为container容器,在CSS修饰中可使用.container{}来改变div其中的样式
shift+alt+f:格式化代码
常用的CSS样式
CSS语法
<style>
*{margin:0px;padding:0px}//写网页的第一步重置边界和填充
</style>

CSS常用选择器
<p class=”one” id=”two”>hello world</p>
p{}元素选择器
p.one{}class选择器
.+className{}
特点1,可以给多个标签相同的class名
2,可以给一个标签多个class名

margin-right:auto;margin-left:auto;//元素居中仅仅对块元素有效
常用的css样式
color:设置文字的颜色
width:设置一个元素的宽度
height:设置一个元素的高度
background-color:设置背景颜色
background-image:设置一个元素的背景图片
line-height:设置文字的行高
text-align:设置文字对其的方式
border-width:边框的宽度
border-style:边框的样式
boeder-color:边框的颜色
p:hover{color:blue}当鼠标移动到元素上时可以改变元素的css样式
cursor: pointer;可以使鼠标经过时变成手指
网友评论