前端技术——css+div
css 层叠样式表
div 是一个html标签,一个块级元素,单独占一行
https://github.com/StingLon/WEB-/blob/master/%E5%89%8D%E7%AB%AF-CSS
div+css 用来优化网页,布局页面
学习css即学习有哪些选择器,哪些属性以及可以使用什么样的值
一、基础
1.基本格式:
<style>
div{
}
</style>
<div>
xx
</div>
2.选择器:
(1)通配选择器 * 号表示所有的对象。凡是在html文件中的元素,都会被选中
<head>
<style>
*{
background-color:blueviolet ;/*h2,h3,a,body均被选中,背景色都改变了*/
}
</style>
</head>
(2)元素选择器 指以网页中已有的标签名作为名称的选择符
<head>
<style>
h2{
background-color:blueviolet ;
}
h3{
font-family: "微软雅黑";
}
</style>
</head>
<body>
<h2 >标题2</h2>
<h3 >
</body>
(3)类选择器 (有点号)
<style>
.div1{
background-color:blueviolet ;
font-family: "微软雅黑";
}
.div2{
background-color:blueviolet ;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<div calss="div1">xxx</div>
<div calss="div2">xxx</div>
</body>
(4)Id选择器 (有#号)
<style>
#div1{
background-color:blueviolet ;
font-family: "微软雅黑";
}
.div2{
background-color:blueviolet ;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<div id="div1">xxx</div>
<div calss="div2">xxx</div>
</body>
(5)层级选择器
<head>
<meta charset="UTF-8">
<style>
div p{ //
font-size: 40px;
color: green;
}
</style>
</head>
<body>
<div>
<p>
sdasdasdas
</p>
</div>
</body>
(6)属性选择器
<head>
<meta charset="UTF-8">
<title></title>
<style>
input[type='text']{
background-color: red;
}
</style>
</head>
<body>
用户名:<input type="text" name="username"/><br/>
</body>
3.尺寸:
width:50%;
height:50%;
4.内边距:元素与边框的距离
padding-left: 左内边距
padding-right: 右内边距
padding-top: 上内边距
padding-bottom: 下内边距
padding: 上 右 下 左
( padding-left: 50px;)
5.外边距
属性: margin-left
值:数字
指的是元素边框和元素边框之间的距离
margin-left: 左外边距
margin-right: 右外边距
margin-top: 上外边距
margin-bottom: 下外边距
6.
二、布局
.引入方式:
(1)内部引入
<style> xxx</style>
(2)行内引入
<div style="font-size: 20px; color: goldenrod;">
sdasdasdas
</div>
(3)外部引入
<link rel="stylesheet" href="3.css" type="text/css"/>
浮动: (https://www.cnblogs.com/zhaijunming5/p/7833071.html)
简而言之就是通过关键字float来调整div摆放的
float:right;
假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,
那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。
清除浮动可以理解为打破横向排列。
清除浮动的关键字是clear,只能影响使用清除的元素本身,不能影响其他元素
语法:
clear : none | left | right | both