标签：color 前端 元素 笔记 边框 css border CSS 属性
CSS
CSS，它代表(Cascading Style Sheets)层叠样式表。
使用< style >标签为元素定义CSS样式
style可以定义在开头，也可以定义在标签内
在代码的顶端，创建一个如下所示的style元素：
<style>
</style>
所有的h2元素都设置为红色
<style type="text/css">
h2 {
color: red;
}
</style>
普通文本内容
<h2>h2文本内容,<span>h2内span文本</span></h2>
使用 class 选择器设置样式
CSS 的class具有可重用性，可应用于各种 HTML 元素。
<style>
.blue-text {
color: blue;
}
</style>
<h2 class="blue-text">兔子</h2>
<p class="blue-text">小兔子是很可爱的动物</p>
在<style>样式声明区域里，创建了一个名为blue-text的class选择器。
blue-text 会选择所有HTML元素的class属性包含 blue-text 的元素
注意：在style样式区域声明里，class需以.开头。而在 HTML 元素里，class属性的前面不能添加.。
设置字体大小
在CSS中，通过 font-size 属性来设置元素中所包含文本的字体大小。
如果一个元素没有显式定义font-size属性，则会自动继承父元素的 font-size属性的计算结果。
预定义关键字
有 xx-small、x-small、small、medium、large、x-large、xx-large，尺寸按顺序依次增大，类似于衣服的尺寸。
绝对尺寸
有px（像素）、pt（点，1pt 相当于 1/72in）、in（英寸）、cm（厘米）、mm（毫米）等。
相对尺寸
有 em、%、rem，它们都是相对于某个参考基准的字体大小，来计算当前字体的大小，只是参考基准不同而已。
h1 {
font-size: 32px;
}
设置元素字体
通过font-family属性，可以设置元素里面的字体样式。
font-family 可以把设置多个字体名称。如果浏览器不支持第一个字体，则会尝试下一个。
设置h2元素的字体为sans-serif，你可以用以下的 CSS 规则：
h2 {
font-family: sans-serif;
}
引入外部字体
除了大多数系统提供的默认字体以外，我们也可以使用自定义字体。
我们可以通过在 CSS 里面设置字体的 URL 来引用。
例如,我们需要引入Lobster字体。
将下代码段放到style标签之前。
<link href="https://fonts.loli.net/css?family=Lobster" rel="stylesheet" type="text/css">
字体名区分大小写，并且如果字体名含有空格，需要用引号括起来。
例如：使用"Open Sans"字体需要添加引号，而Lobster字体则不需要。
调整图片大小
CSS 的width属性和 height属性 可以控制元素的宽度和高度。
<style>
.larger-image {
width: 400px;
height: 400px;
}
</style>
给元素添加边框
可以使用 border 属性将边框样式,颜色,和宽度 一起设置。
如果不设置其中的某个值，也不会出问题，比如border: solid #ff0000; 也是允许的。
<html>
<head>
<style type="text/css">
p {
border:5px solid red;
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
记得在一个元素上可以同时应用多个class，通过使用空格来分隔。
例子： <img class="class1 class2">
使用border-style属性设置边框样式
边框样式属性指定要显示什么样的边界。
除了在 border 属性里面设置边框样式，
还可以使用border-style属性来定义边框的样式
border-style 值
| 属性 | 效果 |
|---|---|
| none | 无边框 |
| dotted | 虚线边框 |
| dashed | 虚线边框 |
| solid | 实线边框 |
| double | 双边框 |
| groove | 凹槽边框 |
| ridge | 垄状边框 |
| insert | 嵌入边框 |
| outset | 外凹边框 |
| hidden | 隐藏边框 |
.img-border {
border-style:dashed;
}
使用border-color属性设置边框颜色
border-color属性用于设置边框的颜色。可以设置的颜色：
- name - 指定颜色的名称，如 “red”
- RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
- Hex - 指定16进制值, 如 “#ff0000”
您还可以设置边框的颜色为 "transparent"(继承父亲)。
注意：
border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
.img-border {
border-style: dashed;
border-color:blue;
}
使用border-width属性设置边框宽度
通过border-width属性为边框指定宽度。
为边框指定宽度有两种方法：
可以指定长度值，比如 2px，
或者使用 关键字 thick 、medium（默认值） 和 thin。
注意：
CSS 没有定义 3 个关键字的具体宽度，
所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，
而另一个用户则分别设置为 3px、2px 和 1px。
使用 border-radius 添加圆角边框
border-radius属性允许你为元素添加圆角边框。
使用 border-radius 制作圆形图片
除像素外，border-radius 属性也支持使用百分比的值。
将.smaller-image 的宽度和高度设置成一致, 当 border-radius:50%; 时得到圆形图片,
给元素添加背景色
background-color属性可以设置元素的背景颜色。
元素的背景是元素的总大小，包括填充和边界（但不包括边距）。
例如:
<style>
.green-background {
background-color: green;
}
</style>
<div class="green-background">设置背景色为绿色</div>
给元素设置ID属性
每一个 HTML 元素都可以具有 id 属性。
id 属性规定 HTML 元素的唯一的 id。
id 属性是唯一的。虽然浏览器不会强制唯一，但这是被广泛认可的。
id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。
例如:
<h2 id="rabbit-photo-app">...</h2>
使用 id 属性设定元素样式
和class一样，也可以使用 id 属性设定元素样式，
并且id不可以重用，只应用于一个元素上。
在 CSS 里，id的优先级要高于class，如果一个元素同时应用了class和id，并设置样式有冲突，会优先应用id的样式。
注意:
在声明 id 的时候，必须在名字前插入#符号。
设置元素边距
所有的 HTML元素基本都是以矩形为基础。
每个 HTML 元素周围的矩形空间由三个重要的属性来控制：
padding：内边距
margin：外边距
border：边框
padding控制着元素内容与border之间的空隙大小。
margin（外边距）属性控制元素的边框与其他元素之间的距离。
margin可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
使用padding、margin设定不同的内边距
方向为顺时针
使用属性选择器设定样式
除了 ID 选择器和 Class 选择器,另外，也还有属性选择器，可以让我们给特定的元素设置样式。
语法:
[属性名 过滤符号 属性值] {}
下面的代码会改变所有元素中包含type属性且值为radio的元素的外边距。
[type='radio'] {
margin: 20px 0px 20px 0px;
}
相对单位和绝对单位
绝对长度单位, 会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，可能会导致一些误差。
相对单位长度，就像em和rem，它们会依赖其他长度的值。
例如, em的大小基于元素的字体的font-size值，
如果你使用em单位来设置font-size值，它的值会跟随父元素的font-size值来改变。
CSS样式表继承
要想了解css样式表的继承，我们先从文档树（HTML DOM）开始。文档树由HTML元素组成。
CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。
不是所有的css属性都会被子类继承，例如border属性。
<style>
p { color:red; }
</style>
<p>
CSS样式表<em>继承特性</em>的演示代码
</p>
在浏览器中p和 em 字体同时变红。
我们并没有指定em的样式，但em继承了它的父亲元素p的样式特性。
样式中的优先级
CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。
CSS 优先规则2："直接样式"比"祖先样式"优先级高。
**CSS 优先规则3：**优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
**CSS 优先规则4：**属性后插有 !important 的属性拥有最高优先级。
**CSS 优先规则5：**第二个声明始终优于第一个声明。
意味着，如果发生冲突，浏览器将会应用最后声明的样式。
Class 选择器的优先级高于继承样式
ID 选择器优先级高于 Class 选择器
内联样式(标签内的style)的优先级高于 ID 选择器
Important 的优先级最高
p {
color: red !important;
}
使用十六进制设置颜色
在 CSS 里面，我们可以用使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R），绿（G），蓝（B）。
例如，#000000代表着黑色，同时也是最小的值。
CSS 十六进制编码颜色也支持缩写的方法。
例如，红色的#FF0000十六进制编码可以缩写成#F00。
使用 RGB 值设置颜色
通过使用 RGB 值设置背景颜色为橘色的例子：
body {
background-color: rgb(255, 165, 0);
}
使用 CSS 变量更改多个元素样式
var() 函数用于插入自定义的属性值。
var(custom-property-name, value)
custom-property-name 是必需的, 自定义属性的名称，必需以 – 开头。
value 可选。备用值，在属性不存在的时候使用。
:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
#div2 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
创建一个自定义的 CSS 变量
创建一个 CSS 变量，只需要在变量名前添加两个破折号，并为其赋值
例如：
--penguin-skin: gray;
使用一个自定义的 CSS 变量
创建变量后，CSS 属性可以通过引用变量名来使用它的值。
例如:
background: var(--rabbit-basecolor);
变量不生效时设定默认值
当变量因为某些原因导致变量不生效, 可以设置一个备用值。
示例：
background: var(--penguin-skin, black);
这样，当变量有问题的时候，它会设置背景颜色为黑色。
CSS 变量继承
CSS 变量经常会定义在 :root 元素内，这样就可被所有选择器继承。
:root 是一个 pseudo-class 选择器匹配文档的根选择器，通常指 html 元素。
通过在 :root 里创建变量，变量在全局可用，以及在 style样式的选择器里也生效。
更改特定区域的变量
当你在:root里创建变量时，这些变量的作用域是整个页面。
如果在元素里创建相同的变量，会重写:root变量设置的值。
例如：
:root{
--rabbit-color: red;
}
p {
--rabbit-color: white;
background: var(--rabbit-color);
}
标签：color,前端,元素,笔记,边框,css,border,CSS,属性 来源： https://blog.csdn.net/m0_53155317/article/details/122755816
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。