css笔记
CSS
在标签上设置style属性
style=" height:48px;"
编写css样式:
1,标签的style属性
2, 写在head里面,style标签中写样式
-id选择器
#i1{
background-color:#2459a2;
height: 48px;
}
-class选择器
.c1{
background-color:#2459a2;
height: 48px;
}
<标签 class='c1'>jack</标签>
<标签 class='c1'>jacken</标签>
-标签选择器
div{
...
}
所有的div设置上此样式
-层级选择器(空格隔开)
.c1 .c2 div{
...
}
带有c1的标签下的带有c2的标签下的div标签应用此形式
-组合选择器(逗号隔开)
#c1,.c2,div{
...
}
id='c1'和全部class='c2'和所有div标签都应用此形式
-属性选择器
input[type='text']{
background-color:black;
color:red;
}
找到input标签(选择器)有[type='text']属性的应用此样式
PS:
-style优先级,标签内部的style优先,编写顺序,就近原则
2.5,css样式也可以写在单独文件里
引用<link rel="stylesheet" href="路径"/>
3, 注释
/* */和<!-- --> 我在pycharm上尝试了,都可以
4,边框
-宽度,样式,颜色(border:1px solid red;)
-border-left
5,
height,高度 百分比
width,宽度 像素 ,百分比
line-height, 垂直方向根据标签高度居中
text-align:center, 水平方向居中
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属性,可以设置高度,宽度,margin,padding
******
行内标签无法设置高度,宽度,margin,padding
块级标签可以设置高度,宽度,margin,padding
8,padding margin(0,auto)
边距,
padding,内边距
margin,外边距
9,text-align
10,height,width,line-height,color,font-size,font-weight
css补充
position:
a, fiexd=>固定在页面的某个位置,不随滚动条滚动
b, relative + absolute
<div style='position:relative;'/>
<div style='position:absolute;top:0;left:0;'></div>
</div>
opacity:0.5 透明度
z-index: 层级顺序
overflow: hidden,auto
hover
background-image:url('image/4.gif'); #默认,div大,图片重复
background-repeat:repeat-y;
background-position-x:
background-position-y:
background-position: 10px 10px
background:
https://www.cnblogs.com/serpent/