首页 技术 正文
技术 2022年11月8日
0 收藏 693 点赞 1,420 浏览 1270 个字

编写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优先,编写顺序,就近原则
3、 css样式也可以写在单独文件中
<link rel=”stylesheet” href=”commons.css” />
4、边框
– 宽度,样式,颜色 (border: 4px dotted red;)
– border-left
5、
height, 高度 百分比
width, 宽度 像素,百分比
text-align:ceter, 水平方向居中
line-height,垂直方向根据标签高度
color、 字体颜色
font-size、 字体大小
font-weight 字体加粗
6、float
让标签飞起来,块级标签也可以堆叠
当父级标签没有float,子级标签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)
内边距 外边距
9、position:
a. fiexd => 固定在页面的某个位置
b. relative + absolute
<div style=’position:relative;’>
<div style=’position:absolute;top:0;left:0;’></div>
</div>

10、opcity: 0.5 透明度

11、z-index: 层级顺序,值越大越在上层

12、overflow: hidden(看到图片左上角)auto(会加滚动条)

13、hover:
当鼠标移动到当前标签上时,以下css属性才生效(变成别的颜色..)
hover{
background-color: blue;
}

14、background-image:url(‘image/4.gif’); # 默认,div大,图片重复访
background-repeat: repeat-y;no-repeat不重复,x横向重复,y纵向重复
background-position-x:
background-position-y:上下左右移动大图,从而获取里面的小图

15、placeholder 输入框内的提示信息

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,999
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,511
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,357
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,140
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,770
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,848