从零开始学java（4）--- css学习

day4

今天继续css内容，主要介绍css各种属性的设置。

前天存成草稿忘发了。。。

1.文字属性设置

font-family:设置字体类型(默认 宋体，标题默认是黑体)

font-weight:设置字体是否加粗 normal(默认的正常字体),bold(加粗的字体)自定义粗细

font-size:设置字体的大小单位px

font-style:设置字体是否为斜体 normal(正常字体)，italic(x斜体)

color:设置字体的颜色(值可以颜色对应的英文，也可以是 颜色的16进制的值)

line-height:设置标签的高度

text-align:设置文字显示的位置 值 left,center（左右居中）,right

text-decoration:设置下划线
underline（位置在下）,line-through（中间穿过）, overline（上）
none 去掉默认下划线

text-indent:设置首行缩进的距离，单位 em或者px

//
letter-spacing:设置字符间距

word-spacing:设置单词间距

text-transform: 设置字母大小写转换
对应的3个属性值
uppercase(将字母全部转换成大写输出)
lowercase(将字母全部转换成小写输出)
capitalize(所有字母全部转换成首字母大写 ，其余保持原状输出);
//

text-shadow（文字阴影）：h-shadow v-shadow blur color；

h-shadow ：必需。水平阴影的位置。允许负值。
v-shadow ：必需。垂直阴影的位置。允许负值。
blur ：可选。模糊的距离。
color ：可选。阴影的颜色。

text-shadow: 2px 2px 1px gray;
/*水平 垂直 模糊度 颜色 */

box-shadow（盒子阴影）：是标签的阴影，属性和text-shadow一样。

box-shadow:2px 2px 1px red ;

效果如下：

2.边框属性设置

任何标签都可以画边框

设置边框的方向有，top(上),bottom(下),left(左),right(右)

方式一：

以left为例子进行解释说明边框的使用
border-left-width:设置边框的宽度(决定边框的粗细 单位px)
border-left-style:设置边框的样式
决定哪种类型的边框：
//solid:实线边框
//dashed:虚线边框
//double:双实线边框
//dotted:点缀线边框
border-left-color:设置边框的颜色

方式二：

border-left: 边框的宽度 边框的样式 边框的颜色;
跟3个属性的顺序没有关系
如：

div img{
           border-left: solid  5px  red;
      }

和

div img{
           border-left:   5px  red solid;
      }

效果是一样的

如果想设置4条边框显示效果相同：

border:边框的宽度 边框的样式 边框的颜色;

边框的圆角

border-radius:0px 0px 0px 0px;

/*四个属性分别是左上，右上，右下，左下的圆角半径*/

如果四个半径都一样 border-radius:10px ，等价于 border-radius:10px 10px 10px 10px;

如果要设置一个圆边框，先要求标签是一个正方形，或者设置width和height一样；
然后设置border-radius:为标签的宽度的一半（要算上边的宽度）或者50%。

div .circle{
           border-radius: 50%;

           /*如果标签的边的宽度为20px，边框宽度为1px*/
           border-radius: 11px;
 }

3.背景图片相关属性的设置

background-color：设置背景颜色

background-image: url(“图片资源的相对位置”);设置背景图片

background-repeat:设置背景图片是否可以重复
no-repeat:不可重复
repeat：背景图片填充整个标签 默认值
repeat-x:背景图片填充水平方向
repeat-y:背景图片填充垂直方向

background-position：th1,th2;
th1:水平方向的距离
th2:垂直方向的距离

具体实例：
background-color: palegreen;
background-image: url(“images/grape.jpg”);
background-repeat:no-repeat;
background-position: 0px 0px;

也可以这样设置：
background：url(“图片资源的相对位置”) no-repeat 0px 0px;
较为方便

也可以加上颜色：
background：red url(“图片资源的相对位置”) no-repeat 0px 0px;
但背景图片将会完全覆盖背景颜色

设置背景的尺寸：
background-size： cover；

length ：设置背景图片高度和宽度。
第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)

percentage ：将计算相对于背景定位区域的百分比。
第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"

cover ：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

contain ：此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

4.列表相关属性设置(有序和无序列表的属性设置)

list-style-type:设置小图标的样式 none(去掉原始小图标)

list-style-position:设置小图标显示的位置
inside(将小图标设置在li的里面)，outside(将小图标设置在li的外面)

list-style-image url(“小图标的相对位置”) :自定义小图标(用新的图
片代替列表之前的符号，要先设置原始小图标为none)

list-style-type: none;
list-style-image: url("images/list.gif");
list-style-position: outside;

也可以：
list-style: 设置小图标的样式，设置小图标显示的位置，自定义小图标

list-style:none url("images/list.gif") outside;

5.表格相关属性的设置

表格的边框

单一边框属性：border-collapse: collapse;

如果单纯只在table中设置边框

 table {
            border: 1px solid;
        }

就会这样
但是如果给tr td加上边框，则会：

table tr td{
            border: 1px solid;
         }

因此我们需要单一边框属性：

 table {
            border-collapse: collapse;
        }

就能得到正常的表格边框了：

表格居中:

margin: 0px auto;(关于margin会在盒子模型中解释)

6.伪类别相关属性的设置

a:link 超链接初始状态属性设置
a:hover 当鼠标移入超链接时对应的属性设置

//现在不怎么用了，很多浏览器都不支持
a:active 当鼠标点击超链接时对应的属性设置
a:visited 当超链接被访问完之后对应的属性设置

具体实例：

a:link{
            color:mediumpurple;
            text-decoration: none;
            background-color: palegoldenrod;
        }
a:hover{
            color: red;
            text-decoration: underline;
            background-color: orange;
        }
a:active{
            color: greenyellow;
        }
a:visited{
            color:black;
        }

对于前两个
正常：

移到：

7.盒子模型

页面3D图解
从上至下的顺序为: content(内容)-> background-image->background-color
所以，当给一个标签同时设置背景图片以及背景颜色时，背景图片将会覆盖背景颜色

内外边距的设置(重点)

单位均为px:
margin-top: 设置标签的上外边距
margin-left: 设置标签的左外边距
margin-bottom:设置标签的下外边距
margin-right: 设置标签的右外边距

padding-left:设置标签的左内边距
padding-top: 设置标签的上内边距
padding-bottom:设置标签的下内边距
padding-right: 设置标签的右内边距

margin th1 th2 th3 th4;

 margin: 10px 20px 30px 40px;  /*上右下左*/

以及
padding:th1 th2 th3 th4;

分别设置 上，右，下，左的外边距 或者内边距

margin:th1 th2 或者 padding:th1 th2
th1:设置上，下 外边距或者内边距
th2:设置左，右 外边距或者内边距

margin:th;或者padding:th;
设置上,下,左,右 内边距或者外边距

重要的结论

2个行级标签之间的距离:为外边距之和
2个块级标签之间的距离:取2者之间的较大者

关于body

在制作页面前一般要先去掉body和网页间的距离：

<style type="text/css">
        /* margin:0px; 上下左右边距都为0px
       	padding:0px;*/
        body{
            margin: 0px;
            padding: 0px;
        }
</style>

8.CSS浮动(针对div)

float浮动

left,right设置浮动方向

使用float的特点：对于块级别标签而言。一旦设置了浮动属性，
(1).那么此块级别标签将自适应大小(根据自身的内容+padding占据浏览器的空间)
(2).此块级别标签将不在从属于父块了，即就是此块级别标签的外边距的设置不会影响原先的兄弟标签了
(3).浮动的块级别标签不会覆盖其它标签里面的文字信息，但除了文字信息其他的会受到影响

清除浮动的影响

clear: left(清除左浮动),
          right(清除右浮动),
          both(清除左右浮动)

如果还不了解，更加详细的说明大家可以看看这个
https://www.w3school.com.cn/css/css_positioning_floating.asp
，讲的挺清晰的。

9.position定位

分为：absolute(绝对定位)，relative(相对定位)
           static(没有定位) fixed(固定定位)
具体格式：

使用position设置absolute值定位的特点：
(1).那么此块级别标签将自适应大小(根据自身的内容+padding占据浏览器的空间)
(2).此块级别标签将不在从属于父块了，即就是此块级别标签的外边距的设置不会影响原先的兄弟标签了。。。
(3).设置的left和top等相关属性设置外边距是相对于浏览器或者body而言的，而且还会覆盖原先的文字内容

使用position设置relative值定位的特点：
实质上就是相对原先的位置上进行一个平移，此标签任然从属于父块。

absolute和fixed的区别：
absolute： 绝对定位，会伴随滚动条位置发生改变
fixed： 固定定位 ，不会伴随滚动条的移动而位置发生改变