CSS 的引入方式:
内嵌式引入: 在标签内直接使用 style 属性, 每个样式使用分号隔开.
- <div style="color: red;font-size:25px ;
- font-family: 'Microsoft Yahei';line-height: 50px">
窗前明月光,<br />
疑是地上霜.<br />
举头望明月,<br />
低头思故乡.<br />
</div>
外联式引入: 使用 link 标签引入本地 CSS 样式文件.
1 <link rel="stylesheet" type="text/css" href="main.css">
CSS 选择器:
标签选择器: 当前 html 下的所有 div 样式都是被设置成这样.
div{ color: red; }
id 选择器: 只能选择一个标签的一个 id, 但权重要比类选择器大.
#div2{ color: green; } <div id="div2">遥看瀑布挂前川.</div>
类选择器: 可选择多个标签, 拓展性高.
.gold{ color: gold; } <div class="gold">飞流直下三千尺,</div>
层级选择器: 即在 class 类选择器下空格加个标签, 从而实现只修改某个类下的某个标签下的内容.
.list li{ height: 30px; } <div class="list">遥看瀑布挂前川.</div>
CSS 元素层级:
同层级哪个先写先显示哪个, 使用 z-index 打破层级限制, 数值越大, 越优先显示.
body .box2{ background-color: green; left: 50px; top: 50px; z-index: 2 }
CSS 元素特点:
行内元素的特点:
不支持宽高, margin 的上下, padding 的上下;
宽高由文字决定, 即使设置了宽度, 盒子也会占据一整行;
代码换行, 盒子间会产生间距.
解决间距: 将父级元素设置为 font-size:0 行内元素自身再设置相应的 font-size;
.con1,.con2{ width: 500px; height: 80px; border: 1px solid #333; margin: 50px auto 0; font-size: 0;// 关键在这行 } .con1 a{ background: gold; text-decoration: none; width: 20px; height: 40px; padding:0px 20px; font-size: 20px; } <body> <div class="con2"> <a href="#">锄禾日当午,</a> <a href="#">汗滴禾下土.</a> </div> </body>
显然行内元素没有按照高 40px, 宽 20px 进行渲染.
块元素, 行内元素, 行内块元素的关系:
块元素宽, 高均能设置,
行内元素无法设置其宽和高, 宽高随标签里的内容变化,
行内块元素实际就是把块元素以行的形式展现出来, 保留了块元素可以设置的对应的属性.
CSS 定位:
使用 position 属性进行定位.
.box{ width: 450px; height: 300px; border: 1px solid #000; margin: 100 auto 0; position: relative;/* 相对于 body 绝对定位 */ } .box div{/* 相对于 box 相对定位 */ width: 200px; height: 100px; margin: 20px; background: blue; line-height: 100px;/* 文字操作 */ text-align: center;/* 文字操作 */ font-size: 40;/* 文字操作 */ } body .box1{ position: absolute; /* 相对定位 relative 其他东西不变, 盒子相对自身位置发生偏移 */ /* 绝对定位 absolute 根根据父级位置定位来定位, 父级一般设置为相对定位, 若父级及祖父级.. 无定位, 则根据 body 定位 */ /* 定位后转换成行内块元素, 靠内容撑开宽度 */ left: 50px; top: 50px; background-color: gold; } body .guding{ position:fixed; left: 0; top:0; background: pink; } .box2{ background-color: pink; position: absolute;/* 定位后转换成行内块元素, 靠内容撑开宽度 */ left: 100px; top: 100px; } <div class="box"> <div class="box1">111</div> <div>222</div> <div>333</div> <div class="guding">444</div> </div>
CSS 文本常用样式:
font 同时设置文字的几个属性, 写的顺序有兼容性问题, 建议按照如下顺序写: font: 是否加粗 字号 / 行高 字体 如: font:normal 12px/36px '微软雅黑';
a 标签设置的网页链接, 如果是网络网页连接, 必须加 http://
text-decoration 去 a 标签的下划线
p 标签加 hover, 鼠标移至目标内容, 目标变色. p:hover{ }
除了字体的设置和文本的倾斜设置, 其他属性值都不加引号.
针对中文版式, text-indent 设置文字首行缩进
text-align 不能给 em 标签对齐, 可以给 h 标签对齐. 因为他们的宽度不同(详细看块元素和内联元素及内联块元素的区别).
新闻列表案例:
.new_list_con{ width: 600px; height: 290px; border: 1px solid #ddd; margin: 50px auto 0; overflow: hidden;/* 消除溢出的 li 面积 */ } .new_list_con h3{ width: 560px; height: 50px; border-bottom: 1px solid #ddd; margin: 0px auto; } .new_list_con h3 span{/* 注意是 H3 下的 span,s 设置那条下划线. 将其行内元素转化为行内块元素 */ display: inline-block;/* 转为行内块元素 */ height: 50px; /* 高与 h3 等高 */ border-bottom: 2px solid red;
font: 18px/50px 'Microsoft Yahei';/* 行高 50 居中, 18 宽度, 雅黑字体 */
color:#000; padding: 0 15px;/* 上下不设, 左右设置 15px*/ position: relative;/* 保持原来的位置但它是跳出来的 */ } .new_list_con ul{ list-style: none;/* 去点 */ padding: 0;/* 紧凑一点 */ width: 560px; height: 238px; margin: 6px auto 0;/*ul 块元素相对父级设置剧中 */ } .new_list_con ul li{ height: 38px; border-bottom:1px solid #ddd; } .new_list_con ul a{ float: left;/* 浮动后就变成行内块元素了 */ height: 38px; /*line-height: 38px ul 38 行高 38, 文字就上下居中了 */
font:14px/38px 'Microsoft Yahei';/* 先宽后高再字体 */
text-decoration: none;/* 取消下划线 */ color: #000; } .new_list_con ul a:before{ content: ".";/* 给每个列表前加个点点 */ } .new_list_con ul a:hover{/* 鼠标移至变色 */ color:red; } .new_list_con ul span{ float: right;/* 浮动后就变成行内块元素了 */ height: 38px; /*line-height: 38px ul 38 行高 38, 文字就上下居中了 */
font:14px/38px 'Microsoft Yahei';/* 先宽后高再字体 */
color: #000; } <div class="new_list_con"> <h3><span > 新闻列表</span></h3> <ul> <li><a href="">劲爆消息: 宁理小红花一箭夺魁!</a><span>9012-10-1</span></li> <li><a href="">劲爆消息: 宁理小红花一箭夺魁!</a><span>9012-10-2</span></li> <li><a href="">劲爆消息: 宁理小红花一箭夺魁!</a><span>9012-10-3</span></li> <li><a href="">劲爆消息: 宁理小红花一箭夺魁!</a><span>9012-10-4</span></li> <li><a href="">劲爆消息: 宁理小红花一箭夺魁!</a><span>9012-10-5</span></li> <li><a href="">劲爆消息: 宁理小红花一箭夺魁!</a><span>9012-10-6</span></li> </ul> </div>
CSS 浮动特点:
.box1,.box2,.box3{ width: 200px; height: 200px; font:30px/200px 'Microsoft Yahei'; background: green; margin: 20px; } .box1{ float: left; } .box2{ float: right; } .box3{ float: left; } <div class="box1">1</div> <div class="box1">1</div> <div class="box1">1</div> <div class="box1">1</div> <div class="box1">1</div> <a href="#" class="box1">这是一个 a 元素</a> <div class="box2">2</div> <div class="box3">3</div>
文档流盒布局: 指盒子按照 HTML 标签编写的顺序依次从上到下, 从左到右排列,
块元素占一行, 行内元素在一行之内从左到右排列, 先写的先排列, 后写的排在后面, 每个盒子占据自己的位置.
浮动特性: 向左或向右, 没有居中浮动那么傻逼的想法哦.
1, 浮动元素有左浮动 (float:left) 和右浮动 (float:right) 两种.
2, 浮动的元素会向左或向右浮动, 碰到父元素边界, 浮动元素, 未浮动的元素才停下来(浮动的顺序看代码的执行顺序).
3, 相邻浮动的块元素可以并在一行, 超出父级宽度就换行.
4, 浮动让行内元素或块元素自动转化为行内块元素(划重点).
5, 浮动元素后面没有浮动的元素会占据浮动元素的位置, 没有浮动的元素内的文字会避开浮动的元素, 形成文字饶图的效果.
6, 父元素内整体浮动的元素无法撑开父元素, 需要清除浮动.
7, 浮动元素之间没有垂直 margin 的合并.
清除浮动:
.box2 a{ width: 50px; height: 50px; background-color: green; border: 1px solid #000; font-size: 16px; margin:20px; text-align: center; line-height: 50px; text-decoration: none; float: left;/* 这个浮动的子元素无法撑开父级的特性, 需要清除浮动.*/ } .clearfix:after{/* 常用这种 */ content: ""; display: table; clear: both; } .clearfix:before,.clearfix:after{/* 合并 margin-top 的塌陷和清除浮动的共同操作 */ content: ""; display: table; } <div class="box2 clearfix"> <a href="">1</a> <a href="">2</a> <a href="">3</a> <a href="">4</a> <a href="">5</a> <a href="">6</a> <a href="">7</a> <a href="">8</a> <a href="">9</a> </div>
来源: http://www.bubuko.com/infodetail-3320069.html