前端之CSS初识
figure:last-child { margin-bottom: 0.5rem; }
#write ol, #write ul { position: relative; }
img { max-width: 100%; vertical-align: middle; }
button, input, select, textarea { color: inherit; font: inherit; }
input[type="checkbox"], input[type="radio"] { line-height: normal; padding: 0px; }
*, ::after, ::before { box-sizing: border-box; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p, #write pre { width: inherit; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p { position: relative; }
p { line-height: inherit; }
h1, h2, h3, h4, h5, h6 { break-after: avoid-page; break-inside: avoid; orphans: 2; }
p { orphans: 4; }
h1 { font-size: 2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }
.md-math-block, .md-rawblock, h1, h2, h3, h4, h5, h6, p { margin-top: 1rem; margin-bottom: 1rem; }
.hidden { display: none; }
.md-blockmeta { color: rgb(204, 204, 204); font-weight: 700; font-style: italic; }
a { cursor: pointer; }
sup.md-footnote { padding: 2px 4px; background-color: rgba(238, 238, 238, 0.7); color: rgb(85, 85, 85); border-radius: 4px; cursor: pointer; }
sup.md-footnote a, sup.md-footnote a:hover { color: inherit; text-transform: inherit; text-decoration: inherit; }
#write input[type="checkbox"] { cursor: pointer; width: inherit; height: inherit; }
figure { overflow-x: auto; margin: 1.2em 0px; max-width: calc(100% + 16px); padding: 0px; }
figure > table { margin: 0px !important; }
tr { break-inside: avoid; break-after: auto; }
thead { display: table-header-group; }
table { border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: auto; break-inside: auto; text-align: left; }
table.md-table td { min-width: 32px; }
.CodeMirror-gutters { border-right: 0px; background-color: inherit; }
.CodeMirror-linenumber { user-select: none; }
.CodeMirror { text-align: left; }
.CodeMirror-placeholder { opacity: 0.3; }
.CodeMirror pre { padding: 0px 4px; }
.CodeMirror-lines { padding: 0px; }
div.hr:focus { cursor: none; }
#write pre { white-space: pre-wrap; }
#write.fences-no-line-wrapping pre { white-space: pre; }
#write pre.ty-contain-cm { white-space: normal; }
.CodeMirror-gutters { margin-right: 4px; }
.md-fences { font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; overflow: visible; white-space: pre; background: inherit; position: relative !important; }
.md-diagram-panel { width: 100%; margin-top: 10px; text-align: center; padding-top: 0px; padding-bottom: 8px; overflow-x: auto; }
#write .md-fences.mock-cm { white-space: pre-wrap; }
.md-fences.md-fences-with-lineno { padding-left: 0px; }
#write.fences-no-line-wrapping .md-fences.mock-cm { white-space: pre; overflow-x: auto; }
.md-fences.mock-cm.md-fences-with-lineno { padding-left: 8px; }
.CodeMirror-line, twitterwidget { break-inside: avoid; }
.footnotes { opacity: 0.8; font-size: 0.9rem; margin-top: 1em; margin-bottom: 1em; }
.footnotes + .footnotes { margin-top: 0px; }
.md-reset { margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: top; background: 0px 0px; text-decoration: none; text-shadow: none; float: none; position: static; width: auto; height: auto; white-space: nowrap; cursor: inherit; -webkit-tap-highlight-color: transparent; line-height: normal; font-weight: 400; text-align: left; box-sizing: content-box; direction: ltr; }
li div { padding-top: 0px; }
blockquote { margin: 1rem 0px; }
li .mathjax-block, li p { margin: 0.5rem 0px; }
li { margin: 0px; position: relative; }
blockquote > :last-child { margin-bottom: 0px; }
blockquote > :first-child, li > :first-child { margin-top: 0px; }
.footnotes-area { color: rgb(136, 136, 136); margin-top: 0.714rem; padding-bottom: 0.143rem; white-space: normal; }
#write .footnote-line { white-space: pre-wrap; }
@media print {
body, html { border: 1px solid transparent; height: 99%; break-after: avoid; break-before: avoid; }
#write { margin-top: 0px; padding-top: 0px; border-color: transparent !important; }
.typora-export * { -webkit-print-color-adjust: exact; }
html.blink-to-pdf { font-size: 13px; }
.typora-export #write { padding-left: 32px; padding-right: 32px; padding-bottom: 0px; break-after: avoid; }
.typora-export #write::after { height: 0px; }
}
.footnote-line { margin-top: 0.714em; font-size: 0.7em; }
a img, img a { cursor: pointer; }
pre.md-meta-block { font-size: 0.8rem; min-height: 0.8rem; white-space: pre-wrap; background: rgb(204, 204, 204); display: block; overflow-x: hidden; }
p > .md-image:only-child:not(.md-img-error) img, p > img:only-child { display: block; margin: auto; }
p > .md-image:only-child { display: inline-block; width: 100%; }
#write .MathJax_Display { margin: 0.8em 0px 0px; }
.md-math-block { width: 100%; }
.md-math-block:not(:empty)::after { display: none; }
[contenteditable="true"]:active, [contenteditable="true"]:focus { outline: 0px; box-shadow: none; }
.md-task-list-item { position: relative; list-style-type: none; }
.task-list-item.md-task-list-item { padding-left: 0px; }
.md-task-list-item > input { position: absolute; top: 0px; left: 0px; margin-left: -1.2em; margin-top: calc(1em - 10px); border: none; }
.math { font-size: 1rem; }
.md-toc { min-height: 3.58rem; position: relative; font-size: 0.9rem; border-radius: 10px; }
.md-toc-content { position: relative; margin-left: 0px; }
.md-toc-content::after, .md-toc::after { display: none; }
.md-toc-item { display: block; color: rgb(65, 131, 196); }
.md-toc-item a { text-decoration: none; }
.md-toc-inner:hover { text-decoration: underline; }
.md-toc-inner { display: inline-block; cursor: pointer; }
.md-toc-h1 .md-toc-inner { margin-left: 0px; font-weight: 700; }
.md-toc-h2 .md-toc-inner { margin-left: 2em; }
.md-toc-h3 .md-toc-inner { margin-left: 4em; }
.md-toc-h4 .md-toc-inner { margin-left: 6em; }
.md-toc-h5 .md-toc-inner { margin-left: 8em; }
.md-toc-h6 .md-toc-inner { margin-left: 10em; }
@media screen and (max-width: 48em) {
.md-toc-h3 .md-toc-inner { margin-left: 3.5em; }
.md-toc-h4 .md-toc-inner { margin-left: 5em; }
.md-toc-h5 .md-toc-inner { margin-left: 6.5em; }
.md-toc-h6 .md-toc-inner { margin-left: 8em; }
}
a.md-toc-inner { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; }
.footnote-line a:not(.reversefootnote) { color: inherit; }
.md-attr { display: none; }
.md-fn-count::after { content: "."; }
code, pre, samp, tt { font-family: var(--monospace); }
kbd { margin: 0px 0.1em; padding: 0.1em 0.6em; font-size: 0.8em; color: rgb(36, 39, 41); background: rgb(255, 255, 255); border: 1px solid rgb(173, 179, 185); border-radius: 3px; box-shadow: rgba(12, 13, 14, 0.2) 0px 1px 0px, rgb(255, 255, 255) 0px 0px 0px 2px inset; white-space: nowrap; vertical-align: middle; }
.md-comment { color: rgb(162, 127, 3); opacity: 0.8; font-family: var(--monospace); }
code { text-align: left; vertical-align: initial; }
a.md-print-anchor { white-space: pre !important; border-width: initial !important; border-style: none !important; border-color: initial !important; display: inline-block !important; position: absolute !important; width: 1px !important; right: 0px !important; outline: 0px !important; background: 0px 0px !important; text-decoration: initial !important; text-shadow: initial !important; }
.md-inline-math .MathJax_SVG .noError { display: none !important; }
.html-for-mac .inline-math-svg .MathJax_SVG { vertical-align: 0.2px; }
.md-math-block .MathJax_SVG_Display { text-align: center; margin: 0px; position: relative; text-indent: 0px; max-width: none; max-height: none; min-height: 0px; min-width: 100%; width: auto; overflow-y: hidden; display: block !important; }
.MathJax_SVG_Display, .md-inline-math .MathJax_SVG_Display { width: auto; margin: inherit; display: inline-block !important; }
.MathJax_SVG .MJX-monospace { font-family: var(--monospace); }
.MathJax_SVG .MJX-sans-serif { font-family: sans-serif; }
.MathJax_SVG { display: inline; font-style: normal; font-weight: 400; line-height: normal; zoom: 90%; text-indent: 0px; text-align: left; text-transform: none; letter-spacing: normal; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; }
.MathJax_SVG * { transition: none 0s ease 0s; }
.MathJax_SVG_Display svg { vertical-align: middle !important; margin-bottom: 0px !important; margin-top: 0px !important; }
.os-windows.monocolor-emoji .md-emoji { font-family: "Segoe UI Symbol", sans-serif; }
.md-diagram-panel > svg { max-width: 100%; }
[lang="mermaid"] svg, [lang="flow"] svg { max-width: 100%; height: auto; }
[lang="mermaid"] .node text { font-size: 1rem; }
table tr th { border-bottom: 0px; }
video { max-width: 100%; display: block; margin: 0px auto; }
iframe { max-width: 100%; width: 100%; border: none; }
.highlight td, .highlight tr { border: 0px; }
.CodeMirror { height: auto; }
.CodeMirror.cm-s-inner { background: inherit; }
.CodeMirror-scroll { overflow: auto hidden; z-index: 3; }
.CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler { background-color: rgb(255, 255, 255); }
.CodeMirror-gutters { border-right: 1px solid rgb(221, 221, 221); background: inherit; white-space: nowrap; }
.CodeMirror-linenumber { padding: 0px 3px 0px 5px; text-align: right; color: rgb(153, 153, 153); }
.cm-s-inner .cm-keyword { color: rgb(119, 0, 136); }
.cm-s-inner .cm-atom, .cm-s-inner.cm-atom { color: rgb(34, 17, 153); }
.cm-s-inner .cm-number { color: rgb(17, 102, 68); }
.cm-s-inner .cm-def { color: rgb(0, 0, 255); }
.cm-s-inner .cm-variable { color: rgb(0, 0, 0); }
.cm-s-inner .cm-variable-2 { color: rgb(0, 85, 170); }
.cm-s-inner .cm-variable-3 { color: rgb(0, 136, 85); }
.cm-s-inner .cm-string { color: rgb(170, 17, 17); }
.cm-s-inner .cm-property { color: rgb(0, 0, 0); }
.cm-s-inner .cm-operator { color: rgb(152, 26, 26); }
.cm-s-inner .cm-comment, .cm-s-inner.cm-comment { color: rgb(170, 85, 0); }
.cm-s-inner .cm-string-2 { color: rgb(255, 85, 0); }
.cm-s-inner .cm-meta { color: rgb(85, 85, 85); }
.cm-s-inner .cm-qualifier { color: rgb(85, 85, 85); }
.cm-s-inner .cm-builtin { color: rgb(51, 0, 170); }
.cm-s-inner .cm-bracket { color: rgb(153, 153, 119); }
.cm-s-inner .cm-tag { color: rgb(17, 119, 0); }
.cm-s-inner .cm-attribute { color: rgb(0, 0, 204); }
.cm-s-inner .cm-header, .cm-s-inner.cm-header { color: rgb(0, 0, 255); }
.cm-s-inner .cm-quote, .cm-s-inner.cm-quote { color: rgb(0, 153, 0); }
.cm-s-inner .cm-hr, .cm-s-inner.cm-hr { color: rgb(153, 153, 153); }
.cm-s-inner .cm-link, .cm-s-inner.cm-link { color: rgb(0, 0, 204); }
.cm-negative { color: rgb(221, 68, 68); }
.cm-positive { color: rgb(34, 153, 34); }
.cm-header, .cm-strong { font-weight: 700; }
.cm-del { text-decoration: line-through; }
.cm-em { font-style: italic; }
.cm-link { text-decoration: underline; }
.cm-error { color: red; }
.cm-invalidchar { color: red; }
.cm-constant { color: rgb(38, 139, 210); }
.cm-defined { color: rgb(181, 137, 0); }
div.CodeMirror span.CodeMirror-matchingbracket { color: rgb(0, 255, 0); }
div.CodeMirror span.CodeMirror-nonmatchingbracket { color: rgb(255, 34, 34); }
.cm-s-inner .CodeMirror-activeline-background { background: inherit; }
.CodeMirror { position: relative; overflow: hidden; }
.CodeMirror-scroll { height: 100%; outline: 0px; position: relative; box-sizing: content-box; background: inherit; }
.CodeMirror-sizer { position: relative; }
.CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar { position: absolute; z-index: 6; display: none; }
.CodeMirror-vscrollbar { right: 0px; top: 0px; overflow: hidden; }
.CodeMirror-hscrollbar { bottom: 0px; left: 0px; overflow: hidden; }
.CodeMirror-scrollbar-filler { right: 0px; bottom: 0px; }
.CodeMirror-gutter-filler { left: 0px; bottom: 0px; }
.CodeMirror-gutters { position: absolute; left: 0px; top: 0px; padding-bottom: 30px; z-index: 3; }
.CodeMirror-gutter { white-space: normal; height: 100%; box-sizing: content-box; padding-bottom: 30px; margin-bottom: -32px; display: inline-block; }
.CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: 0px 0px !important; border: none !important; }
.CodeMirror-gutter-background { position: absolute; top: 0px; bottom: 0px; z-index: 4; }
.CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }
.CodeMirror-lines { cursor: text; }
.CodeMirror pre { border-radius: 0px; border-width: 0px; background: 0px 0px; font-family: inherit; font-size: inherit; margin: 0px; white-space: pre; overflow-wrap: normal; color: inherit; z-index: 2; position: relative; overflow: visible; }
.CodeMirror-wrap pre { overflow-wrap: break-word; white-space: pre-wrap; word-break: normal; }
.CodeMirror-code pre { border-right: 30px solid transparent; width: fit-content; }
.CodeMirror-wrap .CodeMirror-code pre { border-right: none; width: auto; }
.CodeMirror-linebackground { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 0; }
.CodeMirror-linewidget { position: relative; z-index: 2; overflow: auto; }
.CodeMirror-wrap .CodeMirror-scroll { overflow-x: hidden; }
.CodeMirror-measure { position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden; }
.CodeMirror-measure pre { position: static; }
.CodeMirror div.CodeMirror-cursor { position: absolute; visibility: hidden; border-right: none; width: 0px; }
.CodeMirror div.CodeMirror-cursor { visibility: hidden; }
.CodeMirror-focused div.CodeMirror-cursor { visibility: inherit; }
.cm-searching { background: rgba(255, 255, 0, 0.4); }
@media print {
.CodeMirror div.CodeMirror-cursor { visibility: hidden; }
}
:root { --side-bar-bg-color: #fafafa; --control-text-color: #777; }
html { font-size: 16px; }
body { font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(51, 51, 51); line-height: 1.6; }
#write { max-width: 860px; margin: 0px auto; padding: 30px 30px 100px; }
#write > ul:first-child, #write > ol:first-child { margin-top: 30px; }
a { color: rgb(65, 131, 196); }
h1, h2, h3, h4, h5, h6 { position: relative; margin-top: 1rem; margin-bottom: 1rem; font-weight: bold; line-height: 1.4; cursor: text; }
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor { text-decoration: none; }
h1 tt, h1 code { font-size: inherit; }
h2 tt, h2 code { font-size: inherit; }
h3 tt, h3 code { font-size: inherit; }
h4 tt, h4 code { font-size: inherit; }
h5 tt, h5 code { font-size: inherit; }
h6 tt, h6 code { font-size: inherit; }
h1 { padding-bottom: 0.3em; font-size: 2.25em; line-height: 1.2; border-bottom: 1px solid rgb(238, 238, 238); }
h2 { padding-bottom: 0.3em; font-size: 1.75em; line-height: 1.225; border-bottom: 1px solid rgb(238, 238, 238); }
h3 { font-size: 1.5em; line-height: 1.43; }
h4 { font-size: 1.25em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; color: rgb(119, 119, 119); }
p, blockquote, ul, ol, dl, table { margin: 0.8em 0px; }
li > ol, li > ul { margin: 0px; }
hr { height: 2px; padding: 0px; margin: 16px 0px; background-color: rgb(231, 231, 231); border: 0px none; overflow: hidden; box-sizing: content-box; }
li p.first { display: inline-block; }
ul, ol { padding-left: 30px; }
ul:first-child, ol:first-child { margin-top: 0px; }
ul:last-child, ol:last-child { margin-bottom: 0px; }
blockquote { border-left: 4px solid rgb(223, 226, 229); padding: 0px 15px; color: rgb(119, 119, 119); }
blockquote blockquote { padding-right: 0px; }
table { padding: 0px; word-break: initial; }
table tr { border-top: 1px solid rgb(223, 226, 229); margin: 0px; padding: 0px; }
table tr:nth-child(2n), thead { background-color: rgb(248, 248, 248); }
table tr th { font-weight: bold; border-width: 1px 1px 0px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: rgb(223, 226, 229); border-right-color: rgb(223, 226, 229); border-left-color: rgb(223, 226, 229); border-image: initial; border-bottom-style: initial; border-bottom-color: initial; margin: 0px; padding: 6px 13px; }
table tr td { border: 1px solid rgb(223, 226, 229); margin: 0px; padding: 6px 13px; }
table tr th:first-child, table tr td:first-child { margin-top: 0px; }
table tr th:last-child, table tr td:last-child { margin-bottom: 0px; }
.CodeMirror-lines { padding-left: 4px; }
.code-tooltip { box-shadow: rgba(0, 28, 36, 0.3) 0px 1px 1px 0px; border-top: 1px solid rgb(238, 242, 242); }
.md-fences, code, tt { border: 1px solid rgb(231, 234, 237); background-color: rgb(248, 248, 248); border-radius: 3px; padding: 2px 4px 0px; font-size: 0.9em; }
code { background-color: rgb(243, 244, 244); padding: 0px 2px; }
.md-fences { margin-bottom: 15px; margin-top: 15px; padding-top: 8px; padding-bottom: 6px; }
.md-task-list-item > input { margin-left: -1.3em; }
@media print {
html { font-size: 13px; }
table, pre { break-inside: avoid; }
pre { overflow-wrap: break-word; }
}
.md-fences { background-color: rgb(248, 248, 248); }
#write pre.md-meta-block { padding: 1rem; font-size: 85%; line-height: 1.45; background-color: rgb(247, 247, 247); border: 0px; border-radius: 3px; color: rgb(119, 119, 119); margin-top: 0px !important; }
.mathjax-block > .code-tooltip { bottom: 0.375rem; }
.md-mathjax-midline { background: rgb(250, 250, 250); }
#write > h3.md-focus::before { left: -1.5625rem; top: 0.375rem; }
#write > h4.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
#write > h5.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
#write > h6.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
.md-image > .md-meta { border-radius: 3px; padding: 2px 0px 0px 4px; font-size: 0.9em; color: inherit; }
.md-tag { color: rgb(167, 167, 167); opacity: 1; }
.md-toc { margin-top: 20px; padding-bottom: 20px; }
.sidebar-tabs { border-bottom: none; }
#typora-quick-open { border: 1px solid rgb(221, 221, 221); background-color: rgb(248, 248, 248); }
#typora-quick-open-item { background-color: rgb(250, 250, 250); border-color: rgb(254, 254, 254) rgb(229, 229, 229) rgb(229, 229, 229) rgb(238, 238, 238); border-style: solid; border-width: 1px; }
.on-focus-mode blockquote { border-left-color: rgba(85, 85, 85, 0.12); }
header, .context-menu, .megamenu-content, footer { font-family: "Segoe UI", Arial, sans-serif; }
.file-node-content:hover .file-node-icon, .file-node-content:hover .file-node-open-state { visibility: visible; }
.mac-seamless-mode #typora-sidebar { background-color: var(--side-bar-bg-color); }
.md-lang { color: rgb(180, 101, 77); }
.html-for-mac .context-menu { --item-hover-bg-color: #E6F0FE; }
#md-notification .btn { border: 0px; }
.dropdown-menu .divider { border-color: rgb(229, 229, 229); }
.ty-preferences .window-content { background-color: rgb(250, 250, 250); }
.ty-preferences .nav-group-item.active { color: white; background: rgb(153, 153, 153); }
-->
前端之CSS初识选择器标签选择器id选择器类选择器通用选择器后代选择器(重要)儿子选择器毗邻选择器兄弟选择器属性选择器组合选择器(重要)CSS属性相关文字属性背景属性边框属性display属性CSS盒子模型浮动overflow定位positionz-index,opacity和模态框
前端之CSS初识
之前我们介绍了ＨＴＭＬ，今天我们就开始介绍ＣＳＳ，我们都知道，ＣＳＳ的作用就是定义如何显示ＨＴＭＬ元素．实际情况是，当浏览器读到一个样式表（也即是ＣＳＳ）时，浏览器就会按照这个样式表来对文档（也就是ＨＴＭＬ）进行格式化（或者说渲染）
每个ＣＳＳ样式都是由两个组成部分：选择器和声明．
h1 {color:blue;font-size:14px}
选择器 声明 属性 值 声明 值
选择器
标签选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color: #40A070;
}
</style>
</head>
<body>
<!--标签选择器,只要是这个标签,都会被选中,无论层级关系-->
<div>父亲
<div>儿子</div>
</div>
<div>nihao</div>
<!--标签的嵌套-->
<div>父亲
<div>儿子</div>
</div>
<!--关于标签嵌套,通常块级元素可以包含内联元素或者某些块级元素,但是内联元素不能包含块级元素,它只能包含其他内联元素-->
<!--p标签不能包含块级标签,p标签也不能包含p标签,所以下面这种p标签的用法,在实际网页展示的时候网页会自动把里面的内容拿出来-->
<p>1111
<p>2222</p>3333
</p>
</body>
id选择器
xxxxxxxxxx
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*选择id的话用 # + a 来选择id*/
#a{
color: red;
}
</style>
</head>
<body>
<div id="a">nihao</div>
</body>
类选择器
xxxxxxxxxx
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*选择类的话用 . + a 来选择类*/
.p {
color: red;
}
.a {
font-size: 40px;
}
</style>
</head>
<body>
<div class="p a">nihao</div>
<div class="a">lalalla</div>
</body>
通用选择器
xxxxxxxxxx
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*星号就是选择全部,即body里面的所有标签里的内容都会应用这个格式*/
*{
color: red;
}
</style>
</head>
<body>
<div>111</div>
<span>222</span>
<p>333</p>
</body>
后代选择器(重要)
xxxxxxxxxx
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器,主要是通过空格来实现后代的选择,通常需要用到id或者class*/
div .a {
color: red;
}
.c .a{
color: red;
}
div div{
color: #40A070;
}
</style>
</head>
<body>
<!--后代选择器-->
<div id="b" class="c">000
<div>111</div>
<div class="a">222
<div>333</div>
</div>
</div>
</body>
儿子选择器
xxxxxxxxxx
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*儿子选择器,实现方式是通过>,可以实现从最上级往下寻找,要注意一点的是,color这个属性是会自动继承的,最好不要用来实验*/
.a>div{
background-color: #3962ff;
height: 20px;
width: 100px;
}
</style>
</head>
<body>
<!--儿子选择器-->
<div class="a">1
<div class="b">2
<div class="c">3</div>
</div>
</div>
</body>
毗邻选择器
xxxxxxxxxx
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*毗邻选择器,实现方式是通过+,注意,只有加号,并没有减号,而且只支持向下相邻选择,不能向上选择*/
div + p {
color: #40A070;
}
</style>
</head>
<body>
<!--毗邻选择器-->
<p>444</p>
<div>111</div>
<p>222</p>
<p>333</p>
</body>
兄弟选择器
xxxxxxxxxx
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*兄弟选择器,实现方式是通过~,也就是可以通过兄弟选择器找到同一级别的所有标签,所以叫兄弟选择器*/
span~.a{
color: red;
}
</style>
</head>
<body>
<!--兄弟选择器-->
<div>
<span>span</span>
<h1 class="a">h1</h1>
<h2 class="a">h2</h2>
<p>p</p>
<h4 class="a">h4</h4>
</div>
<p class="a">p1</p>
</body>
属性选择器
xxxxxxxxxx
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*属性选择器,通过中括号里面写入要选择的属性,类似于字典的key值,依次来选择数据*/
div[name]{
color: red;
}
div[name="123"]{
color: red;
}
</style>
</head>
<body>
<!--属性选择器-->
<div name = "123">div</div>
<div name = "456">我是div</div>
<div>没有属性的div</div>
</body>
组合选择器(重要)
xxxxxxxxxx
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*组合选择器,用逗号来同时赋予格式,经常用于和其他选择器联用,日后常用,需牢记*/
div, p {
color: red
}
div .b .a, p {
color: red
}
</style>
</head>
<body>
<!--组合选择器-->
<div>div
<div class="b">345
<div class="a">123</div>
</div>
<div class="a">
678
</div>
</div>
<p>p</p>
</body>
CSS属性相关
文字属性
xxxxxxxxxx
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*text-align文字对齐的方式
left 左对齐
right 右对齐
center 居中对齐
justify 两端对齐
*/
/*div {*/
/* width: 100px;*/
/* background-color: yellow;*/
/* text-align: center;*/
/*}*/
/*文字的装饰,特殊效果 text-decoration
none 默认
underline 文本下划线
overline 文本上划线
line-through 穿过文本的线
*/
div {
width: 100px;
background-color: pink;
/*text-decoration: underline;*/
/*text-decoration: overline;*/
text-decoration: line-through;
}
/*可以手动清除a标签的下划线*/
a {
text-decoration: none;
}
/*把无序列表前面的点符号去掉*/
li {
list-style: none;
}
/*缩进,p和div可以,span不可以缩进,因为span是行级标签,所以很多格式都不能适用,但span的字符间距(letter-spacing 像素) 可以调整*/
/*p, span, div {*/
/* !*缩进*!*/
/* text-indent: 32px;*/
/* !*字间距*!*/
/* letter-spacing: 10px;*/
/*}*/
/*控制行高,仅针对块级标签,行级无效*/
div {
width: 400px;
height: 200px;
background-color: yellow;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div>你好呀</div>
<a href="">alalala</a>
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
<p>hello world</p>
<span>hello world</span>
<div>hello world</div>
</body>
背景属性
xxxxxxxxxx
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*背景图片,全填充
background-color 设置背景的颜色
background-image 设置背景为图片
background-repeat 背景图片的重复方式
repeat 铺满整个网页
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
no-repeat 不平铺
*/
/*div {*/
/* height: 100px;*/
/* background-color: green;*/
/* background-image: url("");*/
/* */
/* !*不要平铺*!*/
/* !*这样设置背景的话不会影响文字的显示*!*/
/* background-repeat: no-repeat;*/
/* */
/* !*水平,垂直方向平铺*!*/
/* !*background-repeat: repeat-x;*!*/
/* !*background-repeat: repeat-y;*!*/
/*}*/
div {
height: 100px;
width: 100px;
background-image: url("");
/*两个参数,第一个是左位置,第二个是右位置,通常用来取网页上移动的小图标*/
background-position: 200px, 200px;
}
</style>
</head>
<body>
<div>lalala</div>
</body>
边框属性
x
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
/*控制边框的属性
border: 颜色 线条实虚 线条粗细
border-top
border-left
border-bottom
border-right
border-radius 将其设置为50%可以得到一个圆形
*/
height: 100px;
width: 100px;
/*颜色 虚线/实线 线条粗细*/
/*
solid 实线边框
dootted 点状虚线边框
dashed 矩形虚线边框
*/
border: green solid 10px;
/*可以为单个边设置格式*/
/*border-top: green solid 10px;*/
border-radius: 20%;
}
</style>
</head>
<body>
<div></div>
</body>
display属性
x
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div {*/
/* !*要把标签内内容隐藏设置成none*!*/
/* !*display: none;*!*/
/* !*把块级标签转换成行内标签,即内容可以同行*!*/
/* display: inline;*/
/*}*/
/*span {*/
/* !*把行级标签转换成块级标签,然后就可以设置宽和高*!*/
/* display: block;*/
/* height: 200px;*/
/* width: 349px;*/
/* background-color: orange;*/
/*}*/
.a {
width: 400px;
height: 300px;
background-color: green;
/*visibility: hidden这种隐藏方式和none不同,即便隐藏还会占据原位置,而none不会,none是完全隐藏,不会占据位置*/
visibility: hidden;
}
.b {
width: 400px;
height: 300px;
background-color: red;
/*display: none;*/
}
.a,.b{
/*同时具有行和块的属性,inline-block*/
display: inline-block;
}
</style>
</head>
<body>
<div class="a">123</div>
<span>456</span>
<div class="b">789</div>
</body>
CSS盒子模型
xxxxxxxxxx
/*盒子模型主要运行的两个属性是margin和padding*/
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*开头输入这个可以清除原有的所有盒子模型的格式*/
* {
margin: 0;*/
padding: 0;*/
}
/*.a {*/
/* height: 400px;*/
/* width: 400px;*/
/* border: black 1px solid;*/
/* !*margin-bottom: 20px;*!*/
/* !*margin-left: 40px;*!*/
/* !*margin的参数顺序,如果是四个参数,方向分别是 上-右-下-左*!*/
/* !*如果是两个参数分别是,上-下,左-右*!*/
/* !*如果是一个参数,就是四边的*!*/
/* margin: 20px 30px 40px 50px;*/
/*}*/
/*!*相邻的margin会取最大值,并不会叠加*!*/
/*.b {*/
/* width: 300px;*/
/* height: 400px;*/
/* border: red 1px solid;*/
/* !*margin-top: 35px;*!*/
/*}*/
/*.c {*/
/* width: 20px;*/
/* height: 20px;*/
/* background-color: orange;*/
/* margin: 0 auto;*/
/*}*/
/*属性padding*/
/*div {*/
/* width: 400px;*/
/* height: 400px;*/
/* border: orange solid 2px;*/
/* !*padding-left: 30px;*!*/
/* !*padding-top: 300px;*!*/
/* !*顺序和margin相同,上-右-下-左*!*/
/* padding: 0 0 0 0;*/
}
</style>
</head>
<body>
<!--margin-->
<div class="a">11111
<div class="c">33</div>
</div>
<div class="b">22222</div>
<!--padding-->
<div>111</div>
</body>
浮动
xxxxxxxxxx
/*浮动本身很简单,就是把元素浮动在页面的最左或者最右边(float right/left),但是浮动会产生一些问题,就是如果对父标签的子标签赋予浮动的属性,而父标签长度不够的情况下,很可能父标签会出现塌陷的情况,
常见解决方法有三种,如下*/
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a, .b, .c {
width: 250px;
height: 250px;
}
.a {
background-color: red;
float: left;
}
.b {
background-color: black;
float: right;
}
.c {
background-color: orange;
float: right;
}
.p {
/*边框包裹浮动标签有可能会溢出,清除浮动*/
/*解决方法:
1. 通过给父级标签设定高度
2. 伪元素清除法,通过在最后定义一个clear,然后style clear:both可以清除浮动
3. overflow:hidden
*/
border: gold solid 2px;
/*height: 300px;*/
}
/*.clear{*/
/* clear: both;*/
/*}*/
.clearfix:after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="p">
<div class="a">111</div>
<div class="b">222</div>
<div class="c">333</div>
<div class="clear"></div>
</div>
</body>
overflow
xxxxxxxxxx
/*overflow的值如下:
visible 默认值
hidden 超出边框的内容会被隐藏,不可见
scroll 超出边框的内容会被隐藏,但是可以通过进度条滚动查看其余内容
*/
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
border: gold solid 2px;
/*scroll是滚动条查看图片,hidden会隐藏超出范围的图片*/
/*overflow: scroll;*/
/*overflow: hidden;*/
border-radius: 50%;
}
img{
/*实际图片多于这个宽度的会压缩*/
max-width: 200px;
/*实际图片少于这个高度的会拉长*/
min-height: 200px;
}
</style>
</head>
<body>
<div>
<img src="" alt="">
</div>
</body>
定位position
x
/*position的定位可选值如下:
relative 相对定位
absolute 绝对定位
fixed 固定定位
*/
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
}
/*div {*/
/* width: 200px;*/
/* height: 200px;*/
/* background-color: gold;*/
/* !*相对定位*!*/
/* position: relative;*/
/* !*距离上边之前的位置*!*/
/* top: 20px;*/
/* !*距离左边之前的位置*!*/
/* left: 20px;*/
/*}*/
.a {
width: 400px;
height: 400px;
background-color: gold;
/*父级标签,相对定位*/
position: relative;
float: right;
}
.b {
width: 200px;
height: 200px;
background-color: red;
/*子标签,绝对定位,会跟着父级标签一起移动*/
position: absolute;
top: 40px;
}
.c{
width: 400px;
height: 400px;
background-color: black;
/*固定定位*/
position: fixed;
bottom: 10px;
right: 10px;
}
</style>
</head>
<body>
<!--相对定位-->
<!--<div></div>-->
<!--绝对定位-->
<div class="a">
<div class="b"></div>
</div>
<div class="c">固定定位</div>
</body>
z-index,opacity和模态框
xxxxxxxxxx
/*z-index本身是对象的层叠顺序,默认为0,即大于这个值就可以优先生效,优先显示,且只有定位了的元素,或者说标签,才能有z-index
opacity 透明度,范围是0~1, 0是全透明,1是全完全不透明*/
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a {
position: fixed;
/*透明度,0-1,0是全透明,1是全实,会把背景和字体都变透明*/
/*opacity: 0.5;*/
top: 0;
bottom: 0;
left: 0;
right: 0;
/*只会让背景透明*/
background-color: rgba(255, 192, 203,0.4);
/*z-index默认是0,如果设置成比0大的数,就会在0前面显示*/
z-index: 200;
}
.b {
position: fixed;
width: 200px;
height: 200px;
background-color: white;
z-index: 201;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
</style>
</head>
<body>
<div class="a">111</div>
<div class="b">222</div>
</body>
前端之CSS初识的更多相关文章
- 2020年12月-第02阶段-前端基础-CSS初识
CSS层叠样式表 理解 css的目的作用 css的三种引入方式 1.HTML的局限性 说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义, 比如`<h1>`表明这是一个大标题,用 ...
- 0008 CSS初识（行内式、内部样式表、外部样式表）
typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通 ...
- 前端07 /jQuery初识
前端07 /jQuery初识 目录 前端07 /jQuery初识 1.jquery介绍 1.1 jquery的优势 1.2 jquery是什么? 1.3 jquery的导入 2.jQuery的使用 2 ...
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 前端之css
前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- 第二篇：web之前端之css
前端之css 前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
随机推荐
- WebApi 路由机制剖析
阅读目录 一.MVC和WebApi路由机制比较 1.MVC里面的路由 2.WebApi里面的路由 二.WebApi路由基础 1.默认路由 2.自定义路由 3.路由原理 三.WebApi路由过程 1.根 ...
- iOS开发系列-自动化分发测试打包
概述 项目在测试阶段需要频繁打包给测试人员,对于这些固定化的操作我们可以使用自动化的手段去解决,将时间放在有意义的事情上. xcodebuild 是苹果发布自动构建的工具. Shell脚本打包 xcr ...
- 随笔记录 grub引导故障修复 2019.8.7
系统备份: [root@localhost ~]# mkdir /abc [root@localhost ~]# mount /dev/sdb1 /abc [root@localhost ~]# dd ...
- 【noi.ac-CSP-S全国模拟赛第三场】#705. mmt
给定数组a[],b[] 求$$c_i=\sum_{j=1}^{i} a_{\left \lfloor \frac{n}{j} \right \rfloor}·b_{i \bmod j}$$ 大概就是对 ...
- Perl 数据类型
Perl 数据类型 Perl 是一种弱类型语言,所以变量不需要指定类型,Perl 解释器会根据上下文自动选择匹配类型. Perl 有三个基本的数据类型:标量.数组.哈希.以下是这三种数据类型的说明: ...
- type元类创建类的方法
一.代码 class_name='car' dict_name={} bases=(object,) class_body=''' def __init__(self,name): self.name ...
- dart中extends、 implements、with的用法与区别
一.概述 继承(关键字 extends) 混入 mixins (关键字 with) 接口实现(关键字 implements) 这三种关系可以同时存在,但是有前后顺序: extends -> m ...
- react 组件的生命周期 超简版
组件从被创建到被销毁的过程称为组件的 生命周期: 通常,组件的生命周期可以被分为三个阶段:挂载阶段.更新阶段.卸载阶段: 一.挂载阶段 这个阶段组件被创建,执行初始化,并被挂载到DOM中,完成组件的第 ...
- QString组合、拆分。
1.组合字符常用arg()函数 QString test=QString("_haha_%1_hehe%2") .arg("ee").arg("aa& ...
- vue之样式问题
在样式开发过程中,有两个问题比较突出: 全局污染 —— CSS 文件中的选择器是全局生效的,不同文件中的同名选择器,根据 build 后生成文件中的先后顺序,后面的样式会将前面的覆盖: 选择器复杂 — ...