首页 > 其他分享> 文章详细

CSS基础--颜色、字体、背景、边框等

2022-03-02 20:31:55 阅读：213 来源： 互联网

标签：font -- 元素边框文本 border CSS 属性

学习目标：

掌握 CSS 颜色，单位，注释等基本元素的使用方法

学习内容：

CSS基础

1.颜色

指定颜色是通过使用预定义的颜色名称，或 RGB、HEX、HSL、RGBA、HSLA 值。

2.单位

CSS 有几种表示长度的不同单位。
许多 CSS 属性接受“长度”值，诸如 width、margin、padding、font-size 等。
长度是一个后面跟着长度单位的数字，诸如 10px、2em 等。
数字和单位之间不能出现空格。但是，如果值为 0，则可以省略单位。
对于某些 CSS 属性，允许使用负的长度。
长度单位有两种类型：绝对单位和相对单位。
绝对长度
绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。
不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。但是，如果已知输出介质，则可以使用它们，例如用于打印布局（print layout）。
在这里插入图片描述
相对长度
相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。

3.注释

注释用于解释代码，以后在您编辑源代码时可能会有所帮助。
浏览器会忽略注释。
位于 <style>元素内的 CSS 注释，以 /* 开始，以 */ 结束：

/* 这是一条单行注释 */
p {
  color: red;
}

从 HTML 教程中，您学习到可以使用 <!–…--> 语法在 HTML 源代码中添加注释。
在下面的例子中，我们结合使用了 HTML 和 CSS 注释：

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red; /* 将文字颜色设置为红色 */
} 
</style>
</head>
<body>
<h2>My Heading</h2>
<!-- 这些段落将是红色的 -->
<p>Hello World!</p>
<p>这段文本由 CSS 设置样式。</p>
<p>CSS 注释不会在输出中显示。</p>
</body>
</html>

文字

1.CSS字体

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。
在 CSS 中，有两种不同类型的字体系列名称：

通用字体系列 - 拥有相似外观的字体系统组合（比如 “Serif” 或 “Monospace”）
特定字体系列 - 具体的字体系列（比如 “Times” 或 “Courier”）

除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：

Serif 字体
Sans-serif 字体
Monospace 字体
Cursive 字体
Fantasy 字体

指定字体系列
使用 font-family 属性定义文本的字体系列。

h1 {font-family: Georgia;}

字体风格
font-style 属性最常用于规定斜体文本。
该属性有三个值：

normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
italic 和 oblique 的区别：
斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

字体变形
font-variant 属性可以设定小型大写字母。
小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。

p {font-variant:small-caps;}

字体加粗
font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

字体大小
font-size 属性设置文本的大小。
font-size 值可以是绝对或相对值。
绝对值：

将文本设置为指定的大小
不允许用户在所有浏览器中改变文本大小（不利于可用性）
绝对大小在确定了输出的物理尺寸时很有用

相对大小：

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

如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
使用像素来设置字体大小
通过像素设置文本大小，可以对文本大小进行完全控制：

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

在 Firefox, Chrome, and Safari 中，可以重新调整以上例子的文本大小，但是在 Internet Explorer 中不行。
虽然可以通过浏览器的缩放工具调整文本大小，但是这实际上是对整个页面的调整，而不仅限于文本。
使用 em 来设置字体大小
如果要避免在 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替 pixels。
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
可以使用下面这个公式将像素转换为 em：pixels/16=em
（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

结合使用百分比和 EM
在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

2.CSS文本

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
缩进文本
通过使用text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
水平对齐
text-align是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。
字间隔
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近。
字母间隔
letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量。
字符转换
text-transform 属性处理文本的大小写。这个属性有 4 个值：

none
uppercase
lowercase
capitalize

默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。
文本装饰
text-decoration 有 5 个值：

none
underline
overline
line-through
blink

不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。
处理空白符
white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。
文本方向
direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
注释：对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。

CSS背景样式

1.背景颜色

background-color属性定义了CSS中任何元素的背景颜色。属性接受任何有效的值。背景色扩展到元素的内容和内边距的下面。

2.背景图片

background-image属性允许在元素的背景中显示图像。
如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。
控制背景平铺
background-repeat属性用于控制图像的平铺行为。可用的值是:

no-repeat — 不重复。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat — 在两个方向重复。

调整背景图像的大小
当有一个很大的图像，由于它比作为背景的元素大，所以最后被裁剪掉了。在这种情况下，我们可以使用 background-size属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。
可以使用关键字:

cover —浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外
contain — 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。

背景图像定位
background-position属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是(0,0)，框沿着水平(x)和垂直(y)轴定位。
background-position是background-position-x和background-position-y的简写，它们允许您分别设置不同的坐标轴的值。

3.渐变背景

当渐变用于背景时，也可以使用像图像一样的background-image属性设置。
您可以在MDN的<gradient>数据类型页面上，了解更多关于渐变的不同类型，以及使用它们可以做的事情。使用渐变的一个有趣方法是，使用web上可用的许多CSS渐变生成器之一，比如这个。您可以创建一个渐变，然后复制并粘贴生成它的源代码。
以下是个例子

.a {
  background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
}
.b {
  background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
  background-size: 100px 50px;
}

<div class="wrapper">
  <div class="box a"></div>
  <div class="box b"></div>
</div>

4.多个背景图像

可以有多个背景图像——在单个属性值中指定多个background-image值，用逗号分隔每个值。

background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px,  top right;

不同属性的每个值，将与其他属性中相同位置的值匹配。例如，上面的image1的background-repeat值将是no-repeat。但是，当不同的属性具有不同数量的值时，会发生什么情况呢？答案是较小数量的值会循环—在上面的例子中有四个背景图像，但是只有两个背景位置值。前两个位置值将应用于前两个图像，然后它们将再次循环—image3将被赋予第一个位置值，image4将被赋予第二个位置值。

5.背景叠加

另一个可供选择的背景是指定他们如何滚动时，内容滚动。这是由background-attachment属性控制的，它可以接受以下值:

scroll: 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。
fixed: 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。
local: 这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。

6.使用background的简写

使用background属性指定的背景。这种简写允许您一次设置所有不同的属性。
如果使用多个背景，则需要为第一个背景指定所有普通属性，然后在逗号后面添加下一个背景。在下面的例子中，我们有一个渐变，它指定大小和位置，然后是一个无重复的图像背景，它指定位置，然后是一个颜色。
这里有一些规则，需要在简写背景属性时遵循，例如:

background-color 只能在逗号之后指定。
background-size 值只能包含在背景位置之后，用’/'字符分隔，例如：center/80%。

CSS边框

CSS border 属性允许您指定元素边框的样式、宽度和颜色。
CSS边框样式
border-style 属性指定要显示的边框类型。
允许以下值：

dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框
border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

选择器

CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

1.元素选择器

CSS元素选择器(也称为类型选择器)通过node节点名称匹配元素. 因此,在单独使用时,寻找特定类型的元素时,元素选择器都会匹配该文档中所有此类型的元素.
语法

元素 {样式声明 }

  <span>这里是由 span 包裹的一些文字.</span>
  <p>这里是由 p 包裹的一些文字.</p>

span {
  background-color: DodgerBlue;
  color: #ffffff;
}

2.ID选择器

在一个HTML文档中,CSS ID 选择器会根据该元素的 ID 属性中的内容匹配元素,元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。
语法

#id属性值 {样式声明 }
它与下面的属性选择器语句等价：
[id=id属性值] {样式声明 }

  <span id="identified">Here's a span with some text.</span>
  <span>Here's another.</span>

span#identified {
  background-color: DodgerBlue;
}

3.类选择器

在一个HTML文档中，CSS类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。
语法

.类名 {样式声明 }
注意它与下面的语句等价 attribute selector:
[class~=类名] {样式声明 }

  <span class="classy">Here's a span with some text.</span>
  <span>Here's another.</span>

span.classy {
  background-color: DodgerBlue;
}

学习产出：

<!-- 边框样式 -->
    <div class="border">
        <div id="borderSolid">border:solid 5px</div>
        <br>
        <div id="borderDouble">border: 5px double</div>
        <br>
        <div id="borderDashed">border: 5px dashed</div>
        <br>
        <div id="borderDotted">border: 5px dotted</div>
        <br>
        <div id="borderGroove">border: 5px groove</div>
        <br>
        <div id="borderRidge">border: 5px ridge</div>
        <br>
        <div id="borderInset">border: 5px inset</div>
        <br>
        <div id="borderOutset">border: 5px outset</div>
    </div>

    <!-- 文本样式 -->
    <div class="text">
        <p>文字垂直居中</p>
        <p class="up">这是上划线</p>
        <p class="del">这是删除线</p>
        <p class="low">这是下换线</p>
        <p><a href="#">这是链接</a></p>
        <p class="word">字符间隔为10像素</p>
        <p class="bold">这是粗体</p>
        <p class="ital">这是斜体</p>
        <p class="small">这是小型大写字母example</p>
        <p class="px">这是20像素大小字体</p>
        <p class="right">这是靠右对齐</p>
        <p class="em">这是2em大小字体</p>
        <p class="intent">这是首行缩进这是首行缩进这是首行缩进这是首行缩进这是首行缩进这是首行缩进这是首行缩进这是首行缩进这是首行缩进这是首行缩进这是首行缩进这是首行缩进这是首行缩进</p>
    </div>

.border{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#borderSolid {
    width: 100px;
    height: 100px;
    border: 5px solid #1C6EA4;
}
#borderDouble{
    width: 100px;
    height: 100px;
    border: 5px double #1C6EA4;
}
#borderDashed{
    width: 100px;
    height: 100px;
    border: 5px dashed #1C6EA4;
}
#borderDotted{
    width: 100px;
    height: 100px;
    border: 5px dotted #1C6EA4;
}
#borderGroove{
    width: 100px;
    height: 100px;
    border: 5px groove #1C6EA4;
}
#borderRidge{
    width: 100px;
    height: 100px;
    border: 5px ridge #1C6EA4;
}
#borderInset{
    width: 100px;
    height: 100px;
    border: 5px inset #1C6EA4;
}
#borderOutset{
    width: 100px;
    height: 100px;
    border: 5px outset #1C6EA4;
}
.text{
    display: flex;
    flex-direction: column;
}
p{
    border: 1px solid black;
    border-radius: 5px;
    width: 500px;
    text-align: center;
    padding:40px 0px;
}
.up{
    text-decoration: overline;
}
.del{
    text-decoration: line-through;
}
.low{
    text-decoration: underline;
}
a{
    color: black;
    text-decoration: none;
}
.word{
    letter-spacing: 10px;
}
.bold{
    font-weight: bold;
}
.ital{
    font-style: italic;
}
.small{
    font-variant: small-caps;
}
.px{
    font-size: 20px;
}
.right{
    text-align: right;
}
.em{
    font-size: 2em;
    font-variant: small-caps;
}
.intent{
    text-indent: 1cm;
}

标签：font,--,元素,边框,文本,border,CSS,属性
来源： https://blog.csdn.net/qq_44489836/article/details/123232193

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9