标签：color 元素 链接 background position H5C3 选择器
标签
结构：头 、 体
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
页面标签
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>页面标题</title>
</head>
<body>
<h1>标题标签</h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
<p>段落标签</p>
<!-- 换行-->
<br />
我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字
我是<del>删除线</del>
我是<s>删除线</s>
我是<ins>下划线</ins>
我是<u>下划线</u>
<div>我是一个div标签我一个人单独占一行</div>
<div>我是一个div标签我一个人单独占一行</div>
<span>百度</span>
<span>新浪</span>
<span>搜狐</span>
<br/>
<img src="https://imgccl.oss-cn-shenzhen.aliyuncs.com/typora/20220522155207.png" alt="替换文本 图像显示不出来的时候用文字替换" title="图像标签" border="5" width="640" height="560">
<h4>超链接</h4>
<h4>1.外部链接</h4>
<a href="http://www.qq.com" target="_blank"> 腾讯</a>
target 打开窗口的方式 默认的值是 _self 当前窗口打开页面 _blank 新窗口打开页面
<a href="http://www.itcast.cn" target="_blank">传智播客</a>
<h4>2.内部链接: 网站内部页面之间的相互链接</h4>
<a href="../gongsijianjie.html" target="_blank">公司简介</a>
<h4>3.空链接:#</h4>
<a href="#">公司地址</a>
<h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
<a href="https://imgccl.oss-cn-shenzhen.aliyuncs.com/typora/20220522155207.png">下载文件</a>
<h4>5.网页元素的链接</h4>
<a href="http://www.baidu.com"> <img src="https://imgccl.oss-cn-shenzhen.aliyuncs.com/typora/20220522155207.png" width="640" height="560"/></a>
</body>
</html>
表格标签
CSS
复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复合选择器</title>
<style>
/*后代选择器*/
ol li{
color: pink;
}
ul li a{
color: brown;
}
.nav li a{
color: khaki;
}
/*子元素选择器*/
.nac>a{
color: olivedrab;
}
/*并集选择器*/
h1,
strong,
.pig li{
color: #1c036c;
}
/*链接伪类选择器*/
/* 1.未访问的链接 a:link 把没有点击过的(访问过的)链接选出来 */
a:link{
color: lawngreen;
text-decoration: none;
}
/*2. a:visited 选择点击过的(访问过的)链接 */
a:visited{
color: orange;
}
/*3. a:hover 选择鼠标经过的那个链接 */
a:hover{
color: skyblue;
}
/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
a:active{
color: green;
}
</style>
</head>
<body>
<ol>
<li>后代选择器</li>
</ol>
<ul>
<li>无后代选择器</li>
<li><a>后代选择器</a></li>
</ul>
<ul class="nav">
<li><a>后代选择器</a></li>
</ul>
<div class="nac">
<a href="#">子元素选择器</a>
<p>
<a href="#">孙元素</a>
</p>
</div>
<h1>并集选择器</h1>
<strong>并集选择器</strong>
<ul class="pig">
<li>并集选择器</li>
<li>并集选择器</li>
</ul>
<a href="#">链接选择器</a>
<a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>
</html>
focus选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*把获得光标的input表单元素选取出来*/
input:focus{
background-color: pink;
color: red;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
显示模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示模式</title>
<style>
/*块级元素*/
div {
height: 200px;
background-color: pink;
/* 把 div 块级元素转换为行内元素 */
display: inline;
}
/*行级元素*/
span{
width: 100px;
height: 100px;
background-color: hotpink;
display: inline-block;
}
a{
width: 100px;
height: 100px;
background-color: #2319dc;
display: block;
}
input{
width: 249px;
height: 35px;
}
strong{
width: 150px;
height: 50px;
background-color: pink;
/* 把行内元素 strong 转换为 块级元素 */
display: block;
}
</style>
</head>
<body>
<div>块级元素</div>
<div>块级元素</div>
中间
<P>
<div>
块级元素
</div>
</P>
<span>行级元素</span> <span>行级元素</span>
<strong>行级元素</strong>
<span>行级元素</span>
<a href="http://www.baidu.com">
a
<a href="#">b</a>
</a>
<input type="text">
<input type="text">
</body>
</html>
背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景</title>
<style>
div {
width: 300px;
height: 300px;
/* background-color: transparent; 透明的 清澈的 */
/*background-color: red;*/
/*背景颜色*/
background-color: pink;
/*背景图片*/
background-image: url("https://imgccl.oss-cn-shenzhen.aliyuncs.com/typora/image-20220608224625755.png");
/* 1.背景图片不平铺 */
background-repeat: no-repeat;
/* 2.默认的情况下,背景图片是平铺的 */
/* background-repeat: repeat; */
/* 3. 沿着x轴平铺 */
/* background-repeat: repeat-x; */
/* 4. 沿着Y轴平铺 */
/*background-repeat: repeat-y;*/
/* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
/* background-position: 方位名词; */
/* background-position: center top; */
/* background-position: right center; */
/* 如果是方位名词 right center 和 center right 效果是等价的 跟顺序没有关系 */
/* background-position: center right; */
/* 此时 水平一定是靠右侧对齐 第二个参数省略 y 轴是 垂直居中显示的 */
/* background-position: right; */
/* 此时 第一个参数一定是 top y轴 顶部对齐 第二个参数省略x 轴是 水平居中显示的 */
/*background-position: top;*/
/* 20px 50px; x轴一定是 20 y轴一定是 50 */
/* background-position: 20px 50px;*/
/*background-position: 50px 20px;*/
/*background-position: 20px;*/
/* 20px center 一定是x 为 20 y 是 center 等价于 background-position: 20px */
/* background-position: 20px center; */
/* 水平是居中对齐 垂直是 20 */
background-position: center 20px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
标签：color,元素,链接,background,position,H5C3,选择器 来源： https://www.cnblogs.com/youngleesin/p/16684640.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。