首页 发现 帮助
登录
lovecoding
/
Vip0525
10
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

css

e 10 月之前
父节点
8d92850f9b
当前提交
a01e19c872
共有 3 个文件被更改，包括 111 次插入 和 0 次删除
合并视图 显示文件统计
  1. 8 0
      css/1.css
  2. 36 0
      css/1.样式引入.html
  3. 67 0
      css/2.常用样式.html

+ 8 - 0
css/1.css
查看文件 

@@ -0,0 +1,8 @@
 
+div {
 
+    width: 200px;
 
+    height: 200px;
 
+    background: #ff0;
 
+}
 
+p {
 
+    color: red;
 
+}

+ 36 - 0
css/1.样式引入.html
查看文件 

@@ -0,0 +1,36 @@
 
+<!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 -->
 
+    <!-- 外部样式表 -->
 
+    <link rel="stylesheet" href="./1.css">
 
+    <!-- 内部样式表 -->
 
+    <style>
 
+        div {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #00f;
 
+        }
 
+    </style>
 
+    <!-- 
+        link 引入外部表
 
+        rek 关系
 
+        stylesheet 样式表
 
+        href 地址
 
+     -->
 
+</head>
 
+<body>
 
+    <!-- 行内样式/内联样式 -->
 
+    <div></div>
 
+    <p>1111</p>
 
+    <!-- 相同标签 后面样式会覆盖前面样式 -->
 
+    <!-- 
+        样式表优先级
 
+            行内样式  > 内部 = 外部 （谁在后面相同标签优先级大）
 
+     -->
 
+    <!-- <div style="width: 300px;height: 300px;background: red;"></div> -->
 
+</body>
 
+</html>

+ 67 - 0
css/2.常用样式.html
查看文件 

@@ -0,0 +1,67 @@
 
+<!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>
 
+        /**
 
+            标签选择器
 
+              标签名字 {样式...}
 
+            id选择器
 
+                在body标签中
 
+                    在开始标签里 通过id="名字"
 
+                在style标签里
 
+                    #名字 {样式...}
 
+        */
 
+        div {
 
+            /* 宽度 */
 
+            /* 单位 px */
 
+            width: 300px;
 
+            /* 高度 */
 
+            height: 200px;
 
+            /* 背景色 */
 
+            background-color: red;
 
+        }
 
+        #second {
 
+            /* 宽度 */
 
+            /* 单位 px */
 
+            width: 1000px;
 
+            /* 高度 */
 
+            height: 500px;
 
+            /* 复合属性 背景
 
+                background：color position repeat image;
 
+            */
 
+            background: yellow url("../images/img01.gif") center no-repeat;
 
+            /* 背景色 */
 
+            /* background-color: yellow; */
 
+            /* 背景图 */
 
+            /* background-image: url("../images/img01.gif"); */
 
+            /* 背景平铺 */
 
+            /* 不平铺 */
 
+            /* background-repeat: no-repeat; */
 
+            /* x轴平铺 */
 
+            /* background-repeat: repeat-x; */
 
+            /* y轴平铺 */
 
+            /* background-repeat: repeat-y; */
 
+            /* 全部平铺 */
 
+            /* background-repeat: repeat; */
 
+            /* 背景图位置
 
+                    x轴 y轴
 
+            */
 
+            /* background-position: 50px center; */
 
+            /* 
+                背景尺寸 background
 
+                    contain 等比例放大
 
+                    cover 覆盖
 
+            */
 
+            /* background-size: cover; */
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div></div>
 
+    <div id="second"></div>
 
+    <!-- <img src="../images/img01.gif" alt=""> -->
 
+</body>
 
+</html>