您的位置:首页 > 汽车 > 新车 > 前端学习2——自学习梳理

前端学习2——自学习梳理

2024/12/24 11:18:23 来源:https://blog.csdn.net/qq_63125992/article/details/140671648  浏览:    关键词:前端学习2——自学习梳理

1.HTML如何和CSS、JS关联呢

2.CSS语法(Css最重要的是:选择器和布局)

1.        index2.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 外部样式 --><link rel="stylesheet" href="css/index2.css"><!-- 内部样式 --><!-- <style>div{color:red;background-color: aquamarine;font-size: 30px;}</style> --></head>
<body><!-- 行内样式>内部样式=外部样式 --><!-- 行内样式 --><!-- <div style="color:red;background-color: aquamarine;font-size: 30px;">hello</div> --><div class="aaa">hello</div><div>hello</div> <div>hello</div><div>hello</div><p class="aaa">demo</p><p>demo</p><p>demo</p><span class="aaa">hello</span><span>demo666</span> <div><p>demo</p><h2><p>demo</p></h2></div><p>demo</p>
</body>
</html>

2.  index.css

/* div{color:red;background-color: aquamarine;font-size: 30px;
} *//* css语法 *//* 选择器 {属性: 值;属性1: 值1;
} *//* 选择器 *//* 1、元素选择器 用元素名称做选择*//* div {color: red;background: gray;font-size: 30px;
} *//* 2、 id选择器 根据元素的id值做选择*//* #test {color: red;background: gray;font-size: 30px;
} *//* 3、class选择器 根据元素的class值做选择 *//* .aaa{color:red;background-color: aquamarine;font-size: 30px;
} *//* 特例:结合选择器 *//* span.aaa {color: red;background: gray;font-size: 30px;
} *//* 4、包含选择器  selector1 selector2{} 强调包含*//* div p {color: red;background: gray;font-size: 30px;
} *//* 5、子选择器 selector1>selector2{}强调父子 *//* div>p {color: red;background: gray;font-size: 30px;
} *//* 6、选择器组合 selector1,selector2..{}*//* div,
span,
p {color: red;background: gray;font-size: 30px;
} *//* 选择全部 *  *//*
* {color: red;background: gray;font-size: 30px;
} 
*//* 布局 */

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com