学习web前端历程（九）

最新推荐文章于 2024-09-01 00:22:26 发布

l123zmj

最新推荐文章于 2024-09-01 00:22:26 发布

阅读量115

点赞数 1

文章标签：背景属性字体属性颜色透明度和内容溢出

本文链接：https://blog.csdn.net/l123zmj/article/details/98050358

版权

背景属性、字体属性、（颜色透明度和内容溢出）

一、背景属性
1、background-color （背景颜色和图形）
（1）默认值是transparent（透明的）
（2）当同时定义了背景图像和颜色时，背景图像覆盖在颜色之上

颜色取值：
（1）关键字：red
（2）十六进制：#f00 #0f0 #00f
（3）rgb（0,0,0）参数取值范围：0—255
（4）rgba（0，0,0，.5）最后一个参数的取值范围0-1，
0 代表完全透明 0.5 代表半透明 1 代表不透明

            width: 1000px;
            height: 1000px;
            background-color: green;
            background-color:#f00;
            background-color: rgb（255,102,255);
            background-color: rgba（255,102,255,0.5);

2、 background-image （背景图片）

（1）默认值为none（没有图片）
（2）元素的背景占据了元素的全部尺寸
（3）通过url使用绝对或相对地址指定图片
background-image 加载的图片默认在水平垂直方向是平铺的

background-image: url("images/lixian.jpg");

3、 background-repeat （背景图片是否重复）

值	描述
repeat	默认背景图像在垂直方向和水平方向重复
repeat-x	背景图像在水平方向重复
repeat=y	背景图像在垂直方向重复
no- repeat	背景图片将仅显示一次

 background-repeat: no-repeat;
 background-repeat: repeat-x;
 background-repeat: repeat-y;

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片位置</title>
    <style>
        div{
            width: 1000px;
            height: 1000px;
            background-color: green;
            background-image: url("images/lixian.jpg");
            background-repeat: no-repeat;
            background-size: cover；
            /*background-position: center center;  第一个参数代表水平位置  第二个参数代表垂直位置*/
            /*background-position: top ;  只写一个参数时，第二个参数默认是center*/
            /*background-position: 10px 5px;   第一个参数代表水平方向  第二个参数代表垂直方向*/
            background-position: 50px center;   两者混搭
    </style>
</head>
<body>
<div></div>
</body>
</html>

4、background-size （背景图片大小）

值	描述
length	设置背景图片的高度和宽度（第一个是宽度，第二个是高度）
percentage	以父元素的百分比来设置背景图像的宽和高（第一个是宽度，第二个是高度）
cover	只管占满整个背景，不管是否完全显示图像
contain	不管背景多大，只管完全显示背景图像

 background-size: cover；

5、background-position（背景图片的位置，相当于外层容器）定位

（1）方位名称 left top right center bottom
（2）精确数字
（3）混搭（方位名称与数字混搭）

background-position: center center;  第一个参数代表水平位置  第二个参数代表垂直位置
background-position: top ;  只写一个参数时，第二个参数默认是center
background-position: 10px 5px;   第一个参数代表水平方向  第二个参数代表垂直方向
background-position: 50px center;   两者混搭

6、背景附和
background-attachment （背景图片是否随着内容滚动）

值	描述
scroll	默认值背景图片随着内容滚动
fixed	背景图片固定（不滚动）

background-attachment: fixed;

整体代码

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景附和</title>
    <style>
        body{
            background-image: url("images/daji.jpg");
            background-attachment: fixed;
        }
        p{
            color: white;
            font-size: 30px;
        }
    </style>
</head>
<body>
<p>leikuan</p>
<p>leikuan</p>
<p>leikuan</p>
<p>leikuan</p>
<p>leikuan</p>
<p>leikuan</p>
<p>leikuan</p>
<p>leikuan</p>
<p>leikuan</p>
<p>leikuan</p>
<p>leikuan</p>
<p>leikuan</p>
<p>leikuan</p>
<p>leikuan</p>
<p>leikuan</p>
<p>leikuan</p>
<p>leikuan</p>
<p>leikuan</p>
<p>leikuan</p>
<p>leikuan</p>
<p>leikuan</p>
</body>
</html>

7、背景简写
background 在一个声明中设置所有背景属性
可有以下属性：

属性	名称
background-color	颜色
background-image	背景图片
background-repeat	是否重复
background-attachment	是否滚动
background-position	图片的位置
background-size	图片的大小

注意：
如果不设置其中的某个值，也不会出问题，会自动取默认值
（而其所有属性没有先后顺序）

background:  url("images/lixian.jpg") no-repeat  50px 60px;（用空格分隔属性）

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景简写</title>
    <style>
        div{
            width: 1000px;
            height: 1000px;
            background:  url("images/lixian.jpg") no-repeat  50px 60px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

二、字体属性
1.color （规定文本的颜色）
如：

          .div{color: green;}
          .div{color:#f00;}
          .div{color: rgb（255,102,255);}
          .div{color: rgba（255,102,255,0.5);}

2.font -style （指定文本的字样样式）（正常、斜体）

默认值： normal
属性：
normal       正常字体
italic        斜体字

font-style: italic;

3.font-size （指定文本字体大小）
通过像素来指定字体的大小

font-size: 20px;

4.font-family （定义文本使用某个字体）
默认值：由浏览器确定

font-family: 微软雅黑;

5.font weight （指定文字的粗细）

值	描述
normal（400）	默认值定义标准的字符
bold（700）	定义粗体字符
border	定义更粗的字符
lighter	定义更细的字符
100 200 300 400 …	定义由粗到细的字体

font 简写（和background的简写差不多）

font-style、font-variant、font-weight、font-size、font-height、font-family
 font: italic bold 20px "黑体";

注意：
font的简写：
（1）必须按照官方的给定的顺序给值
（2）font-size和font-family不可缺少

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        pre{
            color: red;
            font-size: 20px;
            font-style: italic;
            font-family: 微软雅黑;
            font-weight: bolder;
        }
    </style>
</head>
<body>
<h1>前端简介</h1>
<pre>
    前端开发是创建Web页面或app等前端界面呈现给用户的过程。
前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。
它从网页制作演变而来，名称上有很明显的时代特征。
在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，
用户使用网站的行为也以浏览为主。
随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
</pre>
</body>
</html>

6.letter-spacing （设置字的间距）

letter-spacing: 2px;

7.opacity （设置颜色透明度）对所有的元素都透明
（1）默认值为1，取值为0-1
（2）1为不透明，0为全透明，0.5为半透明（与rgba的作用一样）

opacity: 1;

8.overflow 溢出时

值	描述
hidden	当内容溢出元素框时隐藏
auto	自动（当内容多时出现滚动条，少时没有）
scrool	显示滚动条

9.text-overflow （让溢出的文字以省略号显示）

white-space: nowrap;       //让文字在同一行显示（不换行）
overflow: hidden;          //溢出的部分隐藏
text-overflow:ellipsis;    //文字溢出部分以省略号显示

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色透明度和内容溢出</title>
    <style>
        div{
            width: 800px;
            height: 800px;
            background-color: black;
            color: red;
            font-size: 30px;
            font-weight: bold;
            opacity: 1;
            /*overflow: hidden;*/
            /*overflow: auto;*/
            overflow: scroll;
            white-space: nowrap;
            /*text-overflow:ellipsis;*/
        }
    </style>
</head>
<body>
<div>
    前端开发是创建Web页面或app等前端界面呈现给用户的过程。<br/>
    前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。<br/>
    它从网页制作演变而来，名称上有很明显的时代特征。
    在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，
    用户使用网站的行为也以浏览为主。
    随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。前端开发是创建Web页面或app等前端界面呈现给用户的过程。
    前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。
    它从网页制作演变而来，名称上有很明显的时代特征。
    在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，
    用户使用网站的行为也以浏览为主。
    随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。前端开发是创建Web页面或app等前端界面呈现给用户的过程。
    前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。
    它从网页制作演变而来，名称上有很明显的时代特征。
    在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，
    用户使用网站的行为也以浏览为主。
    随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
</div>
</body>
</html>