首页 > 代码库 > 前端逼死强迫症系列之css
前端逼死强迫症系列之css
一、编写css样式
1.ID选择器
由于ID唯一，所以也是写多遍。
<head> <style> #i1{ background-color: #2459a2; height: 48px; } #i2{ background-color: #2459a2; height: 48px; } </style> </head> <body> <div id="i1">ff</div> <div id="i2">ff</div> </body>
2.css选择器
class选择器是最常用的。
<head> <style> .c1{ background-color: #2459a2; height: 48px; } </style> </head> <body> <div class="c1">ff</div> <div class="c1">ff</div> </body>
3.标签选择器
不管那一层，只要是这个标签就应用这个样式。
<head> <style> div{ background-color: black; color: white; } </style> </head> <body> <div >ff</div> <span >f <div >fgf</div> </span> </body>
4.层级选择器
也叫关联选择器。如下：span里面的div才应用样式
<head> <style> span div{ background-color: black; color: white; } </style> </head> <body> <div >ff</div> <span >f <div >fgf</div> </span> </body>
层级也可以标签和类选择器做层级，比如
.c1 .c2 div a h1{
}
5.组合选择器
ID组合
<head> <style> #i1, #i2{ background-color: #2459a2; height: 48px; } </style> </head> <body> <div id="i1">ff</div> <div id="i2">ff</div> </body>
class 组合
<head> <style> .c1, .c2{ background-color: #2459a2; height: 48px; } </style> </head> <body> <div class="c1">ff</div> <div class="c2">ff</div> </body>
6.属性选择器
对选择到的标签再通过属性再进行一次筛选
<head> <style> .c1[type="text"]{ width:100px; height:200px; } input[name="fgf"]{width:40px; height:40px; } </style> </head> <body> <input class="c1" type="text" n="alex"> <input class="c1" name="fgf" type="password"> </body>
二、css的存在形式及优先级
如果对一个内容指定多个样式，样式没有重合，就都应用上了。
如果有重合，优先级，标签上style优先，编写顺序，就近原则,越往下越优先。
<head> <link rel="stylesheet" href="css/commons.css" /> <!--引入CSS文件--> .c1{ background-color: #2459a2; height: 10px; } <!--优先级：看是这里c1写在下面，还是c2在下面--> .c2{ } </head> <body> <div class="c1 c2" style="color: pink">asdf</div> </body>
css文件写法，直接写，不用再写<style>
.c1{ background-color: #2459a2; height: 10px; } <!--优先级：看是这里c1写在下面，还是c2在下面--> .c2{ }
三、css边框以及其他常用样式
<body> <div style="border: 1px solid red;"> <!--border：边框；solid：实体的--> asdfasdf </div> <div style="height: 48px; /*高度（像素）*/ width:80%; /*宽度（百分比）*/ border: 2px dotted red; /*dotted：虚线的 （border-left）*/ font-size: 16px; /*字体大小*/ text-align: center; /*水平居中*/ line-height: 48px; /*垂直居中根据标签高度*/ font-weight: bold; /*字体加粗*/ color: white; /*字体颜色*/ background-color: lawngreen; /*背景色*/ ">asdf</div> </body>
四、css之float样式
html标签中，div是块级标签，一个标签占一整行。显然好多网站都是分左右栏的，那怎么实现呢？
这里就需要用到float样式，让块级标签飘起来。自己有多少占多少。
<body> <div style="width: 20%;background-color: red;float: left">1</div> <div style="width: 50%;background-color: black;float: left">2</div> <div style="width: 20%;background-color: blue;float: right">2</div> </body>
float飘起来之后，撑不起父标签，需要加一句，如下。
<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="clear: both;"></div> <!--float有个坑：孩子飘起来了，父亲没飘起来，就撑不起来了，需要加上上面那一句。--> </div>
五、css之display样式
******
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
display: none; -- 让标签消失
display: inline; -- 让标签变成行内标签
display: block; -- 让标签变成块级标签
display: inline-block; -- 拥有两者的属性↓
具有inline,默认自己有多少占多少
具有block，可以设置无法设置高度，宽度，padding margin
六、css之内外边距
- margin：外边距（离上面的边距增加了，本身没有增加。）
- padding：内边距（上边边距增加了，自身内部增加边距。）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 38px; background-color: #dddddd; line-height: 38px; } </style> </head> <body style="margin: 0"> <div class="pg-header"> <div style="width: 980px;margin: 0 auto;"> <!--margin: 0 auto; 网页上边距为零，置顶；auto：当前宽度左右居中--> <div style="float: left;">收藏本站</div> <div style="float: right;"><a>登录</a></div> <div style="clear: both"></div> </div> </div> </body> </html>
七、css总结
CSS 在标签上设置style属性： background-color: #2459a2; height: 48px; ... 编写css样式： 1. 标签的style属性 2. 写在head里面 style标签中写样式 - id选择区 #i1{ background-color: #2459a2; height: 48px; } - class选择器 ****** .名称{ ... } <标签 class=‘名称‘> </标签> - 标签选择器 div{ ... } 所有div设置上此样式 - 层级选择器（空格） ****** .c1 .c2 div{ } - 组合选择器（逗号） ****** #c1,.c2,div{ } - 属性选择器 ****** 对选择到的标签再通过属性再进行一次筛选 .c1[n=‘alex‘]{ width:100px; height:200px; } PS: - 优先级，标签上style优先，编写顺序，就近原则 2.5 css样式也可以写在单独文件中 <link rel="stylesheet" href="http://www.mamicode.com/commons.css" /> 3、注释 /* */ 4、边框 - 宽度，样式，颜色 (border: 4px dotted red;) - border-left 5、 height， 高度 百分比 width， 宽度 像素，百分比 text-align:center, 水平方向居中 line-height，垂直方向根据标签高度 color、 字体颜色 font-size、 字体大小 font-weight 字体加粗 6、float 让标签飘起来，块级标签也可以堆叠 老子管不住： <div style="clear: both;"></div> 7、display display: none; -- 让标签消失 display: inline; -- 让标签变成行内标签 display: block; -- 让标签变成块级标签 display: inline-block; -- 拥有两者的属性↓ 具有inline,默认自己有多少占多少 具有block，可以设置无法设置高度，宽度，padding margin ****** 行内标签：无法设置高度，宽度，padding margin 块级标签：设置高度，宽度，padding margin 8、padding margin(0,auto)
前端逼死强迫症系列之css
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。