前端之css笔记1
2024-08-25 02:28:50
1 css引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <!--内嵌式引入-->
<!--<style>-->
<!--a{-->
<!--color:rebeccapurple;-->
<!--font-size:30px;-->
<!--font-weight:;-->
<!--}--> <!--p{-->
<!--ackground-color:gold;-->
<!--}-->
<!--</style>--> <!--连接式-->
<!--<link rel="stylesheet" href="index.css"--> <!--导入式-->
<!--<style>-->
<!--@import "index.css";-->
<!--</style>-->
</head>
<body> <p>I am P!</p> <a href="">click</a> <div>CIV</div> <div>DIV2</div> <!--行内式-->
<!--<div style="color: red;background-color:darkgreen">DIV3</div>-->
</body>
</html>
a{
color:rebeccapurple;
font-size:30px;
font-weight:;
}
p{
background-color:gold;
}
2 基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> <!--标签选择器-->
<!--p{-->
<!--background-color:rebeccapurple;-->
<!--}--> <!--id选择器-->
<!--#p2{-->
<!--background-color:rebeccapurple;-->
<!--}--> <!--class选择器-->
<!--.fang{-->
<!--background:rebeccapurple;-->
<!--}--> <!--通用选择器-->
<!--*{-->
<!--background:rebeccapurple;-->
<!--}--> </style>
</head>
<body> <p class="fang">ppp1</p>
<p id="p2">ppp2</p>
<p class="fang">ppp3</p> <div>DIV</div> <span>SPAN</span> </body>
</html>
3 组合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style> <!--后代选择器-->
<!--.he p{-->
<!--color:red;-->
<!--}-->
<!---->
<!--.yi p{-->
<!--color:red;-->
<!--}--> <!--子代选择器-->
<!--.yi > p{-->
<!--color:red;-->
<!--}--> <!--多元素选择器-->
<!--.he p,.p4{-->
<!--color:red;-->
<!--}--> <!--毗邻选择器-->
<!--.yi + a{-->
<!--color:red;-->
<!--}--> <!--兄弟选择器-->
<!--.yi ~ p{-->
<!--color:red;-->
<!--}--> <!--多个选择器组合到一起使用-->
<!--ul.yan li{-->
<!--color:red;-->
<!--}--> <!--div.jie{-->
<!--color:red;-->
<!--}-->
</style>
</head>
<body> <div class="jie">c1</div> <div class="yi">
<p>p1</p>
<div class="he">
<p>p3</p>
</div>
<p>p2</p>
<a href="">click</a>
</div> <a href="">aaa</a>
<p>p5</p> <p class="p4">p4</p> <ul class="yan">
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul> <ol class="yan">
<li>222</li>
<li>222</li>
<li>222</li>
<li>222</li>
</ol> <ul>
<li>333</li>
<li>333</li>
<li>333</li>
<li>333</li>
</ul> </body>
</html>
最新文章
- 如何查看、修改Linux的系统时间
- JNDI 配置：JBoss + MySQL
- Beta版本贡献比
- 常用的STL查找算法
- js怎样改变div的宽度
- Delphi2010中DataSnap技术网摘
- Python 实时日志平台 Sentry
- MYSQL用户权限管理学习笔记
- BroadcastReceiver自学笔记
- actor简介
- js for...in 语句
- 8.QT-对话框(模态与非模态)
- Swift延迟加载的一种用途
- 系统级性能分析工具perf的介绍与使用[转]
- LeetCode第二题
- Git访问远程出现错误
- du -h排序
- springMVC Model ModelMap 和 ModelAndView的区别(转)
- JS如何创建对象
- 【转】C/C++函数调用过程分析