CSS的样式3杂

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;
}