CSS学习笔记
本文最后更新于 2023-08-04，文章内容可能已经过时。
引入：
- 外部样式：
<link rel="stylesheet" href="style.css" />
- 内部样式表：
<head>
<style>...<style>
</head>
- 内嵌样式：
<p style="color:red;margin-left:20px"></p>
- 浏览器私有属性：
chrome、safari: -webkit-;
firefox: -moz-;
IE:-ms-;
opera: -o-;
语法规则：
margin:[<length>|<percentage>|auto]{1,4}
/*
<length>:基本元素；
`|`:组合符号；
{1,4}:数量符号；
*/
基本元素：
- 关键字： auto、solid、bold……
- 组合符号：
空格：表示必须出现，且顺去固定；
&&：必须出现，但顺序不固定；
||：至少出现一个，但顺序随意；
|：只能出现一个；
[]：分组；
+：可出现一次或多次；
？：可出现也可不出现；
{}：可以出现的次数；{2，4}：最少出现2次，最多出现4此；
*：可出现0次，1次或多次；
#：需出现1次或多次，需要用,隔开；
规则语法：
@media：响应式布局时监听屏幕尺寸；
@keyframs：描述CSS动画帧；
@font-face：引入外部字体；
@import/@charset/@name space/@page/@supports/@document
选择器：
简单选择器：
标签选择器： tag{ }
类选择器：.className{ }
id选择器： #id{ }
通配符： *{ }
属性选择器： [disabled]{ }/[type=button]{ }
[class~="sports"]{ } // 类名中包含sports,且以空格隔开；
[lang|="en"]{ } // 类名中包含en，且以“-”隔开；
[href^="#"]{ } // href属性值以 # 开头的元素；
[href$="pdf"]{ } // href属性值以 pdf 结尾的元素；
[here*="lady"]{ } // href属性值包含lady的元素；
伪类选择器：
a:link{ } // 选中具有href的a标签样式；
a:visited{ } // 已访问过的链接的样式；
a:hover{ } // 当鼠标移上时的样式；
a:active{ } // 当鼠标点击时的样式；
:enabled{ } :disabled{ } :chedcked{ }
li:first-child{ } li:last-child{ } // 元素首项、末项
li:nth-child(even){ } // 选中偶数项
li:nth-child(3n+1){ } // 选中正序第1、4、7。。。项
li:nth-last-child(3n+1){ } // 选中倒序第1、4、7。。。项
li: only-child{ } // 选中作为唯一子元素的的li标签
dd:first-of-type{ } // 选中第一个dd类型的元素
dd:last-of-type{ } // 选中最后一个；
dd:nth-of-type{ }
span: only-of-type{ } // 选中同级元素只有一个span的<span>
:empty{ } :root{ } :not(){ }
:target(){ } // 选择器会突出显示当前活动的HTML锚;
组合选择器：
可以将简单选择器进行组合，如 img[src$=“jpg”]{ };
伪元素选择器：
::first-letter{ }; /* 选择头字母；*/
::first-line{ }; /* 选择首行；*/
/* 插入内容；*/
::before{content:"before";}
::after{content:"after";}
/* 应用于被用户选中的内容 */
::selection{ }
后代选择器：
<div class="main">
<h2>111</h2>
<div>
<h2>222</h2>
<p>333</p>
</div>
</div>
.main h2{ } // 选中111、222;
.main>h2{ } // 选中111
兄弟选择器：
<div class="main">
<h2>111</h2>
<p>222</p>
<p>333</p>
</div>
h2+p{ } // 选中与h2相邻的p：222；
h2~p{ } // 选中h2同级之后的所有p:222,333;
选择器分组：
可以使用 ,讲选择器合并：
h1,h2,h3{ };
CSS选择器优先级：
样式类型 权重 a：行内样式 1000 b：id选择器 100 c：类、伪类和属性选择器 10 d：标签和伪元素选择器 1
value值 = a 1000 + b 100 + c* 10+ d ;
# 文本与颜色： ## 字体大小1、当value不等时，value值越大，则优先权更大；不同属性则合并，相同属性覆盖；
2、当value相等时，相同属性，后面的覆盖前面；不同属性合并；改变CSS优先级：
1、通过改变CSS里的前后顺序；2、提升选择器的value值；
3、加入 !important. （优先使用1、2）；
font-size:<length>|<percentage>|<absolute-size>|<relative-size>
<length>: 例如14px;<percentage>: 例如200%/2em(2em/200% ：表示为父级字体大小的2倍)；<absolute-size>:例如small、large;<relative-size>: 例如smaller、larger;
字体
font-family:[<family-name>|<generic-family>]#
字体族名称(family-name)：是具体的字体名称, “Microsoft YaHei”
类族名称(generic-family)：是字体类型名称而具体的字体则由浏览器决定,serif/sans-serif/cursive/fantasy/monospace等
- font-family中设置的字体不会被浏览器自动下载, 字体是否可用则完全依靠用户电脑是否已安装该字体库而已；
- 属性值必须以类族名称(generic-family)结尾确保字体会以正确的形式解析渲染；
- 类族名称(generic-family)后的字体族名称(family-name)不会生效;
字体粗细；
font-weight:normal|bold|bolder|lighter|100|200...
斜体；
font-style:normal|italic|oblique
行高；
line-height:normal|<number>|<length>|<percentage>
设置linge-height:300%与设置line-height:3的区别：
line-height：两行基线的间隔；
设置为300%时，直接以父元素的字体大小计算后继承，不管子元素自身的字体大小；既为父元素字体大小的3倍；（先计算后继承，为静态值）
设置为3时，则是动态的根据子元素自身的字体大小乘以3；（先继承后计算，为动态值，会自适应）；
利用line-height让多行文本垂直居中：
在文本的后面添加个空白元素，设置其line-height和父元素高度一致，并在文本上设置vertical-align:middle;
字体组合样式：
// font:italic bolid 20px/1.5 arial,serif;
font:[<font-style>||<font-weight>]?<font-size>[/<line-height>]?<font-family>
字体颜色：
color:red;
color:#ff0000;
color:rgb(255,0,0);
color:rgba(255.0.0.1)
对齐：
水平对齐：左对齐/右对齐/居中/两端对齐
text-align:left|right|center|justify
垂直对齐：
vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>|<length>
文本缩进：
text-indent:<length>|<pencentage>
换行，空格，自动换行：
white-space:normal|nowrap|pre|pre-wrap|pre-line
normal： 换行符、空格合并，自动换行；
nowrap：换行符、空格合并，不自动换行；
pre：换行符、空格保留，不自动换行；
pre-wrap：换行符、空格保留，自动换行；
pre-line：换行符保留、空格/tab合并，自动换行；
单词换行：
word-wrap:normal|break-word;
word-break:normal|keep-all|break-all;
文字阴影：
text-shadow:none|[<length>{2,3}&&<color>?]#;
text-decoration:none|[underline||overline||line-through];
隐藏文本，且用省略号显示：
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
定义鼠标形状：
// 自定义|自适应|鼠标|消失|疑问|点击|放大|缩小|移动
cursor:[<url>]*,[auto|default|none|help|pointer|zoom-in|zoom-out|move];
强制继承： inherit;
盒模型：
// min-width,max-width用法一致；
width:<length>|<percentage>|auto|inherit;
// min-width,max-width用法一致；
height:<length>|<percentage>|auto|inherit;
// 顺序为 上，右，下，左
padding:[<length>|<percentage>]{1,4};
margin:[<length>|<percentage>|auto]{1,4};
边框：
border:[<border-width>||<border-style>||<border-color>];
border-width:[<length>]{1,4};
// 实线|虚线|点
border-style:[solid|dashed|dotted]{1,4};
border-color:[<color>|transparent]{1,4};
圆角边框：
border-radius:[<length>|<percentage>]{1,4}[/[<length>|<pencentage>]{1,4}]?
// 水平半径 / 垂直半径
border-radius: 0px 5px 10px 15px/20px 15px 10px 5px;
border-top-left-radius:5px;
设置超出部分的样式：
// overflow-x|overflow-y;
// 可见|隐藏|出现滚动条|自动显隐滚动条；
overflow:visible|hidden|scroll|auto;
切换盒子模型模式：
box-sizing:content-box|border-box|inherit;
盒阴影：
box-shadow:none|<shadow>[,<shadow>]*
<shadow>:inset?&&<length>{2,4}&&<color>?
//水平偏移 垂直偏移 模糊半径 阴影大小 阴影颜色；
box-shadow:4px 6px 3px 3px red;
// 内阴影
box-shadow:inset 0px 0px 5px red;
轮廓：
outline:[<out-width>||<outline-style>||<outline-color>];
outline-width:<length>;
outline-style:solid|dashed|dotted;
outline-color:<color>|invert;
与border值较为相似，但有两点区别：
1、border占据空间，而outline并不占据空间；
2、outline在border的外围；
背景(位于盒模型的最底层)：
background-color:<color>；
background-image:<bg-image>[,<bg-image>]*
<bg-image> :<image>|none;
Tips:
1、绝对路径：“http://…”;
2、相对路径，相对于根目录，CSS文件是相对于CSS文件，JS文件是相对于HTML的文件，…代表上一级：“…/images/x.png”
背景平铺方式：
background-repeat:<repeat-style>[,>repeat-style>]*
// X方向重复|Y方向重复|重复|留空隙平铺|伸缩铺满
<repeat-style>:repeat-x|repeat-y|[repeat|space|round|no-repeat]{1,2};
// x轴不重复，y轴重复
background-repeat:no-repeat repeat;
背景固定方式：
background-attachment:<attachment>[,<attachment>]*
// 背景随滚动而滚动|背景固定|继承
<attachment>:scroll|fixed|inherit;
背景图片位置：
background-position:<position>[,<position>]*
<position>:left|center|right|top|bottom|<percentage>|<length>
background-position:10px 20px; 表示x轴偏移10px,y轴偏移20px；
background-position:20% 50%; 表示相对于父元素的定位；
background-position: center center; 图片居中；
background-position:right; 水平靠右，垂直居中；
background-position:right 10px top 20px; 与右边偏10px ,与上边偏20px；
常用的背景属性：
background:url("x.png" ) no-repeat 10px 10px;
- 感谢你赐予我前进的力量
-
微信 
支付宝
