Allen
2021-09-05
00:17:51
5921
0
0
0
0
本文爲原創，遵循CC 4.0 BY-SA版權協議！轉載時請附上原文鏈接及本聲明。
原文鏈接：https://tdlib.com/am.php?t=AZZMm7rnLwh2 Tag: 笔记 CSS CSS基础
網站名稱：CSS基础学习笔记
網站地址：
CascadingStyleSheets层叠样式表，它可以控制多重网页的样式和布局；学习一下基础，记录一下。 color, background-color, text-align: === ///…
[SEO信息] [Alexa信息]
-->>直達網站
Cascading Style Sheets 层叠样式表，它可以控制多重网页的样式和布局；学习一下基础，记录一下。
color,
background-color,
text-align:
===
///三种使用方式
内嵌使用。
<a href="https://www.w3cschool.cn"
style="background-color:grey; color:white">
Visit the website
</a>
<p>This is a test.</p>
<a href="https://www.w3.org" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >Visit the W3C website</a>
...
+++
嵌入式：
<style type="text/css">
/*This is a comment*/
p{
color:red;
text-align:center;
}
</style>
...
+++
外部样式表
<link rel="stylesheet" type="text/css" href="styles.css"></link>
+++
从另一个样式表导入
@import "styles.css";
span {
border: medium black dashed;
padding: 10px;
}
（@import 语句必须出现在样式表的顶部，在定义任何新样式之前。）
...
CSS 字符编码
在CSS样式表中的@import语句之前，只有一个@charset语句。
@charset语句指定样式表使用的字符编码。
以下代码演示如何指定UTF-8编码。
@charset "UTF-8";
@import "styles.css";
span {
border: medium black dashed;
padding: 10px;
}
...
+++
以下代码链接到包含导入的样式表：
<link rel="stylesheet" type="text/css" href="combined.css"/>
+++
注意：浏览器为CSS属性找到一个值顺序：
属性的前三个来源（内联样式，嵌入样式和样式表）统称为作者样式。
用户样式表中定义的样式称为用户样式，浏览器定义的样式称为浏览器样式。
...
重要样式
您可以通过将属性值标记为重要来覆盖正常的级联顺序。
通过对声明附加！important ，可以将单个值标记为重要。
a {
color: black !important;
}
...
+++
继承
如果浏览器找不到一个可用样式中的值，它将使用继承。
继承意味着获取由父元素定义的属性的值。
<p>This is a <span>test</span>.</p>
...
span 元素的父代是 p 元素。
span元素从父p元素继承color属性。
不是所有的CSS属性都是继承的。
只有与外观相关的是继承的，包括文本颜色，字体详细信息等。
与布局相关的不是继承。
...
inherit关键字
你可以通过使用inherit在样式中强制继承，
inherit 显式地告诉浏览器对属性使用父元素的值。
span {
border: inherit;
}
===
CSS 颜色
--黑：
#000000（十六进制）
0，0，0（10进制）（红，绿，蓝）
--白：#ffffff
255,255，255
...
如：
#a9a9a9=169.169.169
d3d3d3=211,211,211
...
+++
RGB值简写
对红色，绿色和蓝色分量使用十六进制值。每对都是十六进制符号，范围为00 - FF。
十六进制值通常以＃作为前缀，如#ffffff，表示白色。 “纯”蓝色将被写入＃0000FF，“纯”红色被写入＃FF0000。
#RGB 是上述六位数符号的较短形式。在此格式中，每个数字都被复制以获得等效的六位数值，例如＃F7C变为＃FF77CC。
--???
border: 1px solid rgb(128, 128, 128);
...
+++
颜色函数
颜色名称和简单的十六进制值不是您可以指定颜色的唯一方法。
有许多函数允许您选择颜色。
rgb（r，g，b）使用RGB模型指定颜色。
示例：rgb（112，128，144）
rgba（r，g，b，a）使用RGB模型指定颜色，添加了alpha值以指定不透明度。 值为0是完全透明的; 值为1是完全不透明的。
示例：rgba（112，128，144，0.4）
hsl（h，s，l）使用色相，饱和度和亮度（HSL）模型指定颜色。
示例：hsl（120,100％，22％）
hsla（h，s，l，a）使用alpha值来指定不透明度。
示例：hsla（120,100％，22％，0.4）
...
<p style="background-color:#C0C0C0">
Color set by using hex value
</p>
<p style="background-color:rgb(192,192,192)">
Color set by using rgb value
</p>
<p style="background-color:gray">
Color set by using color name
</p>
...
CSS3中的扩展颜色关键字：
https://www.w3cschool.cn/css/html-css-colors.html
...
===
CSS 单位
CSS 中定义了两种长度单位类型：
绝对单位（ absolute ）
相对单位（ relative ）
如：
width: 5cm;
font-size: 20pt;
在上面的代码中，width 属性为 5cm 。 font-size （字体大小）属性为 20pt 。
...
绝对长度
in 英寸
cm 厘米
mm 毫米
pt 点或磅 (1 点 = 1/72 英寸)
pc 12点活字 (1 pc = 12 pt)
...
您可以在样式中混合和匹配单位，也可以混合绝对和相对单位。
您可以混合和匹配单位。
+++
相对长度
相对单位会根据一个不固定的参照值来测量决定显示结果。比如：宽度=50%
相对单位 % 根据父元素（蓝绿色框框）的宽决定了子元素的显示结果。而绝对单位 px 保持不变。
...
CSS 定义了大范围的相对测量。
下表显示了 CSS 在主流浏览器中定义和支持的相对单位。
...
em 相对于元素的字体大小
ex 相对于元素字体的“x-height”
rem 相对于根元素的字体大小
px 许多 CSS 像素(假定在 96dpi 显示器上)
% 另一个属性的值的百分比
比如：
p {
font-size: 15pt;
height: 2em;
}
--height 属性的值为 2em。 2em 意味着p元素的高度是字体大小的两倍。
<html>
<head>
<title>Pixels to Inches</title>
<style type="text/css">
div {
background: #000;
border: 1px solid rgb(128, 128, 128);
color: white;
font: 9px monospace;
margin: 15px;
text-align: center;
}
div#inches {
width: 1in;
height: 1in;
}
div#pixels {
width: 96px;
height: 96px;
}
</style>
</head>
<body>
<div id="inches"><-- 1 Inch --></div>
<div id="pixels"><-- 96 Pixels --></div>
</body>
</html>
...
+++
像素值
一个容易设置的长度是使用像素值。1 像素是 1/96 英寸。以下代码设置字体大小和宽度的像素值。
+++
百分比值
您可以将度量单位表示为另一个属性值的百分比。您可以使用 ％（百分比）单位。
+++
百分比值
您可以将度量单位表示为另一个属性值的百分比。您可以使用 ％（百分比）单位。
p {
background: grey;
color:white;
font-size: 200%;
width: 50%;
}
+++
相对于字体大小
以下代码使用相对单位。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
background: grey;
color:white;
font-size: 15pt;
height: 2em;
}
</style>
</head>
<body>
<p>This is a test.</p>
<p style="font-size:12pt">This is another test.</p>
</body>
</html>
--上面的代码将height属性设置为 2em ，这意味着 p元素的高度是字体大小的两倍。
第一个 p 元素的字体大小为15pt。第二个 p 元素的 font-size 为12pt。
...
+++
派生自其他相对值
您可以使用相对单位来表示另一个相对度量的倍数。
以下示例显示 height 属性以 em 单位表示。 em 单位派生自 font-size 属性的值，其使用 rem 单位表示。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html {
font-size: 0.2in;
}
p {
background: grey;
color:white;
font-size: 2rem;
height: 2em;
}
</style>
</head>
<body style="font-size:14pt">
<a href="https://www.w3cschool.cn">website</a>
<p>This is a test.</p>
<a href="https://w3.org" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >W3C</a>
</body>
</html>
...
上述示例分配的绝对字体大小为 0.2 英寸。
rem 单位是相对于字体大小的 HTML 元素，也称为根元素。
font-size 值 2rem 意味着字体大小将是根元素字体 0.4 英寸的大小的两倍。
相同样式中的 height 属性被指定为 2em，这是再次的两倍。这意味着浏览器将使用高度为0.4英寸的字体显示 p 元素，并且整体元素将为 0.8 英寸高。
另一个与字体相关的相对单位是 ex ， 1ex 大约为 0.5em 。
...
===
CSS 值
...
单位计算
CSS3允许你计算单位。
这是一种灵活的方法，在创建样式时可以同时控制和精确。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
background: grey;
color:white;
font-size: 20pt;
width: calc(80% - 20px);
}
</style>
</head>
<body>
<p>this is a test.</p>
</body>
</html>
您可以使用 calc 关键字和括号包含计算。您可以混合其他单位和执行基本的数学。
...
+++
CSS角度
当你来变换时，你需要使用角度。
您将角度表示为数字后跟单位 - 例如，360deg。
下表显示了支持的角度单位的集合。
...
+++
CSS时间单位
您可以使用CSS时间测量间隔。
时间定义为一个单位数，后面跟一个时间单位，例如100ms。
下表显示了支持的时间单位。
+++
像素
主流浏览器将 1 个像素视为 1/96 英寸。
上述示例分配的绝对字体大小为 0.2 英寸。
rem 单位是相对于字体大小的 HTML 元素，也称为根元素。
font-size 值 2rem 意味着字体大小将是根元素字体 0.4 英寸的大小的两倍。
相同样式中的 height 属性被指定为 2em，这是再次的两倍。这意味着浏览器将使用高度为0.4英寸的字体显示 p 元素，并且整体元素将为 0.8 英寸高。
另一个与字体相关的相对单位是 ex ， 1ex 大约为 0.5em 。
end
【版權聲明】本文爲原創，遵循CC 4.0 BY-SA版權協議！轉載時請附上原文鏈接及本聲明。
原文鏈接：https://tdlib.com/am.php?t=AZZMm7rnLwh2 Tag: 笔记 CSS CSS基础
評論
