• Web前端：CSS篇（二）背景，文本，链接

    CSS 背景

    背景颜色

    background-color 属性定义了元素的背景颜色.

    页面的背景颜色使用在body的选择器中:

    body {background-color:#b0c4de;}

    CSS中，颜色值通常以以下方式定义:

    • 十六进制 - 如："#ff0000"
    • RGB - 如："rgb(255,0,0)"
    • 颜色名称 - 如："red"

    以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:

    h1 {background-color:#6495ed;}
    p {background-color:#e0ffff;}
    div {background-color:#b0c4de;}

    PS：一般来说，如果用的是好用点的文本编辑器，这个颜色是可以直接选择的

    背景图像

    background-image 属性描述了元素的背景图像.

    默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

    页面背景图片设置实例:

    body {background-image:url('图片文件URL');}

    背景图像 - 水平或垂直平铺

    默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

    一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，

    下面可以使图像只在水平方向平铺 (repeat-x)

    body
    {
    background-image:url('图片文件URL'');
    background-repeat:repeat-x;
    }

    背景图像- 设置定位与不平铺

    如果你不想让图像平铺，你可以使用 background-repeat 属性:

    body
    {
    background-image:url('图片文件URL'');
    background-repeat:no-repeat;
    }

    以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。

    可以利用 background-position 属性改变图像在背景中的位置:

    补充：CSS3 多重背景(multiple backgrounds)

    多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。

    语法缩写如下：

    background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

    可以把上面的缩写拆解成以下形式：

    background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;

    注意：

    •  用逗号隔开每组 background 的缩写值；
    •  如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
    •  如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
    •  background-color 只能设置一个。

    CSS 文本效果

    文字颜色

    颜色属性被用来设置文字的颜色。

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

    • 十六进制值 - 如: ＃FF0000
    • 一个RGB值 - 如: RGB(255,0,0)
    • 颜色的名称 - 如: red
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8"> 
    5. <title>testtitle> 
    6. <style>
    7. body {color:red;}
    8. h1 {color:#00ff00;}
    9. p.ex {color:rgb(0,0,255);}
    10. style>
    11. head>
    12.  
    13. <body>
    14. <h1>这是标题 1h1>
    15. <p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。p>
    16. <p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。p>
    17. body>
    18. html>

    文本的对齐方式

    文本排列属性是用来设置文本的水平对齐方式。

    文本可居中或对齐到左或右,两端对齐.

    当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8"> 
    5. <title>testtitle> 
    6. <style>
    7. h1 {text-align:center;}
    8. p.date {text-align:right;}
    9. p.main {text-align:justify;}
    10. style>
    11. head>
    12.  
    13. <body>
    14. <h1>CSS text-align 实例h1>
    15. <p class="date">2024.8.17p>
    16. <p class="main">这是文本内容p>
    17. <p><b>注意：b> 重置浏览器窗口大小查看 "justify" 是如何工作的。p>
    18. body>
    19.  
    20. html>

    文本修饰

    text-decoration 属性用来设置或删除文本的装饰。

    从设计的角度看 text-decoration属性主要是用来删除链接的下划线，使界面更佳美观：

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8"> 
    5. <title>testtitle> 
    6. <style>
    7. a {text-decoration:none;}
    8. style>
    9. head>
    10.  
    11. <body>
    12. <p>链接到: <a href="http://www.baidu.com/">百度a>p>
    13. body>
    14.  
    15. html>

    文本转换

    文本转换属性是用来指定在一个文本中的大写和小写字母。

    可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

    p.uppercase {text-transform:uppercase;}
    p.lowercase {text-transform:lowercase;}
    p.capitalize {text-transform:capitalize;}

    文本缩进

    文本缩进属性是用来指定文本的第一行的缩进。

    p {text-indent:50px;}

    字体系列

    font-family 属性设置文本的字体系列。

    font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

    注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。

    多个字体系列是用一个逗号分隔指明：

    p{font-family:"Times New Roman", Times, serif;}

    字体样式

    主要是用于指定斜体文字的字体样式属性。

    这个属性有三个值：

    • 正常 - 正常显示文本
    • 斜体 - 以斜体字显示的文字
    • 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

    p.normal {font-style:normal;}
    p.italic {font-style:italic;}
    p.oblique {font-style:oblique;}

    字体大小

    font-size 属性设置文本的大小。

    能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

    请务必使用正确的HTML标签，就

    -

    表示标题和

    表示段落：

    字体大小的值可以是绝对或相对的大小。

    绝对大小：

    • 设置一个指定大小的文本
    • 不允许用户在所有浏览器中改变文本大小
    • 确定了输出的物理尺寸时绝对大小很有用

    相对大小：

    • 相对于周围的元素来设置大小
    • 允许用户在浏览器中改变文字大小

     如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。

    设置字体大小像素

    设置文字的大小与像素，让您完全控制文字大小：

    h1 {font-size:40px;}
    h2 {font-size:30px;}
    p {font-size:14px;}

    上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。

    虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本

    用em来设置字体大小

    为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。

    em的尺寸单位由W3C建议。

    1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

    因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8"> 
    5. <title>testtitle>
    6. <style>
    7. h1 {font-size:2.5em;} /* 40px/16=2.5em */
    8. h2 {font-size:1.875em;} /* 30px/16=1.875em */
    9. p {font-size:0.875em;} /* 14px/16=0.875em */
    10. style>
    11. head>
    12. <body>
    13.  
    14. <h1>This is heading 1h1>
    15. <h2>This is heading 2h2>
    16. <p>This is a paragraph.p>
    17. <p>使用 em 单位，允许在所有浏览器中调整文本大小。
    18. 不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。
    19. p>
    20. body>
    21. html>

    在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

    不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。

    使用百分比和EM组合

    在所有浏览器的解决方案中，设置 元素的默认字体大小的是百分比：

    1. body {font-size:100%;}
    2. h1 {font-size:2.5em;}
    3. h2 {font-size:1.875em;}
    4. p {font-size:0.875em;}

    CSS 链接

    不同的链接可以有不同的样式。

    链接样式

    链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

    特别的链接，可以有不同的样式，这取决于他们是什么状态。

    这四个链接状态是：

    • a:link - 正常，未访问过的链接
    • a:visited - 用户已访问过的链接
    • a:hover - 当用户鼠标放在链接上时
    • a:active - 链接被点击的那一刻
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8"> 
    5. <title>testtitle> 
    6. <style>
    7. a:link {color:#000000;}      /* 未访问链接*/
    8. a:visited {color:#00FF00;}  /* 已访问链接 */
    9. a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
    10. a:active {color:#0000FF;}  /* 鼠标点击时 */
    11. style>
    12. head>
    13. <body>
    14. <p><b><a href="/css/" target="_blank">这是一个链接a>b>p>
    15. <p><b>注意：b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。p>
    16. <p><b>注意：b> a:active 必须在 a:hover 之后。p>
    17. body>
    18. html>

    当设置为若干链路状态的样式，也有一些顺序规则：

    • a:hover 必须跟在 a:link 和 a:visited后面
    • a:active 必须跟在 a:hover后面

    常见的链接样式

    根据上述链接的颜色变化的例子，看它是在什么状态。

    让我们通过一些其他常见的方式转到链接样式：

    文本修饰

    text-decoration 属性主要用于删除链接中的下划线：

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8"> 
    5. <title>testtitle> 
    6. <style>
    7. a:link {text-decoration:none;}    /* unvisited link */
    8. a:visited {text-decoration:none;} /* visited link */
    9. a:hover {text-decoration:underline;}   /* mouse over link */
    10. a:active {text-decoration:underline;}  /* selected link */
    11. style>
    12. head>
    13.  
    14. <body>
    15. <p><b><a href="/css/" target="_blank">This is a linka>b>p>
    16. <p><b>注意:b> hover必须在:link和 a:visited之后定义才有效.p>
    17. <p><b>注意:b>active必须在hover之后定义是有效的.p>
    18. body>
    19. html>

    背景颜色

    背景颜色属性指定链接背景色：

    a:link {background-color:#B2FF99;}    /* 未访问链接 */
    a:visited {background-color:#FFFF85;} /* 已访问链接 */
    a:hover {background-color:#FF704D;}   /* 鼠标移动到链接上 */
    a:active {background-color:#FF704D;}  /* 鼠标点击时 */

  • 相关阅读:
    大学生WEB前端静态网页——旅游介绍35页 响应式,
    FPGA的出租车计费器VHDL计价器
    如何清理ogg日志文件
    VS Code 常用快捷键
    【Idea】IntelliJ IDEA 2023版本，.java文件报 no scalac found to compile scala sources问题
    【vue五分钟】五分钟让你了解vue组件
    C 语言 math.h 库介绍
    RocketMq存储设计——MappedFile
    Flutter ☞ 常量
    python 比较图像相似度实战
  • 原文地址：https://blog.csdn.net/sjb2274540432/article/details/141068738