html5学习笔记(三)(摘抄讲义加部分理解)

时间:2022-11-18 07:59:19
视频地址:http://study.163.com/course/courseMain.htm?courseId=1003005

讲义地址:https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/2.html


第11章  全局属性和其他

1.实体  HTML 实体就是将有特殊意义的字符通过实体代码显示出来。

html5学习笔记(三)(摘抄讲义加部分理解)

例如:

html5学习笔记(三)(摘抄讲义加部分理解)

2.元数据

<meta>元素可以定义文档中的各种元数据,而且一个 HTML 页面可以包含多个<meta>元素

1].**指定名/值元数据对**

<meta name="author" content="bnbbs">
<meta name="description" content="这是一个 HTML5 页面">
<meta name="keywords" content="html5,css3,响应式">
<meta name="generator" content="sublime text 3">
元数据名称 说明
author 当前页面的作者
description 当前页面的描述
keywords 当前页面的关键字
generator 当前页面的编码工具

2].声明字符编码
<meta charset="utf-8">

3].模拟 HTTP 标头字段

//5 秒跳转到指定 URL
<meta http-equiv="refresh" content="5;http://www.baidu.com">
//另一种声明字符编码
<meta http-equiv="content-type" content="text/html charset=utf-8">
属性值 说明
refresh 重新载入当前页面,或指定一个 URL。单位秒。
content-type 另一种声明字符编码的方式

3 全局属性

a.id属性(唯一标识)

b.class属性(归类操作)

...
<style type="text/css">
#abc{
color:red;
}
.cd{
color:green;
}
</style>
...
<p id="abc">这是一个ID</p>
<p class="cd">class属性1</p>
<p class="cd">class属性2</p>
<p class="cd">class属性3</p>
c.alt+'n'键,可以定位到该标签
<input type="text" name="name" accesskey="n">
d.contenteditable 属性

<p contenteditable="true">我可以修改吗?</p>
解释:让文本处于可编辑状态,设置 true 则可以编辑,false 则不可编辑。或者直接设置属性

e.dir 属性

<p dir="rtl">文字到右边了</p>
解释:让文本从左到右( ltr),还是从右到左( rtl)。
f.hidden隐藏元素

g.lang 属性

<p lang="en">HTML5</p>
解释:可以局部设置语言。

h.title 属性

<p title="HTML5 教程">HTML5</p>
解释:对元素的内容进行额外的提示。
i.tabindex 属性
<input type="text" name="user" tabindex="2">
<input type="text" name="user" tabindex="1">
解释:表单中按下 tab 键,实现获取焦点的顺序。如果是-1,则不会被选中。选中顺序为1,然后是2.

j.style行内属性

<p style="color:red;">CSS 样式</p>
------------------------------------------------------

第十二章  css入门

一、样式类型

1.元素内嵌样式.即在当前元素使用 style 属性的声明方式。

<p style="color:red;font-size:50px;">这是一段文本</p>
2.文档内嵌样式.在<head>元素之间创建<style>元素,通过选择器的方式调用指定的元素并设置相关 CSS。

<style type="text/css">
p {   
color: blue; font-size: 40px;
}
</style>

<p>adfa</p>
3.外部引用样式

<link rel="stylesheet" type="text/css" href="style.css">
style.css如下:

@Charset "utf-8";
p{
color:green;
font-size: 40px;
}
@charset "utf-8" 表明设置 CSS 的字符编码,如果不写默认就是 utf-8。如果有多个.css 文件,可以使用 @import 导入方式引入.css 文件。只不过,性能不如多个<link>链接。

二、层叠和继承

指的是同一个元素通过不同方式设置样式表产生的样式重叠。样式表继承:指的是某一个被嵌套的元素得到它父元素样式。还有一种样式叫浏览器样式,是这个元素在这个浏览器运行时默认附加的样式。
1.浏览器样式

<b>b元素本身隐含加粗样式</b>
<span style="font-weight:bold;">span元素没有隐含,但可以设置样式</span>
<b style="font-weight:normal;">去除b元素的隐含样式</b>
解释:<b>元素就是具有加粗的隐含样式,而<span>元素没有任何隐含样式,通过 style 属性设置样式。
2.样式表层叠
样式表层叠通过五种方式进行,如果样式相同,那么比如会产生冲突替换。这时,它的优先级顺序就显的比较重要。以下优先级从低到高:
(1).浏览器样式(元素自身携带的样式);
(2).外部引入样式(使用<link>引入的样式);
(3).文档内嵌样式(使用<style>元素设置);
(4).元素内嵌样式(使用 style 属性设置)。

说明:如果某个样式有冲突,则使用优先级高的,未冲突的样式会叠加使用。如果非要使用(2)的a样式并保留(3)(4)里a样式,则设置强制优先级,

强制优先级:

color: green !important;
3.样式继承
如果某一个元素并没有设置父元素相关的样式,那么就会使用继承机制将父元素的样式集成下来。
//<b>元素继承了<p>元素的样式
<p style="color:red;">这是<b>HTML5</b></p>
样式继承只适用于元素的外观(文字、颜色、字体等),而元素在页面上的布局样式则不会被继承。如果继承这种样式,就必须使用强制继承:inherit。
<style type="text/css">
div{
color: red;
border: solid 1px blue;
}
b{
border:inherit;
}
</style>
<div>这是<b>HTML5</b></div>
效果: html5学习笔记(三)(摘抄讲义加部分理解)

----------------------------------------------------------------

第13章     css选择器(一)

一.选择器总汇
本节课主要涉及到三种选择器:基本选择器、复合选择器和伪元素选择器,具体如下:

html5学习笔记(三)(摘抄讲义加部分理解)

二.基本选择器

1.通用选择器不常用:

/**通用选择器还匹配了html和body标签元素*/
*{
color: red;
}

2.**元素选择器**
p { color: red;}
<p>段落</p>

3.ID 选择器
#abc { font-size: 20px;}
<p id="abc">段落</p>

4.类选择器:

.abc{
color: red;
}
.def{
font-size: 40px;
}
p.abc{
border:1px green solid;/**也可以使用“元素.class 值”的形式,限定某种类型的元素。*/
}

<p class="abc def">类选择器还可以调用多个样式,中间用空格隔开进行层叠</p>
<p class="abc">这是一个加粗</p>
<span>这是一个什么都没有</span>
5.属性选择器。解释:属性选择器,直接通过两个中括号里面包含属性名即可。当然,还有更多扩展的属性选择器。

以下两种需要css2:

[href]{
color:orange;
}
[type="password"]{/**匹配属性值的属性选择器*/
border:1px solid red;
}
<a href="http://www.baidu.com">百度</a>名字:<input type="text" name="name">密码:<input type="password" name="pwd" tabindex="1">
以下为css3使用:

[href^="http"]{ /**属性值开头匹配的属性选择器。*/
color:red;
}
a[href$=".cn"]{/**属性值结尾匹配的属性选择器。*/
color:green;
}
[href*="baidu"]{/**属性值包含指定字符的属性选择器。*/
font-size:30px;
}
<a href="http://www.baidu.com">百度</a><a href="www.360.cn">cn</a><a href="#">链接</a>
以下使用css2:

[class~="def"]{
font-size: 50px; /**属性值具有多个值时,匹配其中一个值的属性选择器。*/
}
[lang|="en"] { 
color: red; /**会选择 lang 属性等于 en 或以 en- 开头的所有元素*/}
三.复合选择器
将不同的选择器进行组合形成新的特定匹配,我们称为复合选择器。
1.分组选择器
p,b,i,span { color: red;
}
解释:将多个选择器通过逗号分割,同时设置一组样式。当然,不但可以分组元素选择器,还可以使用 ID 选择器、类选择器、属性选择器混合使用。
2.后代选择器
p b { color: red;
}
解释:选择<p>元素内部所有<b>元素。 不在乎<b>的层次深度。当然,后代选择器也可以混合使用 ID 选择器、类选择器、属性选择器。
3.子选择器
ul > li { border: 1px solid red;
}
<ul>    <li> 我是儿子 <ol>            <li> 我是孙子 </li>            <li> 我是孙子 </li>        </ol>    </li>    <li> 我是儿子 </li>    <li> 我是儿子 </li></ul>
解释:子选择器类似与后代选择器,而最大的区别就是子选择器只能选择父元素向下一级的元素,不可以再往下选择。

4.相邻兄弟选择器

p + b { color: red;
}
解释:相邻兄弟选择器匹配 和第一个元素相邻的第二个元素。
5.普通兄弟选择器
p ~ b { color: red;
}
解释:普通兄弟选择器匹配和第一个元素后面的所有元素。
三.伪元素选择器
伪选择器分为两种第一种是下节伪类选择器,还有一种就是伪元素选择器。这两种选择器特性上比较容易混淆,在 CSS3 中为了区分,伪元素前置两个冒号(::),伪类前置一个冒号(:)。
1.::first-line 块级首行
::first-line { color: red;
}
解释:块级元素比如<p>、<div>等的首行文本被选定。如果想限定某种元素,可以加上前置 p::first-line。
2.::first-letter 块级首字母
::first-letter { color: red;
}
解释:块级元素的首行字母。
3.::before 文本前插入
a::before { content: '点击-';
}
解释:在文本前插入内容。
4.::after 文本后插入
a::after{ content: '-请进';
}
解释:在文本后插入内容。
html5学习笔记(三)(摘抄讲义加部分理解)