CSS的一些基础属性
CSS字体的一些属性
div{
font-size: 50px;/*设置的是字体的高 */
font-weight: bold;/*加粗,strong中自带这个属性*/
/* font: lighter normal bold=600 bolder;四种粗细 */
font-style: italic;/*斜体,即em的样式 */
font-family: arial;/*苹果公司字体*/
color: #ff4400;
/*
写颜色的方法
1.土鳖式(纯英文单词)
transparent:透明色,可以用来画三角形
2.颜色代码
r g b
00-ff十六进制的饱和度
000000为纯黑色
ffffff为纯白色
所以为六位,如果每两个数都相同,则可以缩减为三位
3.颜色函数
rgb(0-255,0-255,0-255)
*/
width: 0px;
height: 0px;
border: 100px solid black;
/*border: border-width border-style color;里面的三种元素*/
border-top-color: red;
border-left-color: blue;
border-right-color: yellow;
}
2CSS文本的一些属性
div{
border: 1px solid black;
text-align: left;/*对齐方式left\right\center */
height: 200px;
line-height: 16px;/*单行文本所占高度*/
/* 单行文本垂直居中 让line-height=height*/
text-indent: 2em;/*用于首行缩进两个字节*/
/* 1em=1*font-size=16px
字体的高为16px,高普遍等于宽 */
}
3取消下划线以及修改鼠标提示符
<del>原价50</del> <span>原价五十</span>
<a href="http:www.baidu.com">www.baidu.com</a>
<span>www.baidu com</span>
span{
color: rgb(0,0,238);
text-decoration: underline;/*设置上划线,下划线以及中划线和取消*/
cursor: e-resize;/*鼠标放在框内的提示符*/
}
4伪类选择器
伪类选择器
<a href="www.baidu.com">www.baidu.com</a>
<a href="www.jd.com">www.jd.com</a>
<a href="www.taobao.com">www.taobao.com</a>
a{
text-decoration: none;/*取消网址下划线*/
}
a:hover{/*当鼠标移到上面时*/
text-decoration: underline;/*出现下划线*/
background-color: #ff4400;/*背景色为淘宝红*/
color: #fff;
font-size: 16px;
font-weight: bold;
font-family: arial;
border-radius: 10px;/*角变为圆角*/
}
5display属性
1.行级元素=inline
feature:内容决定元素所占位置,不可以通过css改变宽高
例如: <span></span> <strong></strong> <em></em> <a></a> <del></del>
2.块级元素=block
feature:独占一行,可以通过css改变宽高
例如:<div></div> <p></p> <ul></ul> <ol></ol> <li></li> <form></form> <address></address>
3.行级块元素inline-block
feature:内容决定大小,可以改宽高<img src="" alt="">
图片连续排列的话中间会有空隙此时只需删除其中的回车,空格即可
<img src="img/Mocha.jpg" alt=""><img src="img/Mocha.jpg" alt=""><img src="img/Mocha.jpg" alt="">
开发思维
开发思维
小白:先写html后写css
优化:先写css再写html,先写(颜色,尺寸)之后在组合
即: 先定义功能,后选配功能
例:先定义,然后随用随取,更适合公司研发,多人合作,操作起来更加简便
例外:写代码时通常先格式化一些大多数html自带的css样式,然后在 重新定义,所以写代码时,css文件通常为一个文件夹并分为几个文件。
.green{
background-color: green;
}
.grey{
background-color: grey;
}
.size1{
width: 100px;
height: 100px;
}
.size2{
width: 200px;
height: 200px;
}
.size3{
width: 300px;
height: 300px;
}