waterv 2020-03-07
实体符(以&开头,以;结尾)
< <;
> >;
版权© ©;
空格  ;
1 <em>倾斜</em> 2 <strong>加粗</strong> 3 <del>删除线</del>
不常用
<div> <!-- 容器 --> 这是头部 </div> <div> 这是主体 </div> <div> 这是<span>尾部</span><!--局部--> </div>
<style> span{ font-size: 26px; } </style>
css (cascading stylesheet 负责页面的样式)
1、行内样式
1 <!-- 行内样式 --> 2 <p style="font-size:20px; color:red;">书山有路勤为径</p>
2、内嵌式
1 <div> 2 我是一个div 3 </div>
<style type="text/css"> div{ width: 100px; height: 100px; background-color: orange; } /*嵌入式 内嵌式 */ </style>
3、外接式(link写在head内)
1 <link rel="stylesheet" href="index.css"> 2 <!-- rel表示外部文件和样式表的关系 -->
index.css令创一个css文件,通过link链接
作用与1和2相同.
css语法
选择器 {
K:V;
K:V;
K:V;
}
*1 选择器 选中元素(标签)
*2 各种属性
选择器
1、基本选择器
标签选择器
div {
}
h2 {
}
类选择器 (推荐经常使用)
<p class="p1">第一段</p> <div> <div> <div> <div> <p>我隐藏的比较深</p> </div> </div> </div> </div> <h2 class="p1 h2">二级标题</h2> <p class="h2">文字居中</p>
.p1{ background-color: red; } .h2{ text-align: center; /* 让文字水平居中 */ }
id选择器
<p>这是段落</p> <p id="p2">这是段落</p> <p>这是段落</p> <div id="box">这是一个容器标签 可以放其他元素</div>
<style> #p2{ background-color: red; } #box{ font-size: 30px; } </style>