八.CSS基础

最新推荐文章于 2024-06-07 14:13:17 发布

qq_44679755

最新推荐文章于 2024-06-07 14:13:17 发布

阅读量180

点赞数

本文链接：https://blog.csdn.net/qq_44679755/article/details/89348650

版权

一．在网页中引用CSS
1.style属性HTML标记中使用style属性

购物商城欢迎你

2.style元素文档中定义style节点
<!doctype html>

css测试1

#main {
height: 450px;
margin-top: 10px;
}

/*
浮动
*/
#main div {
float: left;
}

.ft {
margin-top: 0px;
width: 100px;
height: 100px;
float: left;
background-color: rgb(16, 70, 117);
border-radius: 50px;
margin-left: 50px;
}

/*
clear: left;清除浮动
margin: auto;div的位置
*/
#last {
width: 500px;
height: 100px;
background-color: rgb(243, 237, 237);
margin: auto;
clear: both;
}

sasda

3.link元素引用外部封装好的css文件 css测试3 链接1 链接2 链接3 链接4

二．选择器分类
1.HTML选择器
div ; p ; span 等html标记名
2.类选择器
类选择器（.类名）
3.ID选择器
id选择器（#id名）(给单元素定制) ，一个标签只有一个id
4.伪类选择器
a:link //未访问时
a:hover //鼠标经过
a:visited //访问之后
a:active //正在点击

常用样式
布局定位居中，居左，居右相对布局与绝对布局广告栏之绝对布局 position:fixed
通用属性颜色宽与高背景图片字体边框
<!doctype html>

css测试1

#main {
height: 450px;
margin-top: 10px;
}

/*
浮动
*/
#main div {
float: left;
}

.ft {
margin-top: 0px;
width: 100px;
height: 100px;
float: left;
background-color: rgb(16, 70, 117);
border-radius: 50px;
margin-left: 50px;
}

/*
clear: left;清除浮动
margin: auto;div的位置
*/
#last {
width: 500px;
height: 100px;
background-color: rgb(243, 237, 237);
margin: auto;
clear: both;
}