CSS 样式; 注释/* 注释内容*/
书写方式:1、在head头里面写<style>样式
2、单独存为一个文件、通过link标签调用
-<link rel=“stylesheet” href="文件路径"
3、一个标签应用多个css样式:class=“css1 css2” 中间用空格隔开
<style>
1、选择器
位于Head头里面
-id选择器(body里面通过id=‘XX’调用)
#i1{
background: black;
color: #ffffff;
}
-class选择器(通过class调用)
.i1{
background: black;
color: #ffffff;
}
-标签选择器(标签名称为此的默认就匹配这个样式)
div {
background: black;
color: #ffffff;
}
-层级选择器【空格】(逐层匹配后应用到最里层)
.c1 .c2 #C3 div {
background: black;
color: #ffffff;
}
-组合选择器(逗号)[取取并集,所有的都匹配进行修饰]
c1,c2,c3,div{
background: black;
color: #ffffff;
}
-属性选择器
input[name="user"]{
background: black;
color: #ffffff;
}
PS:优先级:标签内的style属性 > head 中的<style标签>
</style>标签
2、边框
宽度、样式、颜色
border:2px solid red ;/*边框类型和颜色*/
color: lawngreen; /*边框内字体颜色*/
height: 48px; /*边框高度*/
96px; /*边框宽度*/
90%; /*占用整行的百分比*/
font-size: 20px; /*字体大小*/
font-weight: 800;/*字体粗细*/
text-align: center; /*文本横向居中*/
line-height: 48px; /*文本上下指定像素居中*/
3、背景
background:red;
4、float
设置标签的位置如何漂移对齐
clear:both 纳管子div
5、display
display:none
display:block
display:inline
display:inline-block (具有inline和block的全部属性)
行内标签:无法设置高度、宽度和边距:padding、margin、
6、padding margin(0,auto) 0auto 自动去除所有边距
margin:外边距
--应用:
padding:内边距
-top 上
-bottom 下
-left 左
-right 右
7、text-align
8、text-align
9、height,width,line-height,color,font-sizefont-weight
10、position: fixed; 固定到浏览器窗口的指定位置
left:0;
bottom:0;
position:relative(放在父级) + ablolute(放在子标签) 固定到父级标签的指定位置。
<div style=" 400px; height:100px;border: 1px solid red;margin: 0 auto;position: relative">
<div style="position: absolute;left: 0;bottom: 0;background: #7d7d7d; 50px;height: 50px"></div>
</div>
11、z-index:多个div叠放层级的优先级。值越大,越在最外层。
配合position一起使用
12、opacity:背景色的透明度:0位完全透明-1为完全不透明
13、overflow:
内部元素只显示本标签指定的大小
hidden(多余部分隐藏)
auto(多余部门出现滚动条)
14、hover的应用:当鼠标移入的时候才生效的css样式
.pg_header_a:hover{
background-color: chartreuse;
}
15、background-image:url('image/校花.gif')
16、background-repeat:norepeat 不重复
background-repeat-x:横向重复
background-repeat-y:纵向重复
background-position: x y 简写
background:url(图片路径) x y 最简写
17、设置超出部分文本隐藏&用省略号代替overflow:hidden; text-overflow:ellipsis;white-space:nowrap;
18、transform: translateX(-50%);/*横向移动自身宽度的比例*/
如果