在标签上设置style属性 ??????background-color:red; ???height: 48px; ??????...1 编写css样式
1.1 标签的style属性
<head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ???<div style="background-color:red;height: 48px;">dd</div> ???<div></div> ???<div></div></body>1.2 写在head里面,style标签
1.2.1 id选择器
? #id{属性:值}
<head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????#i1{ ???????????background-color:red; ???????????height: 48px; ??????????} ???????#i2{ ???????????background-color:red; ???????????height: 48px; ??????????} ???</style></head><body> ???<div id="i1">dd</div> ???<span>ff</span> ???<div id="i2">ww</div> ???<div>ff</div></body>1.2.2 class选择器
? .class{属性:值}
<head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.c1{ ???????????background-color:blue; ???????????height: 48px; ????????} ???</style></head><body> ???<div>dd</div> ???<span class="c1">ff</span> ???<div>ww</div> ???<div class="c1">ff</div></body>1.2.3 标签选择器
<head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????div{ ???????????background-color:blue; ???????????height: 48px; ????????} ???</style></head><body> ???<div>dd</div> ???<span>ff</span> ???<div>ww</div> ???<span>ff</span></body>1.2.4 关联选择器(层级选择器)
? .c1 .c2 div{属性:值}
连接方式:空格
<head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.c1 div{ ???????????background-color:blue; ???????????height: 48px; ????????} ???</style></head><body> ???<div>dd</div> ???<span class="c1"> ???????<div>111</div> ???</span> ???<div>ww</div> ???<span>ff</span></body>1.2.5 组合选择器
? #i1,#i2 {属性:值}
连接方式:逗号
<head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????#i1,.c1,#i2{ ???????????background-color:red; ???????????height: 48px; ??????????} ???</style></head><body> ???<div id="i1">dd</div> ???<span class="c1">ff</span> ???<div id="i2">ww</div> ???<div>ff</div></body>1.2.6 属性选择器
对选择到的标签再通过属性进行一次筛选
<head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????input[n="alex"]{width:100px;height:200px} ???????input[type="password"]{width:100px;height:100px} ???</style></head><body> ???<input type="text" n="alex"> ???<input type="password"></body>1.2.7 优先级
标签上的style优先,其它按照编写顺序,就近原则
1.3 写在css文件里
1.3.1 引入
<link rel="stylesheet" href="style.css"/>1.4 注释
/* ......... */
1.5 边框
border: 1px solid red边框1像素宽,实体,红色border-left
1.6 height, width, line-height, color, font-size, font-weight, text-align,
width可以使用百分比,像素...若height的父元素height像素固定,也可使用百分比.text-align:center 水平方向居中line-height垂直方向根据标签高度. 等于标签高度,则显示居中font-weight 字体加粗font-size 字体大小color 字体颜色1.7 float
让标签飘起来,块级标签也可以堆叠
<body> ???<div style="width: 20%;background-color: red;float: left;">dsasdas</div> ???<div style="width: 80%;background-color: black;float: left;">dsasdas</div></body>老子管不住的时候,加
<body> ???<div style="width: 300px;border: 1px solid red"> ???????<div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div> ???????<div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div> ???????<div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div> ???????<div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div> ???????<div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div> ???????<div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div> ???????<div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div> ???????<div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div> ???????<div style="clear: both;"></div> ???</div></body>1.8 display
块级标签转为行内标签
<body> ???<div style="background-color: red;display: inline">asdf</div> ???<span style="background-color: red;"">asdf</span></body>行内标签转换为 块级标签
<body> ???<div style="background-color: red;">asdf</div> ???<span style="background-color: red;display: block">asdf</span></body>行内标签: 无法设置高度/宽度/margin/padding
块级标签: 设置高度/宽度/margin/padding
display:inline-block; ???具有inline,默认自己有多少占多少 ???具有block,可以设置高度/宽度/margin/paddingdisplay:none让标签消失1.9 padding margin(0,auto)
margin:外边距
margin:0 auto;0 ??距离上下的间距是0auto 当前div居中padding:内边距
css基础
原文地址：https://www.cnblogs.com/chenych/p/8847570.html