1. 基本语法
selector1, selector2{
property1 : value1;
property2 : value2;
}
如果value大于1个单词(如font-family的值可能是sans serif), 需要加上引号(font-family:"sans serif")
2. 高级语法
继承效果
3. 派生选择器
依据 元素位置的 上下文关系 定义样式
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="mycss.css"> </head> <body> <p> <strong>派生选择</strong> </p> </body> </html>
//派生选择 标签从外到内用空格隔开 p strong{ color: aqua; }
4. id 选择器
为标有 id 的元素 指定样式, 以 # 来定义
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="mycss.css"> </head> <body> <p id="pid"> <strong>派生选择</strong> </p> </body> </html>
//id选择器用#表示, 上下文位置又是派生选择器, 两者一起使用 #pid strong{ color: aqua; }
4. 类选择器
用.来表示
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="mycss.css"> </head> <body> <p class="pclass"> <strong>派生选择</strong> </p> </body> </html>
//类选择 和 派生选择 结合使用 .pclass strong{ color: aqua; }
5. 属性选择器