MDNice CSS是一款基于Markdown的CSS樣式庫,通過利用Markdown的簡潔性和可讀性,為網頁提供了美觀、可讀、易用的閱讀體驗。MDNice CSS除了包含基礎的Markdown樣式,還在此基礎上增加了許多更加人性化的功能,并且可以定制化。讓我們一起來了解一下這一優秀的CSS樣式庫吧!
/* 內容引用樣式 */ blockquote { margin: 0 32px; padding: 10px 16px; border-left: 5px solid #5cadff; background: rgba(92, 162, 255, 0.075); /* 文字顏色 */ p { color: #444; } /* 下劃線顏色 */ hr { border-color: #999; } } /* 代碼塊樣式 */ pre { white-space: pre-wrap; border-radius: 8px; background-color: #f5f5f5; padding: 1em; overflow-x: auto; font-size: 14px; /* 調整字體 */ code { font-family: Menlo, Monaco, "Courier New", monospace; padding: 0; border-radius: 0; background-color: transparent; font-size: 14px; color: #333; } }
以上是MDNice樣式庫中兩個樣式的代碼。其中,引用樣式使用了背景、邊框、內邊距等多種樣式屬性,以及在blockquote中嵌入了p標簽和hr標簽。代碼塊樣式則使用了pre標簽和code標簽,它們分別用于包裹代碼塊和包裹代碼文本。通過這些簡單而實用的樣式屬性和標簽,我們就可以輕松制作出美觀簡潔、易讀易用的網頁。
上一篇mdd和mdx和css