HTML和CSS
第一章 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"><</span>tbody</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></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属性值
类型 | 格式 | 含义 |
---|---|---|
<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"></</span>form</span><span class="token punctuation">></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> <!-- 支持固定的浏览器的播放 -->
<audio autoplay controls> <!-- 多浏览器支持的方案 --> <source src="MIC男团 - 逐梦传奇 [mqms2].mp3"> <source src="MIC男团 - 逐梦传奇 [mqms2].ogg"> 你的浏览器不支持音频的播放 </audio>
3.播放视频
<video src="库里29生日,官方mv.mp4" autoplay controls width="500" height="300"></video> <!-- 支持固定的浏览器播放 -->
<video autoplay controls width="500" height="300"><!-- 多浏览器支持的方案 --> <source src="库里29生日,官方mv.mp4" > <source src="库里29生日,官方mv.ogg" > 你的浏览器不支持播放视频 </video>
第二章 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>
<style type="text/css"> .wen{ /* 类选择器 */ font:italic bold 20px "宋体" ; } #select{ /* id选择器 */ color: blue; font-weight: bolder; } </style>
</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"></</span>style</span><span class="token punctuation">></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"><</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">></span></span> <span class="token comment"><!-- 侧导航栏 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>左侧侧导航栏<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>登录<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></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"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>百度<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>新浪<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>土豆<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>优酷<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>网易<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>属性选择器<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>属性选择器<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>属性选择器<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>属性选择器<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>属性选择器footer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>属性选择器footer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>属性选择器<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>属性选择器<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></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>