前端知识之CSS(2)-字体样式、背景属性、边框设置、display属性

前端知识之CSS

字体样式

高度和宽度

width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，行内标签的宽度由内容来决定
<style>
p {
    height: 1000px;  /*高度*/
    width: 50px;	/*宽度*/
}
</style>

字体大小

font-size: 99px;  # 字体大小一般有固定的大小参考

字重

font-weight用来设置字体的字重（粗细）。

font-weight: bolder;  	/*字体粗*/
font-weight: lighter;	 /*字体细*/

文本颜色

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如:  red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

在一些截图软件中我们可以看到颜色的RGB

文字属性

文字对齐
  text-align 属性规定元素中的文本的水平对齐方式。
       left      左边对齐
       right     右对齐
       center    居中对齐
       justify   俩端对其
文字装饰
  text-decoration 属性用来给文字添加特殊效果。
  主要用于去除a标签默认的下划线
       none         默认定义标准的文本。
       underline    定义文本下的一条线。
       overline     定义文本上的一条线。
       line-through 定义穿过文本下的一条线。
       inherit      继承父元素的text-decoration属性的值。
 例如：
  a {
      text-decoration: none;
  }
首行缩进
  默认文字大小是16px 32像素：
  p {
      text-indent: 32px;
  }

12.背景属性

背景颜色

<style>
div {
background-color: orange;
height: 1600px;
width: 1600px;
}
</style>

背景图片

<style>
div {
        background: url("https://img0.baidu.com/it/u=2196653892,2406547462&fm=253&fmt=auto&app=120&f=JPEG?w=509&h=500");
        width: 700px;
        height: 700px;
    }
</style>

背景重复

repeat(默认):背景图片平铺排满整个网页

repeat-x：背景图片只在水平方向上平铺

repeat-y：背景图片只在垂直方向上平铺

no-repeat：背景图片不平铺

<style>
    div {
        background: url("https://img0.baidu.com/it/u=2196653892,2406547462&fm=253&fmt=auto&app=120&f=JPEG?w=509&h=500");
        /* background-repeat: no-repeat;  只会展现一张完整的图的，在div空间大于图片的大小*/
        background-repeat: repeat-x;
        width: 700px;
        height: 700px;
        border: 5px solid black;
    }
</style>

图片的位置

background-position:左右 上下;

指定位置

background-position:200px 200px;

左右上下居中

background-position:center center;

多个属性名前缀相同 那么可以简写

background:orange url('url') no-repeat center center;
一个个编写即可 不写就默认

如何实时修改图片位置

浏览器找到标签的css代码 然后方向键上下按住即可动态调整

13.边框设置

border属性

/*border-left: 5px red  solid;
/*上侧边框*/
/*border-top: 10px dotted orange;*/
/*右侧边框*/
/*border-right: 5px dashed black;*/
/*下侧边框*/
/*border-bottom: 8px solid deeppink;*/

简写设置

border: 5px red solid;  /*上下左右一致*/

边框样式



border-raduis属性

div {
    height: 500px;
    width: 500px;
    border: 5px solid red;
    /*画圆*/
    border-radius: 50%;
}

14.display属性

用于控制HTML元素的显示效果

隐藏标签

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display: none; 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。