标题表单的创建
< form method=" " action=" ">
<--
get : 向何处发送表单数据(从服务器获取数据)
post: 向何处发送表单数据(向服务器传送数据)
-->
文本框 <input type="text" placeholder="" name="" value="">
密码框 <input type="password" placeholder="" name="" value="">
提交框 <input type=" submit"> 或 <button>提交按钮</button>
按钮框 <input type="button"> 单纯的按钮
重置框 <input type="reset"> 清空的效果
placeholder: 描述输入字段预期值的简短的提示信息.兼容IE8以上
name: 设置框的名字(name必须设置,否则在提交表单时,用户在其中输入的数据不会发送给服务器)
value: 需要输入的内容
样式的创建
- 行内样式:
在里面的标签创建样式, 如:
<div style="color: blueviolet;">我是div</div>
缺点: 结构样式没有分离,不利于后期维护.样式不能重复使用(推荐不使用)
- 内部样式:
在里面创建样式, 和需要样式的标签必须在同一个页面中.
如:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{
color: red;
width: 100px;
}
</style>
<title>Document</title>
</head>
优点: 结构样式分离,好维护,样式重用,适合小案例
缺点: 只能在一个页面使用css样式.
- 外部样式:
新建一个css文件, 将css文件连接到html文件中.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./02.css">
</head>
选择器
标签(元素)选择器：
p{} div{} h1{} 等.
class选择器 ：
.box{ } < div class=”box”> box这个名字可以重复使用
id选择器 :
#box{ } < div id=”box”> box这个名字是唯一的,不能重
通配符 :
*{ } 对所有标签设置样式
群组选择器 :
p,div{ } 将选中的标签一块设置样式
后代选择器 :
父元素 子元素{ } 想要改变父元素下所有的后代
子选择器 :
父元素>子元素{ } 想要某个父元素下所有的儿子
兄弟通用选择器:
元素~元素兄弟{ }
相邻选择器:
标签+它后面紧挨着的标签{ 同一级标签}
如:
<style>
.box li{
background-color: yellow;
width: 200px;
height: 200px;
}
.box> li{
background-color: red;
width: 100px;
height: 100px;
}
</style>
...
<ul class="box">
<li>儿子li</li>
<li>儿子li</li>
<li>儿子li
<ul class="box1">
<li>儿子的儿子li</li>
<li>儿子的儿子li</li>
</ul>
</li>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 p{
font-size: 80px;
color: red;
}
.box1 li{
font-size: 30px;
color: orange;
}
.box2>p{
font-size: 40px;
color: blue;
}
.box2>div>p{
font-size: 50px;
color:green;
}
.box1>.li3{
font-size: 20px;
color:purple;
}
.box2>div>.p2{
font-size: 35px;
color:skyblue;
}
.li2+li{
color: yellowgreen;
}
/* .li2+li是指.li2所对应的li 后面的li */
.box2 div~li+p{
color: maroon;
}
</style>
</head>
<body>
<ul class="box1">
<p>00000</p>
<li>无序列表1</li>
<div>
<p>11111</p>
<p>22222</p>
</div>
<li>无序列表2</li>
<li class="li3">无序列表3</li>
<p>3333</p>
</ul>
<ul class="box2">
<p>00000</p>
<li>无序列表1</li>
<div>
<p class="p1">11111</p>
<p class="p2">22222</p>
<p>33333</p>
</div>
<li class="li2">无序列表2</li>
<li>无序列表3</li>
<p>3333</p>
</ul>
</body>
</html>
(所有的后代,子,相邻,通用选择器权重都是算和的)
选择器权重:
通配符 0
标签选择器: 0001
class选择器: 0010
id选择器: 0100
内联样式: 1000
当给同一个盒子,使用不同的方式设置样式的时候,如果发生冲突,解析的时候会发生覆盖,这个覆盖的过程就是层叠
层叠性:
权重相同:
就近原则:谁书写的css代码距离标签近就解析谁
后来者居上:谁后面书写的css就解析谁的
层叠的体现在2个方面:
权重不同:高权重的覆盖低权重
权重相同:后来者居上
浮动
- 浮动:
定义网页中的其他文本如何环绕该元素显示元素(文字环绕模式)
让竖着的排列的横着来排列,当浮动后脱离文档流
向左浮动的盒子,浮动会脱离网页,没有浮动的盒子的文字会环绕浮动的盒子走, 向右浮动的盒子,文字不会环绕浮动盒子走. 多个盒子同时浮动,会横着排列.
float的值
float: left;(左浮动)
float: right;(右浮动)
float: none; (不浮动)
如果box1没有给固定高度,而里面的2个子元素都浮动了,此时2个子元素是飘着的不占位置,那么box1里面就空了,此时box1的高度是0,这个就是浮动引起的高度塌陷的问题.
解决方法:
给浮动元素的父元素添加固定高度
给浮动元素的父元素添加 overflow:hidden
- 清除浮动
清除浮动只改变浮动之后的排版效果,即改变排列方式, 还是脱离文本流, 不占据文档位置.
清除浮动可以是清除浮动的,也可以清除不浮动的,
浮动的清除后依旧是飘着的,不浮动的清除依旧是不飘着的.
清除浮动只能影响自己下来,同时也会带着后面浮动的盒子一起下来
clear: none; (允许有浮动对象)
clear: right; (不允许右边有浮动对象)
clear: left; (不允许左边有浮动对象)
clear:both; (不允许有浮动对象)
边框
-
外边框 (元素外边的空白区域)
margin属性
有四个属性值:
margin-left 左
margin-right 右
margin-top 上
margin-bottom下
(margin可以写负数)margin简写:
margin:上 右 下 左;(四个值)
margin:上 左右 下;(三个值)
margin:上下 左右;(两个值)
margin:上下左右;(一个值)
(属性值可以是数字+单位(20px) 可以是单词auto 如果左间距和右间距给auto,可以实现水平居中)
margin: 0 auto;(一个有宽度的元素在浏览器中横向居中)
注意:
margin-top的解析
现象:默认情况下给子元素添加了margin-top之后，父元素会跟着一起下来。
解决方法:
A、 给最近的父元素添加border-top:1px solid transparent;透明上边框
B、给父元素添加oxerflow:hidden;(溢出隐藏)
C、给父元素或者子元素添加浮动
- 内边框 (指一个元素内容到元素边缘之间的距离)
padding属性:
padding-left 左
padding-right 右
padding-top 上
padding-bottom 下
padding是额外加到元素原有大小之上的,
如果想要用padding设置间距,但是又不想盒子宽度改变,则
A、在设置的宽度或者高度上减去padding值.
B、或者给当前盒子添加属性 css3新属性
box-sizing:border-box;
添加这个之后盒子成为怪异盒子,宽度高度不会改变.
可单独写:
padding-left:40px;
也可简写, 简写方式与margin表示方式一致:
padding:上 右 下 左;(四个值)
padding:上 左右 下;(三个值)
padding:上下 左右;(两个值)
padding:上下左右;(一个值)
比较：
margin和padding的相同和不同:
margin设置的是外间距,padding设置的是内间距
margin不会把盒子自己撑大,padding会把自己变大
margin支持负数和单词auto padding是不支持的
margin有margin-top传递问题,padding没有
- 边框 (border属性)
边框宽度: border-width
边框颜色: border-color
边框样式: border-style : solid(实线) / dashed(虚线) /dotted(点划线) double(双线)
简写:border:30px solid blue;(参数的顺序可以随意调换)
单边框设置:上边框 border-top border-bottom border-left border-right
附加:
清除标签自带的间距:
*{
margin:0;
padding:0;
}
统配符清除简单,但是对本身不需要清除的也要加载,不利于页面加载,多余消耗
body,p,ul,ol,h1,h6,input,dl,dt{
margin:0;
padding:0;
}
群组看似麻烦,但是它利用项目建设,减少消耗,因此从性能看,群组合适.
扫一扫
11万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
