前端--css基础
1.css引用
三种方法
1）<p style="..."> Jason </p> #body标签内直接使用
2） <head><style> ..... </style></head> #head头添加 style 标签
3）<link rel="stylesheet" href="....css" /> #外部调用css文件
2.字体 字体颜色 背景颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--<link rel="stylesheet" href="common.css" />--> <style> /*标签选择器，找到所有的标签应用以下样式*/ div{ color: green; } /*id选择器，找到标签id等于i1的标签，应用以下样式*/ #i1{ font-size: 56px; /* color: green; */ } /*class选择器，找到class=c1的所有标签，应用一下样式*/ .c1{ background-color: red; } /*层级选择器，找到 class=c2 下的div下的p下的class=c3标签，应用以下样式*/ /*.c2 div p a{*/ /**/ /*}*/ .c2 div p .c3{ background-color: red; } /*组合选择器，找到class=c4,class=c5,class=c6,的标签，应用以下样式*/ .c4,.c5,.c6{ background-color: aqua; } </style> </head> <body> <div class="c4">1</div> <div class="c5">1</div> <div class="c6">1</div> <div class="c2"> <div></div> <div> <p> <span>oo</span> <a class="c3">uu</a> </p> </div> </div> <div class="c3">sdfsdf</div> <span class="c1">1</span> <div class="c1">2</div> <a class="c1">3</a> <a id="i1">baidu</a> <div>99</div> <div>99</div> <div>99</div> <div> <div>asdf</div> </div> </body> </html>
显示效果
3.float
CSS中浮动属性的定义是通过float来声明的，它规定了元素是向左靠还是向右靠，有三个值：
left：居左；
right：居右；
none：默认属性，不浮动。
下面举个例子：
<div style="floa
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .c1{ color: red; /*background-color: #FF69B4;*/ /*background-color: rgb(25,180,10);*/ /*background-color: red;*/ font-size: 32px; height: 150px; width: 500px; /* 按照父亲相对占比*/ } </style> </head> <body> <div class="c1">sdfdf</div> <div style="width: 500px;"> <div style="width: 20%;background-color: antiquewhite;float: left">asdf</div> <div style="width: 80%;background-color: palegoldenrod;float: left">asdf</div> </div> </body> </html>
显示效果
清除属性通过clear来声明，它同样有四个值：
clear:left;清除左侧。
clear:right;清除右侧。
clear:both;清除两侧。
clear:none;不清除。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="width: 500px;border: 1px solid red;"> <div style="width: 20%;background-color: aqua;float: left">f</div> <div style="width: 30%;background-color: beige;float: right">a</div> <div style="width: 30%;background-color: beige;float: right">a</div> <div style="clear: both;"></div> </div> </body> </html>
显示效果
4. background-image
background-repeat: no-repeat; #不填满
background-position: 84px -58px; 移动图片开始位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .img{ background-image: url("4.gif"); height: 150px; width: 400px; background-repeat: no-repeat; } .img2{ background-image: url("2.jpg"); height: 50px; width: 50px; background-position: 84px -58px; } </style> </head> <body> <div class="img"></div> <div class="img2"></div> </body> </html>
显示效果
5.边框
<!--border:有3个参数：线的粗细、线的样式（实线、点、虚线等）、线的颜色--> <!--第一种：线的粗细为1像素，实线、红色--> <div style="border:1px solid red;height:10px" ></div> <!--第二种：线的粗细为1像素，点、蓝色--> <div style="border:1px dotted blue;height:10px" ></div> <!--第三种：线的粗细为1像素、虚线、紫色--> <div style="border:1px dashed purple;height:10px" ></div>
6.Display
代码如下：
display:none 此元素不会被显示
display:block 此元素将显示为块级元素，此元素前后会带有换行符。
display:inline-block 行内块元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <span style="background-color: red;height: 50px;width: 200px;">asdfasdf</span> <span style="display: inline-block;height: 50px; background-color: red;">asdsfsdf</span> </body> </html>
显示效果
7.margin padding
顺序上右下左
margin:2px 4px 3px 4px; #外边距
padding: 0 0 0 0 #内边距
8.position
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="height: 500px;width: 400px;border: 1px solid red;position: relative"> <div style="height: 200px;background-color: red;"> <div style="position: absolute;bottom: 0;right: 0;">111</div> </div> </div> </body> </html>
显示效果
9.img 图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img src="2.jpg" style="height: 500px;width: 200px;"> </body> </html>
显示效果
