|
|
@@ -0,0 +1,194 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ /* 后面的样式会覆盖前面的样式 */
|
|
|
+ /*
|
|
|
+ 标签选择器
|
|
|
+ */
|
|
|
+ div {
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ background: #00f;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ color: #f00;
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ id选择器
|
|
|
+ 格式：在body标签中 所使用的开始标签内id="名字（英文+数字）"
|
|
|
+ 在样式表中 #名字{样式}
|
|
|
+ */
|
|
|
+ #one1 {
|
|
|
+ color: aquamarine;
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ 类/class选择器
|
|
|
+ 格式：在body标签中 所使用的开始标签内class="名字（英文+数字）"
|
|
|
+ 在样式表中 .名字{样式}
|
|
|
+
|
|
|
+ */
|
|
|
+ .other {
|
|
|
+ font-size: 40px;
|
|
|
+ color: aqua;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ /*
|
|
|
+ display:inline;将块级元素转成行内元素
|
|
|
+ */
|
|
|
+ display: inline;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ width: 200px;
|
|
|
+ height: 100px;
|
|
|
+ background: #f00;
|
|
|
+ color: #ff0;
|
|
|
+ /*
|
|
|
+ display:block;将行内元素转成块级元素
|
|
|
+ display: inline-block; 将元素转成行内块元素
|
|
|
+ */
|
|
|
+ /* display: block; */
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ 群组选择器
|
|
|
+ 格式：用逗号连接
|
|
|
+ */
|
|
|
+ b,i,u,s,#one1 {
|
|
|
+ color: #0f0;
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 900;
|
|
|
+ }
|
|
|
+ .news {
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #f00;
|
|
|
+ color: #00f;
|
|
|
+ }
|
|
|
+ /* 包含选择器（后代选择器） */
|
|
|
+ .news p {
|
|
|
+ color: #ff0;
|
|
|
+ }
|
|
|
+ /* 子类选择器
|
|
|
+ 格式：>连接
|
|
|
+ */
|
|
|
+ .news>i {
|
|
|
+ color: #00f;
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ 伪类选择器
|
|
|
+ :hover 划过
|
|
|
+ :first-child 第一个子类
|
|
|
+ :last-child 最后一个子类
|
|
|
+ :nth-child() 自定义改变
|
|
|
+ even 偶数项 2n
|
|
|
+ odd 奇数项 2n + 1
|
|
|
+ */
|
|
|
+ /* ul li:hover{
|
|
|
+ color: #f00;
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ } */
|
|
|
+ ul li:last-child {
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ ul li:first-child {
|
|
|
+ color: #0f0;
|
|
|
+ }
|
|
|
+ ul li:nth-child(odd) {
|
|
|
+ color: #00f;
|
|
|
+ }
|
|
|
+ a:hover {
|
|
|
+ color: #fff;
|
|
|
+ background: #00f;
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ 属性选择器
|
|
|
+ 标签名[属性='属性中的值']
|
|
|
+ 在标签中的属性里去自定义属性值
|
|
|
+ */
|
|
|
+ img[alt='xxx'] {
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ 相邻选择器
|
|
|
+ 格式：用+连接
|
|
|
+ */
|
|
|
+ /* h1 + h2 {
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+
|
|
|
+ h3 + h4 {
|
|
|
+ color: #00f;
|
|
|
+ }
|
|
|
+
|
|
|
+ h2 + h3 {
|
|
|
+ color: #f0f;
|
|
|
+ } */
|
|
|
+ /*
|
|
|
+ 兄弟选择器
|
|
|
+ 格式：用~连接
|
|
|
+ */
|
|
|
+ h1~h5 {
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ h4~h5 {
|
|
|
+ color: #ff0;
|
|
|
+ }
|
|
|
+ h1~h3 {
|
|
|
+ color: #00f;
|
|
|
+ }
|
|
|
+ h1~h6 {
|
|
|
+ color: #0f0;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <a href="">q我问问</a>
|
|
|
+ <a href="">q我问问</a>
|
|
|
+ <a href="">q我问问</a>
|
|
|
+ <a href="">q我问问</a>
|
|
|
+ <div></div>
|
|
|
+ <p id="one1">一段文字</p>
|
|
|
+ <p class="other">今天天气真好</p>
|
|
|
+ <p>行内元素</p>
|
|
|
+ <p>块级元素</p>
|
|
|
+ <p>行内块元素</p>
|
|
|
+ <span>行内元素</span>
|
|
|
+ <span>块级元素</span>
|
|
|
+ <span>行内块元素</span>
|
|
|
+ <b>新的</b>
|
|
|
+ <i>旧的</i>
|
|
|
+ <u>我的</u>
|
|
|
+ <s>他的</s>
|
|
|
+ <div class="news">
|
|
|
+ <i>今天学了好多东西今天学了好多东西今天学了好多东西今天学了好多东西</i>
|
|
|
+ <p>今天学了好多东西今天学了好多东西今天学了好多东西今天学了好多东西</p>
|
|
|
+ </div>
|
|
|
+ <ul>
|
|
|
+ <li>qqq</li>
|
|
|
+ <li>qqq</li>
|
|
|
+ <li>qqq</li>
|
|
|
+ <li>qqq</li>
|
|
|
+ <li>qqq</li>
|
|
|
+ <li>qqq</li>
|
|
|
+ <li>qqq</li>
|
|
|
+ <li>qqq</li>
|
|
|
+ </ul>
|
|
|
+ <img src="../images/1.jpg" alt="xxx">
|
|
|
+ <h1>h1</h1>
|
|
|
+ <h2>h2</h2>
|
|
|
+ <h3>h3</h3>
|
|
|
+ <div style="background: #ff0;width: 100px;height: 100px;">
|
|
|
+ <h6>2222</h6>
|
|
|
+ </div>
|
|
|
+ <h4>h4</h4>
|
|
|
+ <h5>h5</h5>
|
|
|
+ <h6>h6</h6>
|
|
|
+</body>
|
|
|
+</html>
|
e