• CSS 基础知识 属性

    阅读目录

    参考文献

    https://developer.mozilla.org/zh-CN/docs/Web/CSS

    CSS 基础知识

    CSS 指层叠样式表 (Cascading Style Sheets)，针对HTML网页的统一外观样式设计和管理，给网页进行各种装饰，让她变得美观。

    CSS是由 W3C(万维网联盟) 制定的技术标准规范。

    Cascading ：/kæsˈkeɪdɪŋ/（水）倾泻；大量落下；连续传递；串联（cascade 的现在分词）

    主要优点：

    • 美化页面：提供丰富的外观设计能力，丰富
    • 可复用：可以统一管理HTML页面的样式，可复用。
    • CSS3可以实现网页样式、内容分离，并对网页元素实现像素级的样式管理。

    CSS 是怎么工作的？

    下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。

    在这里插入图片描述
    当浏览器遇到无法解析的 CSS 代码会发生什么？
    ——什么也不会干，继续解析下一个CSS样式。

    CSS 的使用

    🔸行内样式：
    在标签的 style 属性上写 css 样式。
    缺点：代码耦合度高，样式不复用，不利于维护，尽量不用。

    🔸内部（内嵌）样式：
    在HTML页面 head 中（其他地方也可以，建议放head头部）定义一个样式style标签，定义css样式，只在当前页面内有效。

    缺点：多个页面之间无法复用。

    🔸外部样式（推荐）：
    外部单独css文件定义样式，在html的head中引入，所有引入了该css文件的页面都会生效。

    <html>
<head>
    <meta charset="utf-8"/>
    <title>css练习HTML预览title>
    
    <link type ="text/css" rel="stylesheet" href="css1.css" />
    
    <style type="text/css">
        pre{
            color:red;
        }
    style>
	<style type="text/css">
        @import "mystyle.css" supports(display: flex);
    style>
head>
<body>
    <div>
        
        <p style="color: blue;">一段p标签文字，使用行内样式stylep>
        <pre>pre标签文本，使用内部样式pre>
        <font>font标签内容font>
    div>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    ❓ 和 @import 的区别？
    都可以用来加载外部css资源文件，不同点：
    在这里插入图片描述

    层叠、优先级和继承

    🔶层叠：

    当应用两条同级别的规则到一个元素时，存在样式冲突，就出现了层叠，这时：后面的样式规则会覆盖前面的。

    🔶优先级：
    选择器优先级：样式的目标越具体优先级越高：行内样式优先级（1000 ）> id（100）> class（10）>标签（1）>通用（0）。

    括号内是权重值，用来决策优先级。

    !important：一个特殊的 CSS语法， 可以用来覆盖所有上面所有优先级计算，包括被层叠覆盖的，使用小心（尽量不用）！border: none !important;

    h1{
	color: green !important;
	color: blue;
}

    • 1
    • 2
    • 3
    • 4

    🔶继承：
    继承也需要在上下文中去理解 。

    一些设置在父元素上的 css 属性是可以被子元素继承的，有些则不能。如一些布局类的（高宽、边距、边框）是不能继承的，一些外观类的（字体、文本样式、颜色）大多可以继承。

    CSS提供了五个特殊的通用属性值用来控制继承，每个 css 属性都接收这些值。

    在这里插入图片描述
    在一些浏览器中，表单元素默认不会继承父级字体样式，需要主动申明字体样式的继承。
    button, input, select, textarea { font-family : inherit; font-size : 100%; }

    @规则

    @ 符号开头的特殊语法规则。

    在这里插入图片描述

    @charset "UTF-8";
@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {  /* 如果不支持grid布局，则使用float布局 */
  div {
    float: right;
  }
}
@supports (--foo: green) {  /* 测试是否支持自定义属性 */
  body {
    color: var(--foo);
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    常见值与单位

    尺寸（长度/大小）

    🔸绝对长度：
    cm：厘米
    px：像素

    🔸相对长度：
    em，父元素字体或自身字体的大小，就是字符大小。

    rem，根元素字体大小，默认16px。如果用em、rem作为单位，建议根元素设置10px，便于计算。

    vh/vw：视窗（浏览器可视窗口）高度、宽度的1%，可以把一些东西做得随用户的视口改变大小。

    🔸百分比：相对于其他值（大多是父元素）的比例。
    字体大小设置百分比，就是相当于父元素字体大小的比例。
    宽度百分比，父元素宽度比例。

    color 颜色值

    RGB 颜色是基于R（red）、G（green）、B（blue）三个颜色通道组合而成，每个颜色通道值0到255，16进制就是00到FF。

    在这里插入图片描述

    渐变色 gradient

    渐变色 gradient（/ˈɡreɪdiənt/ ）是一种特别的 image 数据类型，用于background-image、border-image 的值，实现多种渐变颜色。

    可以设置多组值，逗号隔开，层叠渲染都会生效。

    方向/角度（angle），目的是确定线性渐变的方向，有两种设置方式：

    • 角度（angle，顺时针），沿指针方向渐变。单位deg（degree），默认0度（自下而上）。
    • 方向，关键字 to+ 一个或多个位置（top、bottom、right、left），to right /从左到右/

    颜色值：颜色值color。
    插值位置：可以是%比例，和长度（px），基于方向的渐变插值位置。

    #gcdiv .b1{
	background-image: linear-gradient(red,blue);
}
#gcdiv .b2{
	background-image: linear-gradient(45deg,red,blue);
}
#gcdiv .b3{
	background-image: linear-gradient(to right,red 20px,blue 90%);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    在这里插入图片描述

    🔸径向渐变 radial-gradient()、重复渐变、圆锥渐变

    径向渐变就是基于圆形（或椭圆）区域从中心向外辐射扩散的渐变，从中心点开始。

    重复渐变就是执行多次渐变，以铺满整个区域。

    还有一种锥形渐变 conic-gradient，类似径向渐变，不过是沿着时钟方向旋转渐变。

    radial-gradient(形状/圆心位置 , 颜色 位置% , 颜色 位置% , ... )
conic-gradient(开始角度/圆心位置 , 颜色 位置% , 颜色 位置% , ... )

    • 1
    • 2

    shape：径向渐变的图形形状，ellipse (默认)、circle （圆）
    at position：设置圆心位置（x、y坐标），可用x、坐标值，或方位两种方式：

    • 坐标定位（像素、百分比）：at 0 50%，at 10px 30px
    • 方位定位（top、bottom、right、left、center）：at left top

    from angele：锥形渐变的开始角度
    size：渐变的大小，枚举值。

    #gcdiv .b4{
	background-image: radial-gradient(black 6px,black 10px,white,red)
}
#gcdiv .b5{
	background-image: repeating-linear-gradient(0deg,red 3px,blue 10px)
}
#gcdiv .b6{
	background-image: repeating-radial-gradient(red 3px,blue 10px)
}
#gcdiv .b6{
	background-image: repeating-radial-gradient(at 0%,red 3px,blue 10px);
}
#gcdiv .b7{
	background-image: conic-gradient(at 50%,red,blue,yellowgreen,white);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    在这里插入图片描述

    <style>
.pie{
	width: 200px;height: 200px;
	/* 锥形渐变实现进度环颜色 */
	background-image: conic-gradient(#7870e4 70%,#dce7f3 0) ;
	border-radius: 50%;
	padding: 20px;
	/* 内容居中 */
	display: flex;  align-items: center;
}
.pie p{
	height: 100%; width: 100%; font-size: 2em;
	/* 文字居中 */
	display: flex; justify-content: center; align-items: center;                
	/* 白色圆环 */
	background-color: white;    border-radius: 50%;
}
style>

<div class="pie">
	 <p>70%p>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    在这里插入图片描述

    计算函数 calc() 函数

    calc() ( IE9 计算表达式) 可动态的计算出一个数值。

    可用于长度、角度、时间、百分比、数字的计算。

    支持+加法、-减法、*乘法、/除法。

    注意运算符前后须有空格，否则会无法识别为一个有效的表达式，因为 +- 可能会被认为是正负数。

    width: calc(20% + 100px);
width: calc(100% / 6);
font-size: calc(1em + 1vw);

    • 1
    • 2
    • 3

    CSS变量 --var

    带有前缀 -- 的属性名，比如 --example--name，表示的是带有值的自定义属性()，通过 var() 函数在作用域范围内复用的。

    变量的作用域：取决于其申明的选择器。

    :root {
  --main-bg-color: pink; /*申明css全局属性（变量）*/
	--Hi: 'hello';
  --Name: var(--Hi)',world'; /*字符串变量可以拼接*/
}
body {
  background-color: var(--main-bg-color);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    盒子模型

    如下图，盒子模型就是每一个元素都是一个盒子，盒子有边框 border，有内边距 padding，有外边距 margin，以及盒子内的内容区域content。

    一切皆盒子（box），HTML中的元素就是各种层叠的盒子，CSS的布局就是基于这些盒子。

    在这里插入图片描述
    content：盒子里的内容
    padding：盒子内边距，盒子内容到边框的间距（上右下左，顺时针方向）。
    border：盒子边框，盒子的边框线，包括多个样式属性：线粗细、线样式、颜色、圆角。
    margin：盒子外边距，盒子和其他元素的间距（上右下左）。

    在这里插入图片描述

    ❗注意:

    margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框 border 为止 —— 不会延伸到 margin。

    请记住一个事实，当你使用百分比作为元素外边距或填充的单位时，你将得到一个相同尺寸的外边距或填充。

    ⁉️外边距折叠

    两个外边距（上下）相接的元素，他们的外边距将合并为一个外边距，即最大的那个外边距的大小，而不是二者的外边距之和。

    当然不是绝对的，参考外边距重叠。

    基于块级元素、内联元素的区别，盒子也分为两种：

    • 块级盒子 (block box)
    • 内联盒子 (inline box)

    🔶块级盒子 (block box)

    • 自动换行，宽度默认和父容器一样宽。
    • width、height 有效，内边距、外边距、边框会将盒子周围的元素“推开”。

    🔶内联盒子 (inline box)

    • 盒子不换行，width、height无效，基于元素内容自动设置。
    • 垂直方向的内边距、外边距、边框有效，但不会把其他inline盒子推开。
    • 水平方向的内边距、外边距、边框有效，会把其他inline盒子推开。

    box-sizing 盒模型标准

    完整的盒模型应用于块级盒子，内联盒子只有部分有效。

    盒子模型有两种模式：标准盒模型、代替（IE）盒模型，通过属性 box-sizing 设置（IE8支持切换，之前都只有代替盒模型）。

    在这里插入图片描述

    min/max-content 内容尺寸

    下面个 *-content（）“值”用来设置元素的宽度、高度，是基于盒子的内容来设置盒子尺寸。

    在这里插入图片描述

    <style>
	#d1 p {
		background-color: antiquewhite;
		padding: 3px;
		margin: 5px 0px;
	}
style>
<div id="d1">
	<p style="width:min-content;">标题H2 title：min-contentp>
	<p style="width:max-content;">标题H2 title：max-contentp>
	<p style="width:fit-content;">标题H2 title：fit-contentp>
	<p style="width:auto;">标题H2 title：autop>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    在这里插入图片描述

    min/max-width 尺寸边界

    设置元素高宽的边界。

    在这里插入图片描述

    对于替换元素（图像和视频），他们有自己的大小，这会影响布局，可以通过设置 max-width:100% 来控制其大小。虽然设置width: 100%;也可以控制大小，但会拉伸图片。

    CSS样式属性

    background 背景

    设置元素背景的样式，
    更好的衬托内容。

    在这里插入图片描述

    .dbackg {                
	background: red,no-repeat url(../res/png-0078.png);
	background-color: rgb(76, 16, 189);
	background-image: url(../res/bimg.jpg);
	background-repeat: no-repeat;
	background-size: 100% 40px;
	background-size: cover;
	background-position: top;
	height: 40px;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    在这里插入图片描述

    text 文本样式

    针对文本布局、装饰的样式类属性。

    在这里插入图片描述

    <style>
	.textf {
		color: rgb(182, 12, 12);
		text-align: left;
		text-decoration: underline overline line-through;
		text-decoration-color: blue;
		text-indent: 2em;
		/*缩进2个字符*/
		/*文字溢出...*/
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
style>
<div class="textf">
<p>
	有的人本来幸福着，却看起来很烦恼；有的人本来该烦恼，却看起来很幸福。
p>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    在这里插入图片描述

    <div style="width: 100px;">
<p class="textf">
	有的人本来幸福着，却看起来很烦恼；有的人本来该烦恼，却看起来很幸福。
p>
div>

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述
    🔸文本垂直居中的几个方法

    p 标签的文本垂直居中

    #tdiv p{
	background-color: aquamarine; height: 60px;
}
/* 方法1：height=line-height，针对单行的文本。 */
#tdiv .p1 {                
	line-height: 60px;
}
/* 方法2：使用table-cell布局，然后垂直居中。表格单元格的内容可以垂直居中 */
#tdiv .p2 {
	line-height: 1.5em;
	display: table-cell;
	vertical-align: middle;
}
/* 方法3：flex布局 */
#tdiv .p3 {
	display: flex;
	align-items: center;
}
/* 方法4：利用伪元素::before */
#tdiv .p4::before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    font 文字样式

    针对文字的样式属性。

    在这里插入图片描述

    .fsum {
	color: red;
	color: #ff0000;
	color: rgb(255, 0, 0);
	color: rgba(255, 0, 0, 1);
	font-family: Helvetica, Tahoma, Arial,"Microsoft YaHei","微软雅黑",STXihei,"华文细黑", Heiti, "黑体", SimSun, "宋体", sans-serif;
	font-size: 20px;
	font-style: oblique;
	font-style: italic;
	font-weight: 600;
	font-weight: bold;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    用 @font-face 从网络上下载字体。

    @font-face {
	font-family: "myFont";
	src: url("myFont.ttf");
}
html {
	font-family: "myFont", "Bitstream Vera Serif", serif;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face

    在这里插入图片描述

    <html>
<head>
  <title>Web Font Sampletitle>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("https://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }

    body { font-family: "Bitstream Vera Serif Bold", serif }
  style>
head>
<body>
  This is Bitstream Vera Serif Bold.
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    表格样式

    针对表格元素的样式，css 中常用伪类选择器 （:first-child、:nth-of-type 等）来设置行列的样式、隔行换色，详见选择器章节。

    在这里插入图片描述

    .table{
		table-layout: fixed;
		width: 100%;
		border: 2px black solid;
		border-spacing: 5px 3px;
}
/* 单元格内容溢出样式 */
.table td{
		text-overflow:ellipsis;
		overflow: hidden;
		white-space: nowrap;
		border: 0px;
}
/* 单元格列宽 */
.table tr:first-child th:nth-child(1){
		width: 140px;
}
.table tr:first-child th:nth-child(2){
		width: 150px;
}
.table tr:first-child th:nth-child(3){
		width: 100%;
}
.table tr:nth-child(2) td:nth-child(1){
		height: 50px;
		vertical-align: top;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    列表样式 ol、ul、dl

    列表类型的元素包括 ol、ul、dl，下面是列表特有的属性。
    在这里插入图片描述

    #ldiv2 ul>li{
	list-style:none outside url();
	/* 用背景图实现符号效果 */
	background: url(../res/sk\ \(17\).png) no-repeat;
	background-size: 1.3em;
	background-position: 0 0;
	padding-left: 1.5em;
	line-height: 1.8em;
}
#ldiv2 ol li{
	list-style-type: lower-alpha;
	line-height: 1.5em;
}  

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    在这里插入图片描述

  • 相关阅读:
    【无标题】
    Linux与BL31之间添加SMC实现随机数获取
    HarmonyOS 4.0 实况窗上线！支付宝实现医疗场景智能提醒
    JAVA线程池
    Java学习笔记（三）
    2022年，软件测试已经不吃香了吗？
    Java 类和对象
    安卓开发-基础知识补习12
    笔试总结（一）
    MATLAB算法实战应用案例精讲-【目标检测】YOLOV8
  • 原文地址：https://blog.csdn.net/weiguang102/article/details/127363503