HTML和CSS

最新推荐文章于 2023-01-14 10:35:30 发布

sumjob

最新推荐文章于 2023-01-14 10:35:30 发布

阅读量503

点赞数

分类专栏： HTML资源

原文链接：https://blog.csdn.net/sinat_43082914/article/details/90758996

版权

HTML资源专栏收录该内容

26 篇文章 0 订阅

订阅专栏

第一章 html和html5

1. html的基本标签

在HTML中，带有‘<>’符号的元素被称为HTML标签，所谓的标签就是放在“<>”标签中表示某个功能的编码命令，也称为HTML标签或者HTML元素。

1.1 html标签的分类

1.双标签：<标签名>内容</标签名>,其中“<标签名> ” 为开始标签（start tag），“</标签名>” 为结束标签（end tag），“/” 为关闭符。比如：我是文字

2.单标签：也称空标签，指一个标签即可完整的描述某个功能的标签。比如：

1.2 html标签关系

1.嵌套关系(父子关系)

<head> <title></title> </head>

2.并列关系（兄弟关系）

<head></head>
<body></body>

1.3 html标签

1.3.1 排版标签

1.标题标签：语义：作为标题使用，并且重要性递减。HTML提供了6个等级的标题，即

<h1>、<h2>、<h3>、<h4><h5>、<h6>

语法格式：

<hn> 标题文本<hn>。

2.段落标签

<p> 文本内容 </p>

3.水平线标签

<hr/>是一个单标签

标签	显示效果
`<b></b> 和 <strong></strong>`	文字以粗体方式显示（XHTML推荐使用strong）
`<i></i>和 <em></em>`	文字以斜体方式显示（XHTML推荐使用em）
`<s></s>和<del></del>`	文字以加删除线方式显示（XHTML推荐使用del）
`<u></u>和<ins></ins>`	文字以加下划线方式显示（XHTML推荐使用ins）

标签属性

<标签名 属性1="属性值" 属性2="属性值"...>文本内容<标签名/>

注意：

1.标签可以有多个属性，必须写在开始标签中，位于标签后面。

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均已空格分开。

3.任何标签的属性都有默认值，省略该属性则去默认值。

采取键值对的格式：key="value"的格式，比如：

<hr width="500"/>

1.3.3 图像标签

该语法中src属性用于指定图像文件的路径和文件名，它是img标签的必须属性。

<img src="图像URL" /> 是一个单标签

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时替换的文本
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字	设置图像边框的宽度

1.3.4 链接标签

<a herf="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

herf：用于指定链接目标的url地址，当标签应用了herf属性时，它就具有了超链接功能。

target：用于指定页面的打开方式，其取值就有_self和_blank两种，其中_self为默认值，_blank为在新窗口中的打开方式。

注意：

1.外部链接必须加http, 比如：<a herf="http://www.baidu.com">百度</a>。

2.内部链接直接加内部名称即可，比如：<a herf="index.html">首页</a>。

3.如果没有确定的链接目标，通常将链接标签的herf属性设置为“#”，如herf="#"，表示该链接是一个空链接。

4.不仅可以创建超文本链接，在网页中的各种元素，如图像、音频、表格、视频都可以加超链接。

base标签

可以设置整体链接的打开状态，即在新窗口中打开当前的链接。它是一个单标签。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<base target="_blank" />
</head>
<body>
	<a href="http://www.baidu.com">百度</a>
	<a href="http://www.sina.com" target="_self">新浪</a>
	<a href="http://www.sohu.com">搜狐</a>
	<a href="http://www.163.com">网易</a>
</body>
</html>

1.3.5 锚点定位

步骤：

1.使用 <a herf="#id名">链接文本</a>创建超链接文本。

2.使用相应的id名标注跳转的目标位置。比如：

<a herf="#life">个人生活</a>
<p id="life">文本内容</p>

1.3.6 注释标签

HTML注释的快捷键：单行注释：ctrl+/, 多行注释：ctrl+shift+/。

1.3.7 特殊字符

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	d大于号	`>`
&	和号	`&`
￥	人名币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2（上标2）	`²`
³	立方3（上标3）	`³`

2. 路径

2.1 相对路径

1.图像文件和HTML文件位于同一文件夹，只需输入图像文件的名称即可，如 <img src="logo.gif" />。

2.图像文件位于HTML的下一级文件夹，输入文件夹名和图像文件名，之间用“/”隔开，如 <img src="img/img01/logo.gif" />。

3.图像文件位于HTML文件的上一级文件夹，在图像文件名之前加入“…/”，如果是上两级，则需使用“…/…/”，以此类推，如 <img src="../log.gif" />。

2.2 绝对路径

一般不用

1.如，“D:\web\images\logo.gif”。

2.完整的网络地址，如“http://www.itcast.cn/images/logo.gif”。

3. 列表标签

3.1 无序列表

	<ul>
		<li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
		<li>列表项4</li>
		.....
	</ul>

注意：

1.<ul></ul>中只能嵌套<li></li>，直接在 <ul></ul>标签中输入其它标签或者文字的做法是不被允许的。

2.<li></li>之间相当于一个容器，可以容纳所有元素。如

<li>
	<p>内容</p>
	<h5>标题</h5>
</li>

3.无序列表带有自己的属性，css可以设置其属性。

3.2 有序列表

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
    ...
</ol>

3.3 自定义列表

	<dl>
		<dt>定义标题</dt>
		<dd>定义描述、解释</dd>
	</dl>

如：

<dl>
	<dt>北京</dt>
	<dd>昌平</dd>               
	<dd>朝阳</dd>
	<dd>大兴</dd>
</dl>

4. 表格

4.1 创建表格

<table><!-- 表格标签相当于一个盒子 -->
	<tr>   <!-- 行标签 -->
		<td></td>   <!-- 单元格标签 -->
		...
	</tr>
	...
</table>

注意

1.<tr></tr>中只能嵌套 <td></td>。

2.<td></td>标签，可以容纳所有元素。

4.2 表格属性

属性名	含义	常用属性值
border	设置表格的边框（默认border=“0”无边框）	像素值
cellspacing	设置单元格与单元格边框之间的空白间距	像素值（默认为2像素）
cellpadding	设置单元格内容与单元格边框之间的空白间距	像素值（默认为1像素）
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格在网页中的水平对齐方式	left、center、right

4.3 表头标签

所谓的表头一般位于表格的第一行或者第一列，其文本加粗居中，为了设置表头，只需用表头标记 <th></th>替代相应的单元格标记 <td></td>即可。

<table>
	<tr>
		<th></th>
		<th></th>
		<th></th>
	</tr>
</table>

4.4 表格结构（了解）

在使用表格进行布局时，可以将表格划分为头部、主体和页脚。具体如下：

<thead></thead>：用于定义表格的头部。必须位于 <table></table>标签中，一般包含网页的logo和导航等头部信息。

<tbody></tbody>：用于定义表格的主体。位于 <table></table>标签中，一般包含网页中除头部和底部之外的其它内容。

<table>
	<thead>
		<tr>
			<th></th>
			<th></th>
			<th></th>
		</tr>
    </thead>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">&gt;</span></span>

</table>

4.5 表格标题

<table>
	<caption>表格标题</caption>
</table>

4.6 合并单元格

跨行合并：rowspan，跨列合并：colspan。

5. 表单

5.1 表单的作用

在HTML中，一个完整的表单通常由表单控件（表单元素）、提示信息、表单域3个部分组成。

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮。

提示信息：一个表单中通常还需要一些说明性的文字，提示用户进行填写和操作。

表单域：它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的URL地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

5.2 input控件

input标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的类型控件。除了type属性外，<input/>标签还可以定义很多的其它属性，

属性	属性值	描述
	text	单行文本框输入
	password	密码输入框
	radio	单选按钮
	checkbox	复选框
type	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文件域
name	用户自定义	控件的名称
value	用户自定义	input控件中的默认文本值
size	正整数	input控件在页面中的显示宽度
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许输入的最多字符数


<body>
	<!-- input 标签是一个单标签，br,hr,img base input -->
	用户名：<input type="text" value="请输入姓名" /><br /><!-- 文本框 -->
	密　码：<input type="password" maxlength="6"/><br /><!-- 密码框 -->
	性　别：<input type="radio" name="sex" checked="checked"/>女
		   <input type="radio" name="sex" />男
			<!-- 单选框如果是一组，通过相同的name值来实现 -->
    爱　好：<input type="checkbox" name="hobby">篮球
    	   <input type="checkbox" name="hobby">足球
    	   <input type="checkbox" name="hobby">羽毛球
			<!-- 复选框就是可以选择多个 -->
    搜索：<input type="button" value="搜索按钮"> <!-- 普通按钮 --><br />
		 <input type="submit" value="提交按钮"> <!--提交按钮-->
		 <input type="reset" value="重置按钮"> <!-- 重置按钮 --><br />
		  上传头像：
		 <input type="file" /> <!-- 文件按钮 --><br />
		 <input type="image" src="img.jpg"> <!-- 图像按钮 -->
</body>

5.3 label标签

label标签为input元素定义标注（标签）。

作用：用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点。

for属性规定label与哪个表单元素绑定。

<h6>1.用label标签直接进行包裹</h6>
<label>输入账号：<input type="text" /></label>
<h6>2.如果label标签里有多个表单，想定位到某个表单，可以通过for id来实现</h6>
<label for="first">
	输入账号：<input type="text"/> </br>
	密　　码：<input type="password" id="first"/>
</label>

5.4 textarea控件（文本域）

如果需要输入大量的信息，就需要用到 <textarea></textarea>标签。通过textarea控件可以轻松创建多行的文本输入。

<body>
	留言板：</br>
	<textarea cols="每行显示的字符数" rows="显示的行数">
		文本内容
	</textarea>
</body>

5.5 下拉菜单

<body>
	<select>
		<option>选项1</option>
		<option>选项2</option>
		<option>选项3</option>
		...
	</select>
</body>

注意：

<select></select>中至少应包含一对 <option></option>。
在option中定义 selected="selected"时，当前选项即为默认选项。

5.6 表单域

在HTML中，form标签用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

<form action="url地址" method="提交方式" name="表单名称">
    各种表单控件
</form>

常用属性：

1.action在表单收集信息后，需要将信息传递给服务器进行处理，action属性用于指定接受并处理表单数据的服务器程序的url地址。

2.method用于设置表单数据的提交方式，其取值为get或post.

3.name用于指定表单的名称，以区分同一个页面中的多个表单。

注意；每个表单都应该有自己的表单域。

<body>
	我们学了三个域：
	<ol>
		<li>文本域 textarea 留言板</li>
		<li>文件域 input type="file" 提交文件的</li>
		<li>表单域 form 收集表单控件信息，并提交</li>
	</ol>
	<h5>表单域</h5>
	<form action="demo.php" method="post" name="login">
		<p>用户名：<input type="text " name=username""></p>
		<p>密　码：<input type="password" name="pwd"></p>
		<input type="submit" value="提交" />
		<input type="reset" value="重置" />
	</form>
	<ol>
		<li>get 速度快 会显示表单里面的内容 不安全</li>
		<li>post 速度较慢 但是不会显示表单里面的内容 安全</li>
	</ol>
	<form action="demo.php" method="post" name="register">
		<p>用户名：<input type="text " name=username""></p>
		<p>密　码：<input type="password" name="pwd"></p>
		<input type="submit" value="提交" />
		<input type="reset" value="重置" />
	</form>
</body>

6. HTML新增标签和属性

6.1 HTML新增常用标签

w3c手册中文官网：https://www.w3cschool.cn/

1.header:定义文档的头部或者页眉。

2.nav:定义导航栏链接的部分。

3.footer：定义文档或节的页脚，底部。

4.article：定义文章。

5.section：定义文章中节（section或者区段）。

6.aside:定义其所处内容之外的内容和侧边栏。

7.datalist：定义选项列表，与input元素配合使用。

<input type="text" value="star" list="star">  <!-- input里面用list -->
	<datalist id="star">  <!-- datalist里面用id与input建立链接 -->
		<option>221</option>
		<option>22</option>
		<option>21</option>
		<option>321</option>
		<option>3</option>
		<option>31</option>
	</datalist>

8.fieldset:将表单里的元素分组打包，与legend搭配使用

	<fieldset>
		<legend>用户登录 </legend>   定义标题
		用户名：<input type="text"><br /><br  />
		密　码：<input type="password">
	</fieldset>

6.2 新增的input type属性值

类型	格式	含义
email	`<input type="email">`	输入邮箱的格式
tel	`<input type="tel">`	输入手机号码格式
url	`<input type="url">`	输入url格式
number	`<input type="number">`	输入数字的格式
seatrch	`<input type="search">`	搜索框（体现语义化）
range	`<input type="range">`	自由拖动滑块
time	`<input type="time>`	小时分钟
date	`<input type="date">`	年月日
datetime	`<input type="datetime">`
month	`<input type="month">`	月年
week	`<input type="week">`	星期年
color	`<input type="color">`	颜色

6.3 常用新属性

类型	格式	含义
placeholder	`<input type="text" placeholder="请输入用户名" />`	占位符当用户输入的时候，里面的文字消失，删除文字时，自动复原
autofocus	`<input type="text" autofocus />`	规定当页面加载时 input元素应该自动获得焦点
multiple	`<input type="file" multiple/>`	多文件上传
autocomplete	`<input type="text" autocomplete="on" />`	规定表单是否应该启动自动完成功能，有两个值，on，off，on代表记录输入的值，1.autocomplete必须有提交按钮 2.这个表单必须给他名字
required	`<input type="text" required/>`	必须项
accesskey	`<input type="text" accesskey="s"/>`	规定激活（使元素获得自动焦点）的快捷键 ALT+字母形式例如 ALT+s

6.4 input表单综合案例（学生档案）

<!DOCTYPE html>
<html lang="en">
<head> 
	<meta charset="UTF-8">
	<title>综合案例</title>
</head>
<body>
	<form>
		<fieldset>
			<legend>学生档案</legend>
			<label>姓　名：<input type="text" placeholder="请输入姓名" autofocus /></label><br /><br />
			<label>手机号：<input type="tel" /></label><br /><br />
			<label>邮　箱：<input type="email" /></label><br /><br />
			<label>学　院：<input type="text"  list ="xueyuan" /></label><br /><br />
								<datalist id="xueyuan">
									<option>Java学院</option>
									<option>Python学院</option>
									<option>Web前端</option>
									<option>PHP学院</option>
								</datalist>
			<label>成　绩：<input type="number" /></label><br /><br />
			<label>出生日期：<input type="date" /></label><br /><br />
			<label>毕业时间：<input type="date" /></label><br /><br />
			<input type="submit" /> <input type="reset" />
		</fieldset>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>

</body>
</html>

6.5 多媒体标签

1.引入网站视频（embed标签）

<embed src='http://player.youku.com/player.php/sid/XNDA3OTMzMTE4MA==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>

2.插入音频

autoplay 自动播放。

controls 是否显示默认播放的控件。

loop 循环播放 loop等于几就是播放几次，loop 或者loop=“-1”就是无限循环。

width设置播放窗口的宽度。

height设置默认播放的窗口高度。

		<audio src="MIC男团 - 逐梦传奇 [mqms2].mp3" autoplay="autoplay" controls loop=""></audio>            <!-- 支持固定的浏览器的播放 -->
	&lt;audio autoplay controls&gt;    &lt;!-- 多浏览器支持的方案 --&gt;
		&lt;source src="MIC男团 - 逐梦传奇 [mqms2].mp3"&gt;
		&lt;source src="MIC男团 - 逐梦传奇 [mqms2].ogg"&gt;
		你的浏览器不支持音频的播放
	&lt;/audio&gt;

3.播放视频

		<video src="库里29生日，官方mv.mp4" autoplay controls width="500" height="300"></video>
         <!-- 支持固定的浏览器播放 -->
	&lt;video autoplay controls width="500" height="300"&gt;&lt;!-- 多浏览器支持的方案 --&gt;
		&lt;source src="库里29生日，官方mv.mp4" &gt;
		&lt;source src="库里29生日，官方mv.ogg" &gt;	
         你的浏览器不支持播放视频
	&lt;/video&gt;

第二章 CSS和CSS3

1. CSS的样式介绍

CSS的样式规则：1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。

2.属性和属性值以“键值对”的形式出现。

3.属性是对指定的对象设置的样式属性，例如字体大小、颜色等。

4.属性和属性值之间用英文“：”连接。

5.多个键值对之间用英文“;”进行区分。

2. CSS的字体样式属性

2.1 font-size:字号大小

相对长度	说明
em	相对于当前对象内文本的字体尺寸
px	像素，最常用，推荐使用
绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

2.2 font-family: 字体

1.现在网页中普遍使用14px+。

2.尽量使用奇数偶数的数字字号。ie6等老式浏览器支持会有bug。

3.各种字体之间必须使用英文状态下的逗号隔开。

4.中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当设置英文字体时，英文字体名必须位于中文字体名之前。

5.如果字体中包含空、#、$等符号时，则该字体必须加英文状态下的单引号或者双引号。例如：font-family:"Times new Roman";

2.3字体加粗

字体加粗除了b和strong标签之外，可以用css来实现，但是CSS是没有语义的。

font-weight属性用来定义字体的粗细，其属性值：normal、bold、bolder、lighter、100~900（100的整数倍）

数字400等于normal，而700等于bold，但是我们更喜欢用数字来表示。

2.4 font-style：字体风格

字体除了用i和em 标签之外，可以用CSS来实现，但是CSS是没有语义的。

font-style属性用来定义字体的风格，如设置斜体、倾斜、或者正常字体，

normal：默认值，浏览器显示的标准的字体样式。

italic：浏览器显示斜体的字体样式。

oblique；浏览器显示倾斜的字体样式。

2.5 font：综合设置字体样式（重点）

font属性用于对字体的样式进行综合设置，语法基本格式如下：

选择器{font：font-style font-weight font-size/line-height font-family;}

*注意：*1.使用font属性时，必须按照上面的顺序来书写，不能更换顺序，各属性之间必须用空格隔开。

2.其中不用设置的属性可以省略，保留默认值，但必须保留font-size和font-family属性，否则font属性将不会起作用。

3. CSS基本选择器

3.1 标签选择器（元素选择器）

标签选择如下：器是只用HTML标签名作为选择器，按标签名分类，为某页面中某一类标签指定统一的CSS样式，其语法格式如下：

标签名｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝或者
元素名｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝

其最大的优点是能快速为页面中同类型的标签统一样式，同时也是它的缺点，不能设计差异化样式。

3.2 类选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.Java{          /*  声明类样式 */
			font-size: 14px;
			font-family: "宋體";
			color: red;
		}
		.Python{       /*  声明类样式 */
			font-size: 16px;
			color: blue;
		}
	</style>
</head>
<body>
	<div class="Java">Java學院</div>  <!--  引用类样式 -->
	<div class="Python">Python學院</div>   <!--  引用类样式 -->
	<div>前端學院</div>
	<div>C++學院</div>
</body>
</html>

注意：1.长名称或词组可以使用中横线来为选择器命名

2.不建议使用“_”下划线来命名css选择器。

3.不要用纯数字、中文等命名，尽量使用英文字母来命名。

3.3 多类名选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style type="text/css">
		.font20{
			font-size: 50px;
		}
		.font14{
			font-size: 14px;
		}
		.fontweight{
			font-weight: bolder;
		}
		.blue{
			color: blue;
		}
	</style>
</head>
<body>
	<div class="font20 fontweight blue">亚瑟</div>
	<div class="font20">后羿</div>
	<div class="font14">安琪拉</div>
	<div class="fontweight blue">孙悟空</div>
</body>
</html>

3.4 id选择器：

语法格式

#id名{属性1：属性1；属性2：属性值2；属性3:属性值3；}
说明：该语法中。id名即为HTMl元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。用法和类选择相同。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
&lt;style type="text/css"&gt;
	.wen{            /*  类选择器 */
		font:italic bold 20px "宋体" ;
	}
	#select{      /* id选择器 */
		color: blue;
		font-weight: bolder;
	}
&lt;/style&gt;

</head>
<body>
<div class=“wen”>文件</div>
<div id=“select”>编辑</div>
</body>
</html>

3.5 id选择器和类选择器的区别

id选择器只能使用一次，类选择器可以重复使用。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style type="text/css">
		.blue{           /* 类选择类似与人名可以重复使用 */
			color: blue;
		}
		#red{             /* id选择器类似与身份证只能使用一次 */
			color: red;
		}
	</style>
</head>
<body>
	<div class="blue">张三</div>
	<div id="red">李四</div>
	<div class="blue">张丽</div>
</body>
</html>

3.6 通配符选择器（很少用）

通配符选择器用“*”表示，是所有选择器中作用范围最广的，能匹配页面中所有元素。语法格式如下：

*{属性1：属性1；属性2：属性值2；属性3:属性值3；}

3.7 伪类选择器

3.7.1 链接伪类选择器

:link 未访问的链接。
:visited 已访问的链接。（很少用）
:hover 鼠标到链接上所显示的状态。

:active 选定的链接当我们点击松开鼠标时所显示的状态。（很少用）

注意：他们的顺序尽量不能颠倒，按照lvha的顺序去书写。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		a:link{     /* 未访问的链接 */
			font-size: 20px;
			color: gray;
			font-weight: 700;
		}
		a:visited{    /* 已访问的链接 */
			font-size: 20px;
			color: orange;
			font-weight: 700;
		}
		a:hover{     /*  鼠标移到链接上 */
			font-size: 20px;
			color: red;
			font-weight: 700;
		}
		a:active{     /* 选定的链接 当我们点击鼠标别松开鼠标显示的状态 */
			font-size: 20px;
			color: green;
			font-weight: 700;
		}
	</style>
</head>
<body>
	<div>
		<a href="#">秒杀</a>
		<!-- <a href="#">闪购</a> -->
	</div>
</body>
</html>

3.7.2 伪类选择器的简写（最常用）

a{
	font-size: 20px;
	olor: gray;
	font-weight: 700;
}
a:hover{
	color: red;
}

3.7.3 结构伪类选择器

:first-child:选取属于其父元素的首个子元素指定的选择器。
:last-child:选取属于其父元素的最后一个子元素的指定选择器。(在HBuilderX在中没有渲染效果)
:nth-child(n):匹配属于其父元素的第N个子元素。even是选择偶数，odd是选择奇数。

:nth-last-child(n)：选择器匹配属于其元素的第N个子元素的的每个元素，不论元素的类型，从最后一个子元素开始计数，n可以是数字、关键字、或者公式。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/* li:first-child{  选择第一个孩子
			color: red;
		}
		li:last-child{   选择最后一个孩子
			color: purple;
		}
		li:nth-child(4){   n 代表第几个的意思
			color: orange;
		} */
	<span class="token comment">/* li:nth-child(even){  偶数
		color: skyblue;
	}
	li:nth-child(odd){    奇数
		color: pink;
	} */</span>


	<span class="token comment">/* li:nth-child(2n){   公式
		color: purple;
	} */</span>

	<span class="token selector">li:nth-last-child(2n)</span><span class="token punctuation">{</span>
		<span class="token property">color</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</head>
<body>
<ul>
<li>第一个孩子</li>
<li>第二个孩子</li>
<li>第三个孩子</li>
<li>第四个孩子</li>
<li>第五个孩子</li>
<li>第六个孩子</li>
<li>第七个孩子</li>
</ul>
</body>
</html>

3.7.4 目标伪类选择器

:target{
		color: red;
		font-weight: 700;
	}

4. CSS的外观样式及应用

4.1 CSS的外观属性

4.1.1 文本的颜色

预定义的颜色值，如：red、green、blue。
十六进制：如#FF0000，#FF6600，十六进制是最常用的。
RGB代码，如红色可以表示为rgb(255,0,0)。

4.1.2 line-height行间距

line-height属性用于设置行间距，常用的属性值单位有三种，分别为像素px,相对值em和百分比%，实际中用的最多的是像素px。

一般情况下，行距比字号大7.8像素就行。

4.1.3 text-align：水平对齐方式

属性值：left左对齐，right右对齐，center居中对齐。

4.1.4 text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同的单位的数值、em字符宽度的倍数、或相对于浏览器窗口的百分比%，允许使用负值，建议使用em作为设置单位。一个em就是一个汉字的宽度。

4.1.5 letter-spacing:字间距（只对中文有用）

letter-spacing用于定义字与字之间的距离，其属性赋值为不同的单位值，允许使用使用负值，默认为normal。

4.1.6 word-spacing：单词间距（只对英文单词有用）

4.1.7 word-break：自动换行

normal:使用浏览器默认的换行规则。
break-all:允许在单词内换行
keep-all:只在半角空格或者连字符出换行。

4.1.8 颜色半透明（CSS3）

文字颜色到了CSS3，就可以采用半透明的格式

color:rgba(r,g,b,a);  a是alpha 透明的意思，取值范围在0~1之间，如 color:rgba(255,0,0,0.3);

4.1.9 文字阴影（CSS3）

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
如：text-shadow:1px 3px 4px rgba(255,0,0,0.3);

注意：前两项是必须写的，后面两项可以选写。

4.2 引入CSS样式表（属写位置）

4.2.2 行内式（内联式）

是通过标签的style属性来设置元素的样式，语法格式如下：

<标签名 style="属性1：属性值1：属性2：属性值2；属性3：属性值3；">内容<标签名/>

其中style是标签的属性，书写规范和css一样，行内式只对其所在的标签及嵌套在其中的子标签起作用。

4.2.2 内部样式表

内嵌式是将CSS代码集中写在head头部标签中，并且用style标签定义，语法格式如下：

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			color: pink;
		}
	</style>
</head>

语法中，style标签一般位于head标签中title标签之后，也可以把它放在HTML文档的任何地方。其中 type="text/css"在HTML中可以省略。

4.2.3 外部样式表（外链式）

链入式是将所有的样式放在一个或多个外部样式表文件中，通过link标签将外部样式链接到HTML文档中，语法格式如下：

<head>
	<link rel="stylesheet" type="text/css" href="text.css">
</head>

注意：

link是个单标签。
link放在head头部标签中，并且必须指定link标签的三个属性，
-herf:定义链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径，
-type：定义所链接文档的类型，在这里需要指定 text/CSS，表示链接的外部文件为CSS样式表。
-rel:定义当前文档与被链接文档之间的关系，在这里需要指定为 stylesheet ,表示链接的文档是一个样式表。

4.2.4 三种样式表的总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构的分离	较少	控制一个标签（少）
内部样式表	部分结构和样式分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式分离	需要引入	最多，推荐	控制整个站点（多）

4.3 标签显示模式（display）

4.3.1 块级元素（block-level）

每个块元素通常都是独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

特点：

总是从新行开始。
高度，行高、外边距以及内边距都可以控制。
宽度默认是容器的100%。
可以容纳内联元素和其他元素。

4.3.2 行内元素（inline-level）

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置高度、宽度、对齐属性，常用于控制页面中的文本样式。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。

行内元素的特点：

和相邻行内元素在一行上。
高度、宽度无效，但是水平方向的padding和margin可以设置，垂直方向的无效。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或者其他行内元素。（a特殊）

注意：

只有文字才能组成段落，因此p里面不能块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都失败文字类块级标签，里面不能放其他块级元素。
链接里面不能放其他链接。

4.3.3 行内块元素（inline-block）

在行内 块元素中有几个标签------<img />、<input />、<td />可对他们设置宽高和对齐属性
行内块元素的特点：
1.和相邻的行内元素（行内块）在同一行上，但是之间会有空白间隙。
2.默认的宽度就是它本身内容的宽度。
3.高度 ，行高， 外边距以及内边距都可以控制。

4.3.4 显示模式的转换

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{        /*  将块级标签模式转换成行内标签模式 */
			height: 100px;
			width: 100px;
			background-color: pink;
			display: inline;
		}	
		span{		/*  将行内标签模式转换成块级标签模式 */
			height: 100px;
			width: 100px;
			background-color: hotpink;
			display: block;
		}
		a{			/* 将行内标签模式转换成块内块标签模式 */
			height: 20px;     
			width: 30px;
			background-color: deeppink;
			display: inline-block;
		}
	</style>
</head>
<body>
	<div>123</div>
	<div>456</div>
	<div>789</div>
	<span>abc</span>
	<span>efg</span>
	<span>hij</span>
	<a href="">123</a><a href="">123</a>
</body>
</html>

5. CSS的复合选择器

5.1 交集选择器

交集选择器是由两个选择器构成，其中第一个选择器为你标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special.

h3.class{color:red;font-size:25px;}

记忆技巧：

交集选择器是并且的意思。即….又….的意思。比如：p.on选择的就是：类名为one的段落标签。该选择器用的相对较少，不建议使用。

div.singer{
				color: #FF0000;
				font-size: 25px;
			}

5.2 并集选择器

并集选择器（css选择器分组）是各个

并集选择器（css选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器和id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以用并集选择器为他们定义相同的css样式。

h3,.class{color:red;font-size:25px;}

注意:并集选择器是和的意思，就是说，只要逗号隔开的，所有选择器都会执行后面的样式。

p,div,h1,.yao{
   color: blue;
   font-size: 25px;
}

5.3 后代选择器

后代选择器又称包选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当发生标签嵌套是，内层标签就是外层标签的后代。


.class h3{
   color: blue;
   font-size: 25px;
}

div ul li{
	color: #0000FF;
	font-weight: bolder;
}

5.4 子元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.item li{       /* 后代选择器 */
				color: blue;
			}
			.item > li{     /* 子元素选择器 */
				color: red;
			}
		</style>
	</head>
	<body>
		<ul class="item">
			<li>一级菜单
				<ul>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

5.5 课堂案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 链接登录里面的颜色为红色,同时将主导航栏里的所有链接改成蓝色. */
			.site-r a{   /* 后代选择器 */
				color: #FF0000;
			}
			.nav ul li a{
				color: skyblue;
			}
			/* 主导航栏和侧导航栏里面文字都是14像素并且都是微软雅黑 */
			.nav,.sitenav{
				font: 14px "microsoft yahei";
			}
			/* 主导航栏里的一级菜单链接文字颜色为绿色 */
			.nav > ul > li > a{
				color: green;
			}
		</style>
	</head>
	<body>
		<div class="nav">      <!-- 主导航栏 -->
			<ul>
				<li><a href="#">公司首页</a></li>
				<li><a href="#">公司简介</a></li>
				<li><a href="#">公司产品</a></li>
				<li>
					<a href="#">联系我们</a>
					<ul>
						<li><a href="#">公司邮箱</a></li>
						<li><a href="#">公司电话</a></li>
					</ul>
				</li>
			</ul>
		</div>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sitenav<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>    <span class="token comment">&lt;!-- 侧导航栏 --&gt;</span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>site-l<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>左侧侧导航栏<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>site-r<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>登录<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

</html>

5.6 属性选择器

选取标签带有某种特殊属性的选择器，我们成为属性选择器。

选择器	示例
E[attr$=val]		属性值里包含val字符并且在“结束”的位置
E[attr]		存在arr属性即可
E[attr=val]		属性值完全等于val
E[attr*=val]		属性值里包含val字符并且在任意位置
E[attr^=val]		属性值里包含val字符并且在“开始”的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a[title]{
				color: #87CEEB;
				font-size: 25px;
			}
			input[type=text]{
				color: #FF0000;
			}
		<span class="token selector">div[class^=font]</span><span class="token punctuation">{</span> <span class="token comment">/* 以font开始的 */</span>
			<span class="token property">color</span><span class="token punctuation">:</span> #0000FF<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">div[class$=footer]</span><span class="token punctuation">{</span>
			<span class="token property">color</span><span class="token punctuation">:</span> #008000<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">div[class*=tao]</span><span class="token punctuation">{</span>
			<span class="token property">color</span><span class="token punctuation">:</span> #87CEEB<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>我是一个百度<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>百度<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>我是一个新浪<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>新浪<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>土豆<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>优酷<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>网易<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>文本框<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>文本框<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>文本框<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
	
	
	
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>font12<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>属性选择器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>font12<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>属性选择器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>font24<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>属性选择器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>font24<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>属性选择器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sub-footer<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>属性选择器footer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>jd-footer<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>属性选择器footer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-tao-nav<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>属性选择器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-tao-header<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>属性选择器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	
	
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

</html>

5.7 伪元素选择器

E::first-letter 文本的第一个单词或字（如日文中文韩文等）。
E::first-line 文本的第一行。
E::selection 可以改变选中的文本样式。
E::before和E::after在E元素的内部开始的位置和结束的位置创建一个元素，该元素为行内元素，且必须要结合content属性使用。

 P::first-letter{   /*  选择第一个单词 */
	color: #FF0000;
	font-size: 20px;
 }
 P::first-line{  /* 选择第一行 */
	color: #0000FF;
 }
 p::selection{    /* 当我们选中文字的时候可以变换的样式 */
	color: aqua;
 }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div::before{
				content:"我";
			}
			div::after{
				content: "18岁";
			}
		</style>	
	</head>
	<body>
		<div>今年</div>
	</body>
</html>

6. CSS的背景及应用

background-color	背景颜色
background-image
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动

background：背景颜色背景图片的地址背景平铺背景滚动背景位置

6.1 背景位置(background-position)

利用方位名词 left top||bottom right ||center等来更改图片的位置，默认的是left top。方位名词没有顺序，谁在前都可以。如果方位名词只写一个，另一个默认的是center。
精确单位值，第一值一定是X坐标，第二个值是Y坐标。
混搭：比如 background-position：center 10px;

		<style>
			div {
				width: 700px;
				height: 800px;
				background-color:pink;
				background-image: url(img/库里.jpg);
				background-repeat:no-repeat;
				/* background-position: left top; */
				/* background-position: bottom right; */
				/* background-position:center center; */
				/* background-position:left; */
				/* background-position: center 10px; */
				background-position:10px 15px;
			}
		</style>

6.2 背景附着

background-attachment：scroll| fixed;

参数：scroll:背景图像是随对象内容滚动的。fixed：背景图像固定。

6.3 背景简写

background的属性顺序并没有强制的标准，为了可读性，建议用如下顺序：

background：背景颜色背景图片地址背景平铺背景滚动背景位置;

background: #000 url(img/库里.jpg) no-repeat fixed center 50px;

6.4 背景透明（CSS3）

语法格式：

background: rgba(0, 0, 0, 0.5);

最后一个参数是alpha透明度，取值范围在0~1之间。

*注意：*背景半透明是指盒子的背景半透明，盒子里面的内容不受影响。同样可以给文字和边框透明，都是rgba的格式来写。

6.5 背景缩放（CSS3）

通过background-size设置背景图片的尺寸。起参数设置如下：

可以设置长度单位（px）或百分比（设置百分比时，参照盒子的宽高）。
设置为cover时，会自动调整缩放比例，保证图片始终填满背景区域，如有溢出部分则会被隐藏。
设置为contain时，会自动调整缩放比例，保证图片始终完全显示在背景区域。

div{
	width: 400px;
	height: 500px;
	background: hotpink url(img/timg.jpg) no-repeat ;
	/* background-size: 60%; */
	/* background-size: cover; */
	background-size: contain;

}

6.6 多背景（CSS3）

以逗号分隔可以设置多背景，可用于自适应布局，做法就是用逗号隔开就行。

一个元素可以设置多重背景图像。
每组属性之间使用逗号隔开。
如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景会覆盖在后面的背景上。
为了避免背景将图像盖住，背景色通常设置在最后一组上。

div{
	width: 500px;
	height: 500px;
	background:url(img/timg.jpg) no-repeat left top,
			  url(img/timg1.jpg) no-repeat right bottom  hotpink;
	background-size: 40%;
}

6.7 凹凸文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style text="text\css">
			body{
				background-color: #CCCCCC;
			}
			div{
				color: #CCCCCC;
				font: 700 80px "microsoft yahei"
			}
			div:first-child{
				/* text-shadow:水平位置 垂直位置 模糊距离 阴影颜色 */
				text-shadow:1px 1px 1px #000,
							-1px -1px 1px #fff;
			}
			div:nth-child(2){
				/* text-shadow:水平位置 垂直位置 模糊距离 阴影颜色 */
				text-shadow:-1px -1px 1px #000,
							1px 1px 1px #fff;
			}
		</style>
	</head>
	<body>
		<div>我是凸起的文字</div>
		<div>我是凹下的文字</div>
	</body>
</html>

6.8 导航栏案例

文本的装饰（text-decoration）通常用于给链接修改装饰效果。

值	描述
none	默认，定义标准的文本
underline	定义文本下的一条线
overline	定义文本上的一条线
line-through	定义穿过文本的一条线

使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。

7. CSS的三大特性

7.1 CSS 的层叠性

所谓的层叠性是指CSS多种样式的叠加。

一般情况下，如果出现样式的冲突，则会按照CSS书写的顺序，以最后的样式为标准。

7.2 CSS的继承性

所谓的继承性是指书写CSS样式的时候，子标签会继承父标签的某些样式，如文本的颜色和字号，想要设置一个可继承的属性，只要将它应用于父元素即可。

注意：恰当地使用继承可以简化代码，降低CSS样式的复杂性。但是，在网页中所有的元素都大量继承样式，那么判断样式的来源就很困难，所以对于字体、文本属性等网页中通用的样式可以使用继承。例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中的所有文本。

并不是所有的CSS属性都可以继承，例如，边框、外边距、内边距、背景、定位、元素高属性等不具有继承性。

7.3 CSS的优先级

CSS的特殊性

关于CSS的权重，我们需要一套公式来计算，这个就是CSS的Specificity,我们称为CSS的特殊性或者非凡性，同事一个衡量CSS值优先级的一个标准。

specificity用一个四位的数字串（CSS2是三位）来表示，更像四个级别，值从左到右，左面的值最大，一级大于一级，数位之间没有进制，级别之间不可超越。

每个元素（标签）贡献值	0,0,0,1
每个类，伪类贡献值	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式的贡献值	1,0,0,0，
每个！important贡献值	无穷大

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				color: red;
			}
			.wang {
				color: orange;
			}
			#zhe {
				color: green;
			}
			div{
				color: blue!important;
			}
		</style>
	</head>
	<body>
		<div class="wang" id="zhe" style="color: skyblue;">王者荣耀</div>
	</body>
</html>

权重是可以叠加的：

div ul li ---------->0,0,0,3
.nav ul li----------->0,0,1,2
a:hover--------->0,0,1,1
.nav a---------->0,0,1,1
#nav p--------->0,1,0,1

注意：数位之间没有进制；继承的权重是0；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.daohanglan{  /* 权重为0,0,1,0   但该权重为nav的*/
				color: red;
			}
			li{   /* 权重为0,0,0,1 */
				color: pink;
			}
		</style>
	</head>
	<body>
		<nav class="daohanglan">
			<ul>
				<li>继承的权重为0</li>
			</ul>
		</nav>
	</body>
</html>

总结优先级：

使用了!important声明的规则。
内嵌在HTML元素的style属性里面的声明。
使用了ID选择器的规则。
使用了类选择器、属性选择器、伪元素、和伪类选择器的规则。
使用了元素选择器的规则。
只包含一个通用选择器的规则。
同一类元素选择器遵循就近原则。

总结：权重属于优先级的算法，层叠是优先级的表现。

8. CSS的盒模型（CSS的重点）

8.1 盒子的边框

语法格式：

border:border-width  ||  border-color ||  border-style

边框样式（border-style）一般定义页面中的边框风格：

none:没有边框即忽略所有边框的宽度（默认值）。
solid：边框为单实线（最为常用的）。
dashed：边框为虚线。
dotted:边框为点线。
double：边框为双实线。

border的简写：

border：宽度 样式 颜色；
border：1px solid red;

合并细线表格：

border-collapse:collapse;/*合并相邻的边框*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>		
			table{
				width: 700px;
				height: 300px;
				border: 1px solid red;
				border-collapse: collapse;/* 合并相邻边框 */
			}
			td{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<table cellspacing="0" cellpadding="0">
			<tr>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
			</tr>
			<tr>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
			</tr>
			<tr>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
			</tr>
		</table>		
	</body>
</html>

sumjob

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	d大于号	`>`
&	和号	`&`
￥	人名币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2（上标2）	`²`
³	立方3（上标3）	`³`

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	d大于号	`>`
&	和号	`&`
￥	人名币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2（上标2）	`²`
³	立方3（上标3）	`³`

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	d大于号	`>`
&	和号	`&`
￥	人名币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2（上标2）	`²`
³	立方3（上标3）	`³`