CSS
css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。
存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。
语法:style = ‘key1:value1;key2:value2;‘
- 在标签中使用 style=‘xx:xxx;‘
- 在页面中嵌入 < style type="text/css"> </style > 块
- 引入外部css文件
css写在head里面,style标签中写样式
ID用 #号来表示,class 可以用 .表示
在css里面注释用/* xxxxxxxxxxxxxxxxx */ 表示
标签选择器
div{ }
<div > </div>
class选择器
.bd{ ?}
<div class=‘bd‘> </div>
id选择器
#idselect{ ?}
<div id=‘idselect‘ > </div>
关联选择器 (可以层级选择)
#idselect p{ ?}
<div id=‘idselect‘ > <p> </p> </div>
组合选择器
input,div,p{ ?} #每个都可以应用
属性选择器
input[type=‘text‘]{ width:100px; height:200px; }
<input type="text" name="user"/>
class 优先级或者重叠
.c1{ ???????????background-color:red; ???????????height:60px; ???????} ???????.c2{ ???????????font-size:50px; ???????}一个div里可以有两个class样式 ?,两个不一样的时候会一起选用,如果有重叠的话会先用style ??class ?和div中的<div class="c1 c2">这里测试</div>
引入 css文件 可以适用于其它网页的属性
<link rel="stylesheet" href="xxx.css"/>
常用 css属性
font-size:50px;border: 3px dotted red; 宽度为3px ?虚线 红色border: 3px solid red; ?实线height 48px; ?高度width ?80%; 宽度 ?可以用像素,也可以用百分比text-align ceter ?水平居中line-height ?上下居中font-weight 400 ?字体加粗
float用法,display用法
<div style="width:90px; height:30px; border: 1px solid red;float: left;"> 这里测试</div><div style="clear: both;"></div>将float清除<div style="display: block">测试</div> ?将div变成块级标签<div style="display: inline">测试</div> ?将div变成内联标签(行内标签),默认自己有多少占多少<div style="display: inline-block">测试</div> 两个属性都有<div style="display: none">测试</div> 让标签消失行内标签,无法设置高度宽度,块级标签能设置
边距属性
padding: 20px; 内边距margin: 30px; 外边距margin: 0 auto; 可以将网页边上空余的去掉 ,auto 自动
CSS学习
原文地址:http://www.cnblogs.com/Mjonj/p/7554711.html