html css基础知识,css基础知识点整理

代码规范

放置规范

格式规范

代码规范

示例演示

大忽悠个人主页

span{

font-size: 120px;

color: orangered;

border: 5px solid royalblue;

}

大忽悠到此一游

基本选择器

元素选择器

示例演示：

大忽悠个人主页

span{

font-size: 120px;

color: orangered;

border: 5px solid royalblue;

}

大忽悠到此一游

卧槽，无情！！！

卧槽,残忍！！！

类选择器

示例演示:

大忽悠个人主页

.BLACK{

font-size: 50px;

color: black;

}

.RED{

font-size: 50px;

color: red;

}

span1:要求变成黑色

span2:要求变成红色

div1:要求变成黑色

div2:要求变成红色

ID选择器

示例演示:

大忽悠个人主页

#d1{

font-size: 50px;

color: red;

}

span1:要求变成黑色

span2:要求变成黑色

div1:要求变成黑色

div2:要求变成红色

基本选择器的组合方式

层级关系

示例演示:

大忽悠个人主页

div font{

font-size: 50px;

color: blue;

}

字体大小为50像素，字体演示为蓝色

不用管我

边框属性

所有html标签都有边框，默认边框都为不可见

border

width

用于设置标签的宽度

height

用于设置标签的高度

代码演示：

大忽悠个人主页

div{

border: 1px solid blue;

width: 300px;

height: 300px;

}

大忽悠门派-----大忽悠掌门人

backgroud-color

示例演示:

大忽悠个人主页

div{

border: 1px solid blue;

width: 300px;

height: 300px;

background-color: beige;

}

大忽悠门派-----大忽悠掌门人

使用颜色代码，可以进行微调操作

布局

float—浮动属性

代码演示:

大忽悠个人主页

#d1{

border: 1px solid blue;

width: 150px;

height: 150px;

background-color: beige;

float: right;

}

#d2{

border: 1px solid blue;

width: 150px;

height: 150px;

background-color: blue;

float: right;

}

#d3{

border: 1px solid blue;

width: 150px;

height: 150px;

background-color: red;

float: right;

}

转换

dispaly

未转换前:

转换后:

大忽悠个人主页

h1{

display: inline;

}

div{

display: inline;

}

span{

display: block;

}

a{

display: none;

}

标题h1--块级元素

默认占满一行---块级元素

行内元素

超链接----行内元素

字体

font-size 字体的大小

color 字体的颜色

代码演示:

大忽悠个人主页

div{

font-size: 100px;

color: green;

}

我想变大变Green

css中的盒子模型

什么是盒子模型

边框

代码演示:

大忽悠个人主页

div{

border-top: 1px solid blue;

border-bottom: 1px solid red;

}

a

{

border: 5px solid red;

}

我想

你想吗?

内边距 padding

代码演示:

大忽悠个人主页

div{

border-top: 1px solid blue;

border-bottom: 1px solid red;

padding-top:10px;

padding-bottom: 10px;

}

a

{

border: 5px solid red;

padding: 5px;

}

我想

你想吗?

外边距—margin

代码演示:

大忽悠个人主页

div{

border-top: 1px solid blue;

border-bottom: 1px solid red;

padding-top:10px;

padding-bottom: 10px;

margin-bottom: 20px;

}

a

{

border: 5px solid red;

padding: 5px;

margin: 20px;

}

我想

你想吗?

css和html的结合方式

行内样式

代码演示:

大忽悠个人主页

大忽悠

< style > < /style >标签样式

代码演示:

大忽悠个人主页

a{

font-size: 50px;

color: red;

}

>

大忽悠

大忽悠

大忽悠

大忽悠

外部样式

linke标签样式

代码演示:

大忽悠个人主页

大忽悠

大忽悠

大忽悠

大忽悠

a.css

a{

font-size: 100px;

color: blue;

}