DESKTOP-5IV8P69_20210522-王宁
1、日志
一、知识总结
1、多媒体视频
video：使用方法与audio相似
src：源 controls：控件 poster：祝频封面，如果不设置显示视频的第一帧
新增标签：
<datalist>定义下拉列表
<embed>标签定义嵌入的内容
<nav>导航，h5中可直接使用
<figure>和<figcaption>，figure是父元素
2、CSS构成：选择器，以及一条或多条声明
selector {declaration1; declaration2; ... declarationN }
3、用法：
内联样式：直接通过元素的 style 属性来指定的样式被称作内联样式，在开始标签中通过标签的 style 属性(attribute)来指定元素的样式。
<div style=" border : 1px solid blue ; width : 50% ; height : 100px ; " >
</div>
内部样式：所谓内部样式，就是在 HTML 文档中，通过 style 元素来嵌入CSS样式。
<style type="text/css">
h1{
color:red;
}
</style>
外部样式：单独的 CSS (后缀是 .css )文件，当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用
外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
4、选择器：
标签选择器：标记选择器也称作标签选择器，其作用是选择页面上所有匹配于该 tagName 的元素，其作用是选择页面上所有匹配于该 tagName 的元素。
<head>
<style type="text/css">
html {color:red;}
h1 {color:blue;}
h2 {color:silver;}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<p>这是一段普通的段落。</p>
</body>
.class选择器：网页哪个标签使用Class选择器,就在标签添加class属性，值就是Class选择器名称。
.className {
}
<div class="success">
在 div 元素的 class 属性中仅使用单个 className
</div>
<p class="first success">
在 p 元素的 class 属性中指定两个 className
</p>
<span class="flag success test">
在 span 元素的 class 属性中指定三个 className
</span>
属性选择器：其作用是根据 HTML 元素的属性来选择相应的元素。
常用的有三种 : [attributeName] 、[attributeName=value] 、[attributeName~=value] 。
ID选择器:网页标签ID与ID选择器同名，会适用此样式。
<div class="wrapper" id="first">
<input type="text" name="wd" id="wd" >
<input type="submit" value="百度一下" id="button-baidu" >
</div>
<div class="wrapper" id="second">
<input type="text" name="q" id="q" >
<input type="submit" value="360搜索" id="button-360" >
</div>
伪类：网页元素的各种状态
a:link{
color: #555555;
text-decoration: none;
}
a:visited{
color: #555555;
1
2
3
4
5
61.4.6 后代选择器又称为包含选择器:空格即代表是后代
1.4.7 子元素选择器：直接子标签适用此样式
}
a:hover{
color: orange;
text-decoration: underline;
}
a:active{
color: red;
}
a:link:未访问状态
a:visited:访问过后状态
a:hover：鼠标悬停状态
a:active：激活选定状态
后代选择器：又称为包含选择器:空格即代表是后代。
li span{
color: #0000ff;
}
li a{
color: black;
}
.mydiv a{
}
#div1 a{
font-size: 30px;
}
/*后代与伪类结合*/
li a:hover{
color: red;
}
<div class=”mydiv”>
<a href=”#”>是是</a>
</div>
<div id="div1">
<a href="#">是是</a>
</div>
5、CSS常用属性：
width : value ;宽度
height : value ;高度
6、四周边框：
border-width : width ; 用来实现边框的粗细
border-style : none | solid | double | dotted | ... ; 用来实现四周边框的风格
border-color : color ; 设置四周边框颜色
border : width style color ; 批量设置四边边框的粗细、风格、颜色
7、顶部边框：
border-top-width : width ; 单独设置顶部边框风格
border-top-color : color ; 单独设置顶部边框颜色
border-top : width style color ; 设置顶部边框的粗细、风格和颜色
8、圆角边框：
div
{
border:2px solid;
border-radius:25px;
}
9、外边距：margin 属性设置元素的外边距
margin: value;
10、内边距：padding 属性设置元素的填充
padding: value;
近期评论