CSS基础学习笔记
Allen GR
Title 10218 Reply 0 Coin 0 Score 0
entry : 2021-09-05 00:17:51
update: 2021-09-05 00:23:11
show: 135
#0. (Normal)

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">&lt;-- 1 Inch --&gt;</div>
  <div id="pixels">&lt;-- 96 Pixels --&gt;</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基础   
分享得 Gbit :
还没有评论,快来抢沙发吧!
未登录,请先 [注册] or [登录]
(一分钟即可完成注册!)

猜你感兴趣:

这些内容更精彩...
2021-09-08 22:38:44
0
2021-02-22 16:48:00
0
2021-07-04 00:06:46
0

随机推荐

随机推荐
数量 0