文章目录
selector
selector {property: value; property: value;}
- 注释仅支持/**/,以下仅为了方便
- 块级标签:
div, h1/hr, ul/ol/dl, p/pre, form, table, blockquote/marquee;块级元素才有width/height概念(若不指定宽高,则为父亲100%)! - 优先级(多个选择器给元素设置属性): id选择器 > 类选择器(属性选择器,伪类选择器) > 标签选择器(伪元素选择器)
- 层叠性: 分别统计每个
selector的上面三元组的个数,然后排序,排序高的使用;相同的,使用代码上后面一个
c1.c2 {} /* 同时含有c1与c2类！*/
/* h1 || h2的所有后代p || h3里面的所有1级p元素 || h4的第1个兄弟 || 含有id1属性及class=a属性的div */
h1, h2 p, h3>p, h4+p, div[class="a"][id1] {
color: red !important; /* important:打破优先级,若有其他设置与本条冲突,则优先使用;不会被继承! */
font-family:"consolas, sans serif";
}
#idname {} /* <p id="idname">..</p>; 与html一起工作时,大小写敏感! */
[attr] {} /* 带有attr属性的所有元素 */
[attr=value] {} /* 属性值='value' */
[attr~=value]{} /* 由空格分隔的多个属性至少匹配一个.类似于'*=' */
[attr|=value]{} /* 属性值以'value-'开头 */
[attr^=value]{} /* 属性值以'value'开头 */
[attr$="val"]{} /* 属性值以'val'结尾 */
[attr*=value]{} /* 属性值以包含'value'子串 */
/* functions */
:not(p) /* 不是p标签 */
a :link /* 链接访问之前; visited; hover; active(点击但不松手时) */
input :focus /* 获得焦点的input元素 */
div :only-child /* 仅有一个子元素的所有 */
div :empty /* tag里面不包含任何内容 */
div :target /* toc切换加外边框 */
div :enabled /* disabled/checked */
div ::selection
div li :nth-last-of-type /* 最后一个li元素 */
div#id1 :nth-child(2n) /* 所有偶数行,2n-1:奇数行; -n+5:前5个; 3n:3的倍数; 注意:名称有些误解,表示的是同级元素! */
div:nth-of-type(2) /* 第2个类型为div的元素 */
xx :nth-last-child(n) /* 倒数第几个. 单独写n表示每一个 */
xx :first-child/of-type
xx :last-child/of-type
p ::first-line/letter
.box :before {
content: "box多出来的内容,可以选择"
}
/* :visited(点击链接后)/:active(点击连接时)/:focus(通过键盘选择或已经被点击过都会获取焦点) */
.box :hover:after{
color: red; /* 要添加内容使用content:"这里面是伪元素,界面上选中不了的" */
}
demos
<head>
<!-- 会并行下载该文件,不会停止对DOM的解析 -->
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" />
</head>
{
// top right bottom(>0表元素或块的下边沿相对于position抬高多少) left
// 下面这个写法表示水平居中(auto表水平自动),注意此时该盒子必须具有width(否则独占整行); float的盒子该设置无法居中!
// 注意: 嵌套的div/p,若外层div无border,则内层的margin-top/bottom会转移给外层div使用,表现怪异! 故:--->
// margin本质上是描述兄弟之间的距离!父子之间的距离应该使用padding来描述!!!
margin: 0 auto; // 使块居中(上下+左右); top right bottom left,缺少一个则最后一个对称相补; 若仅提供一个值则其他值全部由top补齐.
// 解决办法: 父元素添加'overflow: hidden' 或 'position: absolute;' 或 给父元素添加有效的border/padding属性 或 子元素添加'float: left'
padding: 1em 2px;
min-width: 20px;
width: calc(100% - 2*2px); //
// 如果是一段文本,则表示这段文字里最长的单词; max-content:一直不换行!
// flex中,若元素总宽度超过了box宽度,则每个元素的宽度就是min-content
width: min-content;
// flex: css3标准,IE10仅部分支持! https://www.bilibili.com/video/BV1A44y1Z7Bp
// flex盒子是具有默认宽度的(当前viewport宽度),如果元素(默认每个都是min-content)总宽度超过了它,则元素不会换行,会冲破边界!
// flex盒子元素也可以强制指定width多宽!
// grow shrink basis; 默认值('0 1 auto' == initial, auto == 1 == '1 1 auto', none == '0 0 auto')
// grow: 如果box宽度大鱼items总和,则每一个item增加宽度x,满足: n*(flex-basis + flex-grow*x) = box-width; 一般配合nth-child()来单独控制该item是其宽度的几倍!
// basis: 默认auto(item的min-content宽度),可设置固定的item宽度
flex: 1; // == 1 1 auto
// 默认值; column:从上到下垂直排列; row-reverse:从右至左排列子元素
flex-direction: row;
// 将内联标签变为块级标签; inline:变为内联标签(不接受padding的设置,==span) inline-block:内敛但可设置margin,width这些属性 none:delete元素布局也没有了
display: block/flex;
// https://www.runoob.com/cssref/css3-pr-justify-content.html
// 主轴对齐方式; space-bewteen, space-evenly
justify-content: space-around;
// 纵轴对齐方式
// stretch:统一成最大哪个元素的高度,默认值
// flex-start: 交叉轴的起点对齐; flex-end; flex-center
// baseline: 每个item中第一行文字的基线对齐
align-items: baseline;
// https://www.freecodecamp.org/news/css-positioning-position-absolute-and-relative
// 相对/绝对/固定定位都可以使用z-index值!
// sticky: 只能在最近的具有'overflow:scroll'的父容器中使用:滚动条下滑动时,它也下滑.但滑到上方无空间时,就被顶(sticky)在了viewport.此时它不会挤占下方元素的空间,会漂浮在最顶层.
// fixed: 相对于浏览器窗口,亦不受滚动条影响(背景图用的比较多)!
// 参考点要参考已经定位的最近的祖先元素,无时html!
// 完全脱离了正常的文档流.它的坐标系参考html. 如果还是想已parent作为参考系呢? --> 把parent-position设为relative:(relative-absolute)!
// 注意: 与(static-relative:常用组合)的区别: 诞生点是否脱标:是否可以被别人占用!
// 注意: 绝对定位的儿子,无视参考的那个祖先盒子的padding,即还是以祖先的border作为参考点!
// absolute: 会跟随滚动条滚动. 它的位置会被正常的文档流挤走.
// static: 默认值!此时,left/right/top/bottom/clip无效(无坐标系)! 如果此时想微调下某个元素的位置,使用relative! relative是相对于父元素static而言的移动!
// relative: 长用来微调. 以其本身位置,其真实位置还在老家,只不过是影子过去了(定位未脱标:别人不会把它的位置挤走)!
position: relative;
right: 0; // 注意: 非0值必须加单位!
bottom: 0; // bottom定位时,参考点在首屏左下角.top(页面的左上角)
// ----------------- border
// 整个网页的最大盒子是<document>,<body>是<document>的儿子.<body>默认的margin大小是8px.
border: 1px solid red; height:80% // 如果上方有些'border-left'此处会覆盖掉它(一般都是写在大属性下方来覆盖)
border-radius: 8px 20px; // 左上角->右上->顺时针; 8px/6p:水平半径,垂直半径!
border-shadow: 0 1px 0 .., inset 0 1px 0 rgba(0,0,0,.3);
border-style: dotted; // none(default), dashed, solid, double, groove(浅槽), ridge(脊线), inset(凹陷), outset(凸起)
border-width: thin; // medium(default), thick, length
border-color: red;
border-top-width: 2px; // border-top-style, border-top-color, border-top; border-bottom..border-left..border-right
border-collapse: collapse; // 否则每一个table,th,td都有一个边框就有两个边框了
box-sizing: border-box; // padding+border的值不会影响元素的高度,相当于把他们都算在content. 默认是content-box;
// ----------------- text
// 文字的样式属性都具有继承性
color: gray; // CSS规范定义了17个颜色名
mix-blend-mode: difference; // 若背景时图片的话可能比较合适
text-align: justify; // 文本对齐方式, 两端对齐, left, right, center;也可居中img!
line-height: 1.2em; // normal(default), 一般用来居中(设置为height数值); 可作用于p. 行高/字号一般是偶数(保证能被2整除)
text-decoration: underline; // none(缺省值,也可用来去掉链接的下划线), overline, line-through
text-indent: 2em; // 具有继承属性
letter-spacing: normal;
word-spacing: 1cm;
text-transform: uppercase; // 所有文字转换为大写; lowercase,capitalize,none
text-shadow: 2px -2px 2px #ccc; // x-offset y-offset blur color
vertical-align: middle; // 行级元素(inline,inline-block,td)的垂直对齐方式
vertical-align: baseline;
// visiable(默认值,显示多余的内容,不剪切); auto(溢出时有滚动条); scroll:win始终显示滚动条,mac同auto;
// 如果div包裹了一个img,css限定div的width/height,则超出的部分默认会显示出来,好像被撑开了,此时可配合该属性!
overflow: hidden;
box-shadow: 2px 2px 2px 2px #666; // x-offset y-offset blur [spread] color
background: color url(image) pos-x pos-y repeat contain, blue ...
background-color: #99ff00; // default:transparent, blue, rgba(25%,35%,45%,.5)
background-image: url(../image/demo.jpg); // 必须使用url(),不能使用双引号!
background-image: linear-gradient(to right,red,blue) // CSS3; 默认不加方向是中心到四周; 0deg:↑ 90deg:→ 'at top':中心点在最上方中心
background-size: cover // 使img填满(保证长宽比,等比例放大,裁切),contain:全部显示,等比例缩小,其他地方留白; 8px 6px; 50%; 100% auto;
background-repeat: repeat-x; // repeat-y, no-repeat; 不指定时即默认(平铺满): repeat-x + repeat+y
background-position: 50% 50%; // center top; 以图片左上角为操作点!
background-attachment: fixed; // scroll(default:与滚动条一起滚动)
transition: bottom 2s linear 0s; // bottom位置变化的动画(或transform表变换下面的操作),线性2s,延迟0s; 后俩默认可省略!
transform: scale(x,y); // 仅写一个表等比列缩放; 并不会把兄弟元素挤走!
transform: rotate(45deg); // 顺时针
transform: translate(-50%,-50%); // 水平平移,垂直平移; 也有相应的3D版本!
transform-origin: center center; // 操作的中心点:left(0) center(50%:default) right(100%); top(0) center bottom
transform: rotateX(45deg); // 3d旋转,对着x轴箭头方向看,顺时针旋转; 注意:z轴箭头是朝向屏幕外的!
list-style-type: upper-roman; // none,disc,circle,square,decimal,decimal-leading-zero,lower-roman,upper-roman,lower-alpha,upper-alpha,lower-greek,upper-greek,hebrew...
list-style-image: url(img/2.gif); // 注意:url括号里面不加引号!
clip: rect(0,2em,6em,0); // 右下个裁剪2em,6em
visibility: visible; // hidden(仍然会影响元素的布局), collapse, inherit
z-index: 8; // 值越高离读者越近, auto(default)
content: ""; // 由css生成的html内容
cursor: pointer; // default,hand,move,help,text,wait,w-resize...
}
fonts
https://www.iconfont.cn/
http://www.zhaozi.cn/
https://github.com/zenozeng/fonts.css
https://github.com/wordshub/free-font
http://zenozeng.github.io/Free-Chinese-Fonts/
ttf: True Type Font,raw格式. IE9,Firefox,Chrome,Safari,Operaotf: Open Type Font,内置在ttf之上. Firefox,Chrome,Safari,Operawoff: Web Open Font Format,压缩版本. IE9,Firefox,Chrome,Safari,Opera衬线体: 宋体,楷体,TimesNewRoman
目前衬线体已经很少使用(纸质出版物),非衬线体更符合现代审美(现代设计师很少使用宋体)
https://zhuanlan.zhihu.com/p/139652407?utm_id=0
@font-face {
// 一般会先声明英文字体,中文字体靠后;字体名称是中文时也应该添加引号(单双引号都行)
// Mac/Win一般都会自带Tahoma(比后者清晰些)+Arial字体,而Mac的Helvetica更加好看,故放在开头!
// PingFang为Mac转为中文用户推出的字体,'Hiragino Sans GB'(冬青黑体)+'Heiti SC'也是为了照顾mac用户.
// Yahei一般Win自带. STXihei+SimHei为了照顾旧系统. 文泉驿微米黑为了照顾Linux用户
// sans-serif为最后兜底的无衬线字体!
font-family: Helvetica, Tahoma, Arial, "Microsoft Yahei", "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", STXihei, SimHei, "WenQuanYi Micro Hei", sans-serif;
src: url('font/webfont.eot'); /* IE9 */
src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/webfont.woff') format('woff'), /* chrome、firefox */
url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
.webfont{ // webfont为自声明字体!
font-family: "webfont" !important;
font-size: 16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
font-family: Arial,'New York'; // 当Arial字体不存在的时候使用后面的
font-size: 20px; // 1em(==16px,default), 80%, larger, xx-larger(特大号)
font-weight: bold; // normal(400),bold(700),最细的是100,最粗的900. 注意:并不是所有字体都支持所有级别调节(如微软雅黑只支持400/700,Android类似)!
font-style: italic; // obolique(类似italic), normal(default)
font-variant: small-caps; // 小的大小字母(比正常的大写字母矮一些), normal(default)
font-stretch: wider; // default:normal, narrow..浏览器可能不支持
SASS
Syntactically Awesome Stylesheets
- 兼容css3, 变量,嵌套,混合,函数,控制指令
- 若仅需要导入scss文件,但又不希望将其编译为css.只需给文件命名为:
_name.scss; 但导入时无需添加’_’!
相当于把一个sass文件分开了编写,那些倍分开的子部分使用@import引入!
$version: "1.2.3";
// this comment will not appear in css output. '#':插值~宏替换,同时会去掉字符串两边的引号
/* this comment will appear in the css output, version: #{$version} */
#main {
// #{v}: 若v为null则会插入空串
$var: "1.2.#{1+2}" !global !default; // global修饰提升变量为全局作用域; default:若之前已经赋值过了则忽略该句!
&-sidebar { // #main-sidebar
a {
font: {
weight: bold; // <==> font-weight: bold;
family: sans- + "serif"; // sans-serif; "sans-"+serif:"sans-serif"
}
&:hover { // #main a:hover
text-decoration: none;
}
}
.error {
border: 1px #f00;
}
.serious-error { // 本特性仅仅是在error特性基础上添加了特性. 为了避免维护负担,此处使用继承!
@extend .error; // 可继承多个,后写的优先级高; 注意:被继承的只能是一个selector!
border-width: 3px;
}
}
}
// ~inline-block;浮动的元素相互依靠(块级元素不再独占一行,若未设置width则默认为内容宽度),如果用在非块级元素,也可增设宽高.
// 注意: 有高度的盒子才能关住它里面元素的浮动!否则应添加'clear: both;'
// 注意: 无高度的盒子是不能够被浮动的儿子撑出高度的.不过,给盒子增加'overflow: hidden;'打破前面的规则.被撑起来的box也自动具有block属性了!
// 现代css中已经很少使用
float: left;
