html5学习笔记（三）（摘抄讲义加部分理解）

最新推荐文章于 2017-02-08 11:31:43 发布

danchejikafo

最新推荐文章于 2017-02-08 11:31:43 发布

阅读量537

点赞数

分类专栏：学习网站 html5

本文链接：https://blog.csdn.net/danchejikafo/article/details/54427675

版权

学习网站同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html5

6 篇文章 0 订阅

订阅专栏

视频地址：http://study.163.com/course/courseMain.htm?courseId=1003005

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

第11章全局属性和其他

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

例如：

2.元数据

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>

效果：

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

第13章 css选择器（一）

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

二．基本选择器

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: '-请进';
}

解释：在文本后插入内容。

danchejikafo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html5学习笔记（三）（摘抄讲义加部分理解）

视频地址：http://study.163.com/course/courseMain.htm?courseId=1003005讲义地址：https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/2.html第11章全局属性和其他1.实体 HTML 实体就是将有特殊意义的字符通过实体代码显示出来。例
复制链接

扫一扫