用户投稿CSS基础
CSS(Cascading Style Sheets，阶层样式表)是一种风格页面语言(Style Sheet Language)，主要用来让HTML中的各元素加上页面样式(Style)。
选择器(Selector)
整个架构称为规则集(Rule Set)，也可以简称为规则(Rule)。
资料来源：MDN-CSS基本
选择器为HTML中的元素，表示将被套用页面样式的元素。注意看上面引用的图，只有选择器是在**{}**外的。属性(Property)
属性是更改HTML元素的方法之一。属性值(Property Value)
属性值接在属性之后，中间用"："隔开，表示套用在元素上的属性。宣告(Declaration)
宣告由属性及属性值组成，表示被选择的元素将被指定套用上所宣告的页面样式。规则中可以包含多个宣告，宣告间以"；"区分。
多元素
多个元素可以共用同一份规则，元素间以","区隔即可。
选择器的类型
除了上述介绍的元素选择器外，还有其他不同类型的选择器，这边就不一一介绍，有兴趣的可以自行前往MDN-CSS基本查看喔~
常用属性介绍
font-size: 12px，字体大小，px为pixel(像素)的缩写。text-align: text-align: center，字体水平对齐(靠左对齐、置中、靠右对齐)。line-height: line-height: 2，行高。letter-spacing: letter-spacing: 1px，字母间距。padding: padding: 0 0 30px 20px(上，右，下，左) or padding: 20px 0(上&下，右&左) or padding: 10px(上&下&右&左)，内容周围的空格。border: border: 5px solid brown(线粗，边框样式，颜色)，矩形内容的外框线。更多用法详见CSS的框线样式：border。margin: margin: 25px auto(用法同属性padding)(此处auto为自动平分左右空格)，元素外的空间。width: width: 600px，元素的宽度。background-color: background-color: #FDE3D3(颜色可以使用英文单字或颜色编码，不过单字只能是一个字，更多颜色编码与词彙见文字颜色)，元素内容的背景色。color: color: palevioletred(用法同属性background-color)，元素内容的颜色。text-shadow: text-shadow: 3px 3px 1px grey(水平偏移，垂直偏移，模糊半径，颜色)(水平偏移正值右移，负值左移；垂直偏移正值下移，负值上移；模糊半径数值越大，阴影越模糊)，字体阴影。display: dispaly: block(用法详见CSS Display 基本概念)，设置元素的显示模式。小试身手
CSS程式码
p { color: gray;}li { color: palevioletred;}html { font-size: 10px; font-family: 'Sono', sans-serif; background-color: #E6C35C;}body { width: 600px; margin: 25px auto; background-color: #FDE3D3; padding: 0 0 30px 20px; border: 5px solid brown;} h1 { font-size: 50px; text-align: center; margin: 0; padding: 20px 0; color: chocolate; text-shadow: 3px 3px 1px grey;} p, li { font-size: 16px; line-height: 2; letter-spacing: 1px;}img { display: block; margin: 0 auto; border: 3px solid palevioletred;}HTML程式码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>My test page</title> <link href="styles/style.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css2?family=Sono&display=swap" rel="stylesheet" type="text/css"> </head> <body> <h1>This is a cat</h1> <img src="images/cat2.jpg" alt="A cat which has a big head"> <p>There are several advantages about raising cats:</p> <ul> <li>They are cute</li> <li>They are cute</li> <li>They are cute</li> </ul> <p>If you are a beginner and want to learn JavaScript well, link to <a href="https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web">MDN</a> and have fun.</p> </body></html>成果
[此猫猫图为CC0授权]
参考网站：MDN
微信扫一扫打赏
支付宝扫一扫打赏
