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;

二、心得体会

今天结束了HTML的学习,开始学习css,不知道是不是前边用脑过度,今天的css不在状态,收获差强人意,回去了在继续研究一下今天的内容,为自己加油,努力成为一个合格的打工人。

三、疑问

使用border画出的三角形如何添加黑色的边框?

标签

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1