head标签里面添加style标签，可以为标签添加样式
id选择器
类选择器
标签选择器
层级选择器
组合选择器
属性选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #i1{ background-color:#2459a2; height:48px; } .c1{ background-color:#2889a2; height:20px; } div{ background-color:black; color:white; } span div { background-color:red; color:black; } input[type=‘text‘]{width:100px;height:200px;} </style></head><body> <div id="i1">fffffff</div> <span class="c1">ddddddd <div>ututututu</div> </span> <div id="i1">ggggggg</div> <input type="text"> <input type="password"></body></html>
样式优先级问题
标签上的style优先，其他编写顺序，就近原则，后写的优先
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .c2{ font-size:28px; color:black; } .c1{ background-color:red; color:white; } </style></head><body> <div class="c2 c1" style="color:pink;">adafaf</div> <div class="c2 c1" style="color:pink;">adafaf</div> </body></html>
CSS文件用法
CSS文件
common.css
c2{ font-size:28px; color:black; }.c1{ background-color:red; color:white; }
然后在html文件里面引用css文件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/common.css" /></head><body> <div class="c2 c1" style="color:pink;">adafaf</div></body></html>
CSS边框
<div style="
height:48px; 高度
width:70%; 宽度 像素 百分比
border:1px solid red; 边框
font-size:16px; 字体大小
text-align:center; 水平方向居中
vertical-align:middle;
line-height:48px; 垂直方向根据标签高度居中
font-weight: bold; 字体加粗
">fdffdffd</div>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <div style="border:1px solid red;">adfdfdfdf</div> <div style="height:48px; width:70%; border:1px solid red; font-size:16px; text-align:center; vertical-align:middle; line-height:48px; font-weight: bold; ">fdffdffd</div></body></html>
CSS float样式
简单例子：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .pg-header{ height:38px; background-color:#dddddd; line-height:38px; } </style></head><body style="margin:0 auto;"> <div class="pg-header"> <div style="width:980px;margin:0 auto;"> <div style="float:left;">收藏本站</div> <div style="float:right;"> <a>登录</a> <a>注册</a> </div> <div style="clear:both"></div> </div> </div> <div style="width:300px;border:1px solid red;"> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="clear:both"></div> </div></body></html>
CSS display样式
可以将块级标签和行内标签转换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <div style="background-color:red;display:inline;">asdf</div> <span style="background-color:red;display:block;">asdf</span></body></html>
注意：
行内标签 无法设置宽度 高度 padding margin
块级标签 设置宽度 高度 padding margin
display样式还有一个inline-block属性
display:none让标签消失
内边距和外边距
padding margin(0.auto)
边距，
内边距 padding
外边距 margin
结束
