web前端-css
https://www.cnblogs.com/qianguyihao/p/7297736.html
1.css层叠样式表 三种引用方式
行内样式
内接样式
外接样式
<link rel="stylesheet" href=""> <style type="text/css"> #h1{ color: bisque; } </style> </head> <body> <!--行内样式 : 块居中 块中文字居中--> <h1 style="background-color: chocolate;width: 500px;margin: 0 auto;">hello</h1> <h1 style="background-color: chocolate;width: 500px;text-align: center">hello</h1> <!--内接样式需要选择器: 并且需要将style标签写到head标签中--> <h1 id="h1">hello</h1> <!--外接样式: 需要link标签,link标签中使用文件或地址--> </body> </html>
2.选择器
基本选择器
标签选择器:选中所有标签不好用
id选择器:唯一选择
类选择器:自定义类赋予类
<style> /*标签选择器,作用所有标签不好用*/ h1{ color: chocolate; } /*id选择器*/ #h1{ color: cornflowerblue; } /*类选择器 */ .test{ color: aqua; } </style> </head> <body> <h1>q1</h1> <h1 id="h1">q2</h1> <h1 class="test">q3</h1> </body> </html>
3.高级选择器
后代选择器: .test1 .test2 .a1{}
子代选择器: .test1 > .test2{}
组合选择器: 所有的h1标签和a标签 h1,a{}
交集选择器
4.css的权重
行内1000 > id选择器100 > 类选择器10 > 标签选择器1 #可以根据权重积累 ,判断出标签应该的样式,继承的权重为0
5.css的height-wight
c1盒子是子盒子 height: 50%继承父盒子的一半大小 ，同理width也是
div盒子的默认宽度与父盒子一直 ,高度为0 ,但是可以通过内容填充
<style> .d1{ background-color: antiquewhite; height: 50px; width: 600px; } .c1{ height: 50%; width: 50%; } </style> </head> <body> <div class="d1"> <!-- span内容撑起了盒子--> <div class="c1"></div> <span>Text</span> </div>
6.css修饰字体 文本
文本
居中: text-align文字水平居中, line-height=盒子高度 那么文字垂直居中
修饰text-decoration: underline下划线 ,overline上划线 ,line-through删除线
字体
字体font-family: 指定各种字体
样式font-style: noraml正常 ,italic斜体 ,oblique倾斜字体
粗细font-wight: noraml正常 ,bold粗体 ,light细体
大小font-size: larger大 small小
<style> div{ font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace; } .t1{ font-style: italic; font-weight: bold; } .t2{ font-size: xx-large; } .t3{ text-decoration: line-through; /*text-align文字水平居中*/ text-align: center; /*line-height=盒子高度 那么文字垂直居中*/ line-height: 280px; width: 280px; height: 280px; background-color: antiquewhite; } </style> </head> <body> <div class="t1"> hello my homie </div> <div class="t2"> yes my homie </div> <div class="t3"> help gogogo
7.标签类型转换
html中的行内标签 ,块标签特征明显 ,在css中可以通过display将标签类型进行转换
display:none (隐藏) ,block(转换为块级标签) ,inline(转换为行内标签) ,inline-block(转换为行内块)
<style> #sp1{ display: block; } #sp2{ display: none; } </style> </head> <body> <div class="t1"> <a href="">点击一下</a> <a href="">点击100下</a> <span id="sp1">行内span1</span> <span id="sp2">行内span2</span> </div> <div style="width: 100px;height: 100px;background-color: blueviolet;display: inline-block"></div> <div style="width: 100px;height: 100px;background-color: darkorange;display: inline-block"></div> <div></div> </body>
8.盒子的margin ,padding ,border
盒模型的大小是由内容撑起来的 ,padding可以改变盒子与内容的距离 ,margin可以改变盒子与盒子之间的距离因为盒子和盒子是紧贴的 ,border就是盒子边框
padding 20px #四个方向内填充20px内容挤了一点
margin 20px #四个方向外边距生成20px和其他盒子保持具体
border 2px soild bule #四个方向的边框2px ,蓝色
三种都可以设置方向 bottom top right left
<style> .d1{ padding: 20px; margin: 30px; /*border: 2px solid blue;*/ border-bottom: 3px solid sandybrown; border-left: 3px solid blueviolet; } </style> </head> <body> <div class="d1" style="width: 100px;height: 100px;background-color: antiquewhite;display: inline-block">ok</div> <div style="width: 100px;height: 100px;background-color: darkorange;display: inline-block"></div>
三角型
<style> .d1{ /*border: 2px solid blue;*/ border-top: 30px solid sandybrown; border-left: 30px solid white; border-right: 30px solid white; } </style> </head> <body> <div class="d1" style="background-color: white;width: 0"></div> </body>
9.css浮动
浮动可以使盒模型并排显示 ,要浮动一起浮动, 有浮动清除浮动
现象: 1.紧贴父盒子 2.脱离标准流在页面不占位置 3.标准盒子压住浮动盒子 4.浏览器变化div盒子会有贴靠效果 5.可以使用清除浮动来隔离
clear: both清除浮动影响自己
10.css的伪类选择器
#直接作用于标签a
a:hover{ #鼠标悬浮效果
color: chartreuse;
}
a:active{ #鼠标点击效果
color: blue;
}
#直接作用于类选择器上
.ko1:hover{
color: chartreuse;
}
11.css的文字图标
1.@font-face连接生成代码
2.设置字体font-family
3.引用value=""
<style> /*连接生成的代码*/ @font-face { font-family: 'iconfont'; /* project id 1109953 */ src: url('//at.alicdn.com/t/font_1109953_hteo4kkmpxf.eot'); src: url('//at.alicdn.com/t/font_1109953_hteo4kkmpxf.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1109953_hteo4kkmpxf.woff2') format('woff2'), url('//at.alicdn.com/t/font_1109953_hteo4kkmpxf.woff') format('woff'), url('//at.alicdn.com/t/font_1109953_hteo4kkmpxf.ttf') format('truetype'), url('//at.alicdn.com/t/font_1109953_hteo4kkmpxf.svg#iconfont') format('svg'); } .iconfont{ font-family:"iconfont";} </style> </head> <body> <div> <input type="submit" class="iconfont" value=""> </div> </body>
12.css属性选择器
根据标签的属性做选择!如 input标签的type属性
<style> input[type=text]{ height: 30px; } </style> </head> <body> <input type="text" name="key" value=""> <input type="text" name="key1" value=""> <input type="text" name="key2" value=""> </body> </html>
13.css的定位
position: relative 相对定位 ,以原位置为参考点向(top-left-botten-right)四个方向移动 ,并没有脱离标准流
absolute 绝对定位 ,脱离标准流 ,用于子盒子
fixed 固定定位 ,可以将标签固定在浏览器的位置 ,如回到顶部
子绝父相:父盒子用相对定位 ,子盒子用绝对定位 ,子盒子使用父盒子做参考点压盖
<style> .d1{ position:relative; width: 300px; height: 200px; background-color: antiquewhite; } .d2{ position: absolute; width: 200px; height: 100px; background-color: burlywood; left: 20px; top: 20px; } #top{ position: fixed; } </style> </head> <body> <div class="d1"> <div class="d2"> </div> </div> <div id="top"><a href="#">top</a></div> <div style="height: 10000px"></div> </body> </html>
