初学HTML、CSS
- 一、了解什么是HTML、CSS?
- 二、五大浏览器
- 三、深入了解网站开发?
- Javascript与css、HTML之间的关系
- 四、HTML结构与基础属性
- 五、HTML初始代码
- 7、标题与段落
- 8、文本修饰标签?
- 9、图片标签?
- 10、链接标签?
- 11、锚点?
- 12、特殊字符?
- 13、列表标签
- 第二部分
- 1、表格标签?
- 表格属性?
- 18、表单标签?
- 表格表单组合?
- 19、div和span
- 20、css基础语法?
- 21、css样式的引入方式?
- 21、css中的颜色表示方法?
- css背景样式?
- css边框样式?
- css文字样式?
- css段落样式?
- css复合样式:
- css选择器?
- CLASS选择器
- **第三周**
- 第一部分、
- 一、第二部分
- 第三部分、
- 2、display显示边框类型
- 3、嵌套标签规范
- 4、overflow溢出隐藏
- 5、透明度与手势
- 11、清除float浮动
一、了解什么是HTML、CSS?
他们是两种编程语言,一般情况下需要配合使用,是作为网站开发的基础语言,是做网站的编程语言。
浏览器把代码解析后的样子就是我们看到的网站,如何看到网站的原始代码呢?通过鼠标右键选择查看网页代码。
如何写代码?写哪里呢?
一个网站是由N个网页组成的。每一个网页 .html文件
电视剧,四十集。
VS code编辑器?
学习编辑器基本使用?
设置:文件→首选项→设置(大小,是否换行word warp)
创建文件,创建文件夹,重命名和删除、搜索
ctrl+s:保存
ctrl+a:全选
ctrl+x、ctrl+c、ctrl+v:剪切、复制、粘贴
ctrl+z、ctrl+y:撤消、前进
shift+end:从头选中一行
shift+home:从尾部选中一行
shift+alt+↓:快速复制一行
alt+↑或↓:快速移动一行
tab:向后缩进
tab+shift:向前缩进
多光标:alt加鼠标左键
ctrl+d:选择相同元素的下一个
二、五大浏览器
chrome(市场份额最大,约69%)、edge、火狐、qq浏览器、360浏览器、百度
Google Chrome 由谷歌公司开发的网页浏览器,该浏览器基于其他开源软件撰写,包括Webkit,目标是提升稳定性、速度和安全性。并创造出简单并且有效率的使用者界面。
软件的名称来自称作Chrome的网络浏览器GUI(图形使用者界面)。软件的beta测试版本在2008年9月2 日发布。提供50种语言版本,有Microsoft Windows、macOS、Linux、Andro、以及IOS版本提供下载。
编程语言:C++、汇编语言、Javascript
Microsoft Edge由为人员开发的基于Chromium开源项目及其他开源软件的网页浏览器。
2015年4月30日,微软在旧金山举行的Build2015开发者大会上宣布——Windows 10内置代号为:Projiect Soartan:的新浏览器被正式命名为”Microsoft Edge“,其内置于Windows 10版本中。2018年3月,微软宣布Edge浏览器已经覆盖了桌面平台和移动平台。用户被允许在Google和App Store上下载Edge。
2022年5月16日,微软官方发布告,称IE浏览器于2022年6月16日正式退役,此后其功能将由Edge浏览器接棒。
火狐
名称由来
该项目定名时几经波折。项目最初取名“Phoenix”(Phoenix首个版本0.1于2002年9月23日发布 ),但因为和凤凰科技(Phoenix Technologies)的名称冲突,于是于2003年4月14日改为“Firebird”。后来,这个新名称又与另一个开源的数据库系统Firebird发生了冲突 ,Firebird的开发社区要求以全称“Mozilla Firebird”来标识这个项目或重命名,避免混淆。
2004年2月9日,Mozilla Firebird决定改称Mozilla Firefox,简称Firefox ,正式缩写为Fx或fx ,不过仍然常被称作FF(FireFox)。Firefox在英文俗语里指的是“红熊猫”,但开发小组却采用将“Fire”和“fox”分开来直译蕴意,把吉祥物及官方图标都设计为火红的小狐狸
2022年8月24日,IT之家消息,火狐浏览器 Firefox 104 版本发布。
其使用Gecko排版引擎,支持多种操作系统,如Windows、macOS及GNU/Linux等。Firefox有两个升级渠道:快速发布版和延长支持版(ESR)。快速发布版每四周发布一个主要版本,此四周期间会有修复崩溃和安全隐患的小版本。延长支持版每42周发布一个主要版本,期间至少每四周才有修复崩溃、安全隐患和政策更新相关的小版本。
由于该浏览器开放了源代码,因此还有一些第三方编译版供使用,如pcxFirefox、苍月浏览器、tete009等。
英国防病毒公司Sophos在2015年的调查数据显示,Firefox连续三年成为互联网用户最受信赖的浏览器。
Mozilla Firefox正式版各版本可到Mozilla官方FTP站下载。
QQ浏览器
QQ浏览器 是腾讯科技(深圳)有限公司开发的一款浏览器,其前身为TT浏览器。QQ浏览器秉承TT浏览器1-4系列方便易用的特点,但技术架构不同;交互和视觉表现也重新设计。采用Chromium内核+IE双内核,让浏览快速稳定,拒绝卡顿,完 美支持HTML5和各种新的Web标准。它同时可以安装众多Chrome的拓展,支持QQ快捷登录,登录浏览器后即可自动登录腾讯系网页 。
QQ浏览器是受人重视的产品之一,QQ浏览器7,采用单核模式,集超小安装包和超强稳定性于一身,访问网页速度也得到进一步优化。
2018年8月8日,QQ浏览器获金运奖最佳用户活跃奖。
2019年11月18日,腾讯公司推出的信息流内容服务腾讯看点登陆QQ浏览器平台,在QQ浏览器平台上,为3亿用户带来热门资讯、本地新闻、免费小说等资源。内容推荐与搜索双引擎驱动,理解用户的内容需求,提供需要的资讯与知识技能。
360浏览器
360安全浏览器(360 Security Browser)是360安全中心推出的一款基于Internet Explorer和Chromium双核的浏览器,是世界之窗开发者凤凰工作室和360安全中心合作的产品。
和360安全卫士、360杀毒等软件产品一同成为360安全中心的系列产品。360安全浏览器拥有全国最大的恶意网址库,采用恶意网址拦截技术,可自动拦截木马、欺诈、网银仿冒等恶意网址。独创沙箱技术,在隔离模式即使访问木马也不会感染。
百度
百度浏览器,是一款简洁轻快、智能懂你的浏览器。依靠百度强大的搜索平台,在满足用户浏览网页的基础上,它整合百度体系业务优势,带给用户更方便的浏览方式,更舒适的百度特色上网体验。
“世界很复杂,百度更懂你”,百度浏览器 依靠百度强大的平台资源,以简洁的设计、安全的防护、超快的速度、丰富的内容逐渐成为国内成长最快的创新PC浏览器。通过百度的开放整合和精准识别,用户可以一键触达海量优质的服务和资源,以及音乐、阅读、视频、游戏等个性娱乐诉求。
三、深入了解网站开发?
UI设计师:设计稿
web前端开发工程师(H5开发)
设计稿→代码
数据库里的数据→显示到页面
HTML+CSS
Web后端开发工程师
HTML负责结构
CSS负责样式
HTML是用来标记内容的(重在内容组织上)
Javascript与css、HTML之间的关系
HTML是超文本标记语言的简称,它是一种不严谨的、简单的标识性语言。它用各种标签将页面中的元素组织起来,告诉浏览器该如何显示其中的内容。
为什么说HTML是不严谨的呢?因为HTML标签即使不闭合,也并不会影响页面内容的组织。
CSS是用来修饰内容样式的(重在内容样式美化展示上)
CSS是层叠样式表的简称,它用来表现HTML文件样式的,简单说就是负责HTML页面中元素的展现及排版。
JavaScript是用来做交互的
JavaScript是一种脚本语言,即可以运行在客户端也能运行在服务器端。JavaScript的解释器就是JS引擎,JS引擎是浏览器的一部分。而JavaScript主要是用来扩展文档交互能力的,使静态的HTML具有一定的交互行为(比如表单提交、动画特效、弹窗等)。
HTML与CSS及JS的关系
这三者99%的情况下都是搭配使用的,但也不是绝对的,具体关系是:
HTML与CSS、JS是不同的技术,可以独立存在;
HTML一般需要CSS和JS来配合使用,否则单一HTML文档无论是功能还是展示上效果都不理想;
CSS一般是不能脱离HTML或XML的,如果CSS脱离了HTML和XML,那就没有存在的必要的;
JS可以脱离HTML和CSS而独立存在;
JS可以操作HTML和CSS。
总结:如果把HTML比做身体,那CSS就好比是衣服,而JavaScript则意味着人能做的一些高级动作。
Web三大核心技术
HTML
CSS
Javascript
四、HTML结构与基础属性
HTMLL: 超文本 标记 语言
超文本:文本内容,非文本内容(图片、视频、音频等)
标记:<单词>
语言:编程语言
标记也叫做标签:
**HTML5标签含义之元素周期表**
<header>hello world</header>
<header>hello world</header>
<header>hello world</header>
<header>hello world</header>
<header>hello world</header>
<header>hello world</header>
<header>hello world</header>
<header>hello world</header>
<header>hello world</header>
<header>hello world</header>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>...</title>
</head>
<body>
</body>
</html>
五、HTML初始代码
每个.html文件都有的代码就是初始代码,要符合html文件的规范写法。
快捷键!+tab键:快速的创造html文件的初始代码
HTML注释?
写法:<!-- 注释的内容 --!>在浏览器中看不到,只能在代码中看到注释前的内容。
意义:
1、把暂时不用的代码注释起来,方便以后使用。
2、对开发人员进行提示作用。
快捷添加注释与注释删除:
1、ctrl+/
2、shift+alt+a
7、标题与段落
标题->双标签:
在一个网页
标题最重要并且一个html文件中只能出现一次h1标签。
h5 h6 在网页中不经常使用,
段落→双标签
8、文本修饰标签?
强调->双标签:、
区别:1、写法和显示效果
2、strong的强调性更强,em强调性稍弱。
下标:
上标:
删除文本:
插入文本:
注:在一般情况下,插入文本和删除文本配合使用的。
9、图片标签?
ing→单标签
src:引入图片的地址
alt:当图片出现问题时,可以显示一段友好的提示文字
10、链接标签?
a->双标签
herf属性 :链接的地址
target属性:可以改变链接打开的的方式,默认情况下在当前页面打开。_self 新窗口打开_blank
base->单标签 :作用就是改变链接的默认行为的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu"target="black">访问百度</a>
</body>
</html>
11、锚点?
两种做法:
1、#号+id属性
2、:#号+name属性(注意:name属性加给的是a标签)
12、特殊字符?
1、&+字符
1、解决冲突 左右尖括号、添加多个空格的实现
3、< 左尖括号 > 右尖括号 nbsp 空格
13、列表标签
1、无序列表->ul li符合嵌套的规范
2、有序列表->ol li 一般用无序列表来实现。
3、定义列表->dl dt dd 列表项需要添加标题和对标题进行描述的内容,
注:列表之间可以互相嵌套,形成多层级的列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<dl>
<dt>中国</dt>
<dd>
<dl>
<dt>辽宁省</dt>
<dd>沈阳</dd>
<dd>大连</dd>
<dd>丹东</dd>
</dl>
<dl>
<dt>山东省</dt>
<dd>济南</dd>
<dd>青岛</dd>
<dd>烟台</dd>
</dl>
</dd>
<dt>美国</dt>
<dd>洛杉矶</dd>
<dd>纽约</dd>
</dl>
</body>
</html>
## 作业
-
好美味小吃
-
-
小吃类
- 煮粉干
- 伴青菜
- 蛋炒饭
- 煎蛋
- 米饭
-
卤味类
- 鸭肠
- 面筋
- 牛肚
- 猪耳朵
- 猪头肉
- 大肠
- 鱿鱼
套餐类
- 卤面筋饭
- 猪肉肉饭
- 猪耳朵饭
- 卤猪脚饭
- 卤猪舌头饭
## 补:跳转链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="./detal.html">详情页</a>
<img src="../images/屏幕截图(19).png" alt="">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="../indexl.html">返回首页</a>
<img src="../images/屏幕截图(9).png" alt="">
</body>
</html>
第二部分
1、表格标签?
<table>:表格的最外层容器
<tr>定义表格行
<th>定义表格头
<td>定义表格单元
<caption>定义表格标题
注:之间有嵌套关系,要符合嵌套规范。
语义化标签:<tHead> <tBody><tFood>
注:tBody可以出现多次,但是tFood、tHead只能出现一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<caption>天气预报</caption>
<thead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
<thead>
<tBody>
<tr>
<td>2018年7月15日</td>
<td><img src="./tianqi2.png" alt=""></td>
<td>天气晴朗,适合出行。</td>
</tr>
<tr>
<td>2018年7月18日</td>
<td><img src="./tiqnqi1.png" alt=""></td>
<td>有小雨,出门请带伞。</td>
</tr>
</tBody>
</table>
</body>
</html>
表格属性?
border:表格边框
cellpadding:单元格之内的空间
cellspcing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式
valign:上下对齐方式
align:left center right
valign:top middle bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellpadding="30" cellspacing="30">
<caption>天气预报</caption>
<thead>
<tr align="right" >
<th colspan="2">日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
<thead>
<tBody>
<tr valign="top">
<td rowspan="2">2018年7月15日</td>
<td>白天</td>
<td><img src="./tianqi2.png" alt=""></td>
<td>天气晴朗,适合出行。</td>
</tr>
<tr>
<td>夜晚</td>
<td><img src="./tiqnqi1.png" alt=""></td>
<td>天气晴朗,适合出行。</td>
</tr>
<tr valign="bottom">
<td rowspan="2">2018年7月18日</td>
<td>白天</td>
<td><img src="./tiqnqi1.png" alt=""></td>
<td>有小雨,出门请带伞。</td>
</tr>
<tr>
<td>夜晚</td>
<td><img src="./tiqnqi1.png" alt=""></td>
<td>有小雨,出门请带伞。</td>
</tr>
</tBody>
</table>
</body>
</html>
18、表单标签?
:表单的最外层容器。 :标签用于搜集用户信息,根据不同的type值属性。展示不同的控件,如输入框,密码框,复选框等。 input(单标签)标签有一个 type属性:决定什么是控件。 一开始就有勾的:checked 一开始就不可以选中的:disabled<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="http//.www.baidu">
<h2>输入框</h2>
<input type="text" placeholder="请输入用户名">
<h2>密码框</h2>
<input type="password" placeholder="请输入密码">
<h2>复选框</h2>
<input type="checkbox" checked>周成宇2b
<input type="checkbox" checked>周成宇运动男神
<input type="checkbox" disabled>阮哥是个有钱人
<h2>单选框</h2>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮和重置按钮</h2>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
cols:列 rows;行 multiple:多选 input type=“flie” 选择文件
text area:多行文本框
:下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<center>
<h4>电子邮箱:
<input type="text" placeholder="电子邮箱">
</h4>
<h4>设置密码:
<input type="password" placeholder="设置密码">
</h4>
<h4>真实姓名:
<input type="text" placeholder="真实姓名">
</h4>
<dd>性别:
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
</dd>
<dd>
生日:
<select size="">
<option selected disabled>请选择</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<select>年
<select>
<option selected disabled>月</option>
<option>1</option>
<option>2</option>
<option>3</option>
<select>月
<select>
<option selected disabled>日</option>
<option>1</option>
<option>2</option>
<option>3</option>
<select>日
<div><a href="https://new.qq/rain/a/20210404A00F6C00">为什么要填写我的生日?</a></div>
</dd>
<br>
<dd>
我现在:<select>
<option selected disabled>请选择身份</option>
<option >学生</option>
<option >老师</option>
<option >校领导</option>
<lect>(非常重要)
<br>
</dd>
<dd>
<img src="./链接的综合练习/images/1_1$9E)DZTGL]KI[K68G4XK.png" alt="错误了"width="150px" height="50px">
<a href="https://new.qq/rain/a/20210404A00F6C00">看不清楚换一张</a>
</dd>
<br>
<dd>
<strong>验证码:<>
<input type="password " placeholder="验证码">
</dd>
<br>
<input type="button" value="立即注册" onclick="alert('你按下了按钮')" >
</center>
</body>
<tfoot>
</tfoot>
<ml>
表格表单组合?
表格表单之间可以互相形成数据展示效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<table border="1" cellpading="30">
<tbody>
<tr align="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<tr align="right">
<td>用户名:</td>
<td> <input type=" " placeholder="请输入用户名"></td>
</tr>
<tr align="right">
<td>密码:</td>
<td> <input type="password" placeholder="请输入密码"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
19、div和span
div:做一个区域划分的块
span:对文字进行修饰的,内联。
20、css基础语法?
选择器:{属性1:值;属性2:值; 属性3:值;}
width:宽 height:高 background colour:背景颜色
长度单位:
1;px 像素
%:百分比
外容器600px: 当前容器50%→300px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div { width : 100PX ; height : 100px; background-color: red;}
span{ width: 14%; background-color: blue;}
</style>
</head>
<body>
<div>这是一个块</div>
<span>这是一个块</span>
</body>
</html>
21、css样式的引入方式?
1、内联样式
style属性
2、内部样式(注:内部样式的优点。可以复用代码)
style标签
区别:符合w3c标准,选择让结构和样式分开处理。
3、 外部样式
引入一个css文件:name:css
通过link标签引入外部资源 rel属性指定资源与页面的关系。helf:资源的地址。
通过@import方式引入外部样式。(这种方式有很多问题,不建议使用。)
21、css中的颜色表示方法?
1、单词表示法: red blue yellow black ....
2、 十六进制表示法:0 1 2 3 4 5 6 7 8 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d e f
3、 rgb三原色表示法:rgb(255,255,255);
取值范围 0~255
获取颜色的工具
提取颜色的下载地址:https://www。baidufe。com/fehelper
photoshop工具
css背景样式?
background-colour 背景色
background 背景图
url(背景地址)
默认:会水平垂直都铺满背景图
background-repeat 平铺方式
repeat-x
repeat-y
repeat(x,y都进行平铺.默认值)
no-repeat 都不平铺
background-position:背景位置
x,y : number(px、%) | 单词
x:left、center、right
y:tor、center、bottom
background-attachment:背景图随滚动条移动的方式
scoll:默认值(背景位置是按照当前元素进行偏移的)
fixed:(背景位置是按照浏览器d进行偏移的
)
css边框样式?
border-style:边框样式
solid:实线
dashed:虚线
dotted :点线
border-width:边框大小
px…
border-color:边框颜色
red f00 …
边框也可针对某一个边进行单独设置:border-left-style:中间是方向left right top bottom
颜色:透明颜色 transparent
css文字样式?
fornt-family:字体类型
英文 中文
1、注意点 :多个文字类型的设置目的
2、引号的添加目的
front-size:字体大小
默认:16pxp’x
写法:number (px )|单词)(small large 不推荐使用)
fornt- weight:字体粗细
模式:正常(mormal)加粗(bold)
写法:单词(normal、bold)|(number)(100 200 …900 100到500都是正常的,600到900都是加粗的)
fornt-style:字体样式
模式:正常(normal ) 斜体(italic)
写法单词 (normal italic)
注:oblique也表示斜体 用的比较少,一般了解即可
区别:italic:所有带有倾斜字体的可以设置
2、oblique没有倾斜字体的属性也可以设置倾斜操作。
css段落样式?
text-decoration :文本装饰
下划线、underline
删除线line-through
上划线:overline
不添加任何装饰:none
注;添加多个文本修饰:line-through underline overline
text-transform:文本大小写(针对英文段落)
小写:lowercase
大写:uppercase
只针对字母大写:capitilize
text-indent:文本缩进
首行缩进
em单位:相对单位 1em永远都是跟字体大小相同
text-align:文本对齐方式
line-height:定义行高
什么是行高。一行文字的高度,上边距和下边距的等价关系。
默认行高,不是固定值而是变化的
默认行高,不是固定值,而且是变化的。根据当前字体的大小在不断的变化。
取值:1、number(px)| scale(比例值,跟文字大小成比例的 )
letter-spacing:词之间的间距(针对英文段落的)
英文和数字不自动折行的问题,
1、world-break:break-a11(0非常强烈的折行)
2、world-warp:breakworld;(不是那么强烈的折行会产生一些空白区域)
css复合样式:
复合的写法:是通过空格的方式实现的。复合写法有的是不需要关心顺序,例如background
border,有的是需要关心顺序;例如font
1、background:red url()repeat0 0 ;
2、border:1px red solid ;
3、font:
注:最少有两个值 size family
weight syle size family √
syle weight size √
weight style size/line -height family √
注:如果非要这样写的话;那么要先写复合样式,再写一下简单样式,这样样式才不会被覆盖掉。
css选择器?
1、TD选择器
#elem() id=“elem
注:id是唯一值,在一个页面中只能出现一次,出现多次是不符合规范的。
2、命名的规范:由字母’下划线‘中划线,字母(并且第一个不能是数字)
3、驼峰写法(searchButton 小驼峰) S饿啊日和Button(大驼峰)searchsmallbutton
短线写法:search-small-buttom
下划线写法:search_small_button
CLASS选择器
.elem() class=“elem”
注:1、class选择器是可以复用的。
可以添加多个class样式。
3、多个样式的时候,样式的优先级可以根据css决定。而不是class属性决定的
4、标签+类的写法
第三周
第一部分、
1.标签选择器
该部分主要介绍css各种选择器及其注意事项与用法。
**1.标签选择器()tag选择器:**如div{}对应div标签
使用场景:1.去掉某些标签的默认样式时
2.复杂的选择器中,如层次选择.
**2.群组选择器()分组选择器:**可以通过逗号的方式,给多个不同的选择器添加统一的css样式,来达到代码的复用。
3.通配选择器: *{} -> div,ul,li…{}
注:尽量避免使用通配选择器,因为会给所有的标签添加样式,慎用.
使用场景:去掉所有标签的默认样式时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div ,#div1,.div3{background-color: aquamarine;}
</style>
</head>
<body>
<div>鼠鼠</div>
<div id="div1">叔叔</div>
<div class="div3">数数</div>
</body>
</html>
2.层次选择器
该部分主要介绍层次选择器的使用方法及其内涵.
1.选择器类别: 后代 m n {}
父子 m > n {}
兄弟 m ~ n {} 当前m下面的所有兄弟n标签
相邻 m + n {} 当前m下面相邻的n标签
后代即是同一大标签内的所有标签,父子是只有下一个有,兄弟是下面所有,相邻就是相邻的对应标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1 h1{text-decoration:underline;}
#ol1 > li{font-weight: 700;}
#ul1 ~ li{border:1px red solid; }
#div2 + p{background-color: brown;}
</style>
</head>
<body>
<div id="div1">
<h1>本周的特别主题是“猫兄酱紫长?”</h1>
<h2>猫猫也很可爱</h2>
</div>
<ol id="ol1">
<li>猫儿子
<ol>
<li>猫孙子</li>
</ol>
</li>
</ol>
<ul id="ul1">
<li>0.0.有id的猫</li>
</ul>
<ul>
<li>没有id的猫</li>
</ul>
<div>
<p>被div岔开的喵喵</p>
</div>
<div id="div2">
<p>内部的喵喵</p>
</div>
<p>相邻的喵喵</p>
</body>
</html>
**3.属性选择器**
该部分主要说明属性选择器的用法.
1.属性选择器的用法:
m[] {}
=:完全匹配
*=:部分匹配
^ =: 起始匹配
$ =: 结束匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div[id*=div1]{background: red;}
</style>
</head>
<body>
<div id="div1">喵</div>![请添加图片描述](https://img-blog.csdnimg/ce1c1c2b4e8f408aba92f5e4e8038ee7.png)
<div id="div1-div2">喵喵</div>
<div id="div3-div1">喵喵喵</div>
<div id="div4-div1">喵喵喵喵</div>
<div id="div5-div1">喵喵喵喵喵</div>
</body>
</html>
不能重复使用div{}
**4.after,hover等伪类选择器**
该部分主要讲after伪类的使用方法及其作用
1.伪类选择器: css伪类用于向某些元素添加特殊的效果,一般用于初始样式添加不上的时候,用来伪类来添加
2.css伪类:
m:伪类{}
:link 访问前的样式 (只能添加给a标签)
:visited 访问后的样式 (只能添加给a标签)
: hover 鼠标移入时的样式 (可以添加给所有的标签)
: active 鼠标按下时的样式 (可以添加给所有标签)
: after,before
:checked,disabled
:focus
如果四个伪类都生效,一定要按l v h a 的顺序添加
一般网站只这样去设置: a{} a:hover{}
:after,before 通过伪类浮的方式给元素添加一段文本内容,使用content属性
:checked,disabled,focus 都是针对表单元素的
``<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{color: brown;}
a:hover{color: aqua;}
</style>
</head>
<body>
<a href="">流体喵</a>
</body>
</html>
shift+ ctrl+ delt 清楚浏览器缓存
5.结构伪类选择器
该部分主要讲解伪类结构选择器的作用
1.选择器种类:
nth-of-type() nth-child()
角标从1开始,1表示第一项,以此类推,无线大
first-of-type,last-of-type,only-of-type
child去掉of与type相同
2.type与child的区别:
type:种类,child:孩纸
child修饰的是同阶级的第二个
实验中发现only作用于被包含元素中,且在同级中能重复出现,其它属性类似。
<div>
<span></span>
<a href="#"></a>
</div>
块嵌套块
<div>
<div></div>
</div>
特殊:
<p>
<div></div>
</p>
内联是不能嵌套块
错误的写法:
<span>
<div></div>
</span>
特殊:
正确的写法:
<a href="">
<div></div>
</a>
总之 标签嵌套规范
块标签可以嵌套内联标签
快标签不一定能嵌套块标签
内联标签不能嵌套块标签
a标签是一个例外
6.css样式继承
该部分主要讲解css样式继承的条件与用法
1.继承语言: {属性:inherit}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{ width: 60px;height: 60px; border: 2px red solid;}
p{border:inherit;}
</style>
</head>
<body>
<div>
<p>喵~~~~~~~~~~~~~~~~~~~~ao</p>
</div>
</body>
</html>
**相同样式优先级:**设置相同样式后,后面的优先级较高,但不建议出现相同样式的情况.
2.内部样式与外部样式: 内部样式与外部样式优先级相同,同样是后写的优先级更高。
style>id>class>tag>*>继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{color: rgb(221, 0, 255);}
*{color: red;}
.div1{color: black;}
div:{background:inherit;}
</style>
</head>
<body>
<div id="div1" class="div1" style="color:rgb(0, 255, 89)">0.0</div>
</body>
</html>
8.!important群组等优先级
该部分主要说明!important群组的优先级顺序
**1.!important:**提升样式优先级,不规范,不建议。
**2.标签+类与单类:**标签+类>单类
**3.群组优先级:**群组选择器与单一选择器的优先级相同,后写优先级更高.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.p1{color: red;}
div{color:green}
h1{color: red;}
h1,h2{color: blue;}
#name{color: green;}
h3{color: rebeccapurple!important;}
</style>
</head>
<body>
<div class="p1">
<p>o(=•ェ•=)m</p>
</div>
<h1>
<h2>o(=•ェ•=)m</h2>
</h1>
<h3 id="name">o(=•ェ•=)m</h3>
</body>
</html>
9.层次的优先级
该部分主要讲解层次的优先级比较
1.权重比较:
ul li .box p input{} 1+1+1+10+1+1
.hello span #elem{} 10+1+100
2.约分比较:
ul li .box p input{}
.hello span #elem{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul,.box{color: red;}
ul,#name{color: green;}
</style>
</head>
<body>
<div >
<ul id="name"class="box">
<li>0.0</li>
</ul>
</div>
</body>
</html>
一、第二部分
1.css盒子模型
该部分主要讲解css盒子模型的概念及其用法
1.组成: content(物品)——paading(填充物)——border(包装盒)——margin(盒子之间的间距)
content:width与height组成
padding:内边距(内填充)
padding-(left,right,top,bottom)margin也一样
2.效果:
1.背景色填充到margin以内的区域(不包括margin)
2.文字在content区域添加.
3.padding不能为负数,而margin可以为负数.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{ width:900px;height:900px;
background-color: red;padding: 30px;margin: -60px;}
#div2{width: 900px;height:900px;background-color:blue;}
</style>
</head>
<body>
<div id="div1">( ̄(工) ̄)</div>
<div id="div2">( ̄(工) ̄)</div>
</body>
</html>
2.box-sizing改变盒模型
该部分主要介绍部分改变盒子模型的方式
**1.盒模型默认:**盒尺寸,可以改变盒子模型的展示形态。
默认值: content-box:width,height——cnotent
border-box:width,height——content padding border
2.使用场景:
1.不再去计算一些值
2.解决一些100%的问题
2.box-sizing: box-sizing属性允许以特定的方式匹配某个区域的特定元素,取值为content-box border-box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 100px; height: 100px;background-color: aqua;padding: 10px ;margin: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>好困0.0</div>
</body>
</html>
3.盒模型之margin叠加问题
该部分主要介绍叠加问题的解决方法
1.问题: 当给两个盒子同时添加上下外边距的时候,就会出现叠加问题,这个问题只在上下有,左右是没有这个叠加问题的.
2 解决方案: bfc规范 只给一个元素添加间距
!DOCTYPE html>
4.盒模型之margin传递问题
该部分主要解决margin传递时的一些问题
1.问题: magin传递问题只会出现在嵌套结构中,且只有margin-top会有传递的问题,其它三个方向是没有传递问题的.
2.解决方案: bfc规范,给父容器加边框,margin换成padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#span1{background-color: red;margin:100px;}
#span3{background-color: green;margin:100px;}
#div1{width: 200px;height: 100px;background-color: red;padding-top: 100px;}
#div2{width: 100px;height: 100px;background-color: aquamarine;}
</style>
</head>
<body>
<div>喵喵<span id="span1">喵喵喵喵喵</span>喵喵</div>
<div>喵喵<span id="span3">喵喵喵喵喵</span>喵喵</div>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
5.css盒模型之拓展
该部分主要讲的是css的拓展知识
1.拓展: margin左右自适应是可以的,但是上下自适应是不行的(现在不行)
width,height不设置的时候,对盒子模型的影响,会自动去计算容器的大小
6.盒子模型的嵌套练习
第三部分、
该部分主要介绍标签类型,了解大概即可。
按类型:
block:div、p、ul、li、h1 …
1、独占一行
2、支持所有样式
3、不写宽的时候,跟父元素的宽相同
4、所占区域是一个矩形
inline:span 、a、 em 、strong、img、…
1、挨在一起的
2、有些样式不支持,例如:width、height、margin、padding、
3不写宽的时候,宽度由内容决定
4、所占的区域是一个矩形
5、内联标签之间会有空隙,原因:换行产生的
inline-block:input、select...
1、挨在一起,但是支持宽高
注:布局一般使用块标签,修饰文本一般使用内联标签
按内容:
flow:流内容
Metadata:元数据
Sectioning:分区
Heading:标题
phrasing:措辞
Embeddrd;嵌入的
Interactive:互动的
(详情:https://www.w3/TR/html5/dom.html)
2、display显示边框类型
该部分主要显示框的分类
1、类型:display:biock inline inline-block none…
2、区别;display:none不占隐藏的隐藏
visiblity:hidden 占空间的隐藏
block不内联 inline内联 inline-block并列 none隐藏
实操效果
3、嵌套标签规范
该部分主要介绍标签嵌套规范注意事项
标签嵌套规范?
ul、li
dl dt dd
table tr td
块能够嵌套内联
4、overflow溢出隐藏
**标签**:overflow:visible(默认),hidden,scroll,suto,(x,y轴)
!<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 100px;height: 100px;overflow:scroll
;border-color: black;}
</style>
</head>
<body>
<div>喵喵喵喵喵喵喵喵
喵喵喵喵喵喵喵喵
喵喵喵喵喵喵喵喵
喵喵喵喵喵喵喵喵
喵喵喵喵喵喵喵喵
喵喵喵喵喵喵喵喵
</div>
</body>
</html>
5、透明度与手势
1、调节不透明度:opacity:0(透明)~(不透明)
注:占空间,所有的子内容也会透明 rgba():0~1
注:可以让指定的样式透明,而不影响其他样式
2、手势;cursor:手 default:默认箭头
自定义手势;图片:.cur,.ico cursor:url(#),auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{width: 100px;height: 100px;background-color: aqua;opacity: 0.5;}
#div2{width: 100px;height: 100px;background: rgba(255, 0,0 ,1);cursor: alias;}
</style>
</head>
<body>
<div id="div1">mao</div>
<div id="div2">mao</div>
</body>
</html>
6、最大最小宽高
1、代码: min-width height max-width,height
没什么用不如直接加宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{max-width: 200px;min-height: 200px;border:1px red solid;}
</style>
</head>
<body>
<div>喵喵喵喵喵
喵喵喵喵喵
喵喵喵喵喵
喵喵喵喵喵
喵喵喵喵喵
喵喵喵喵喵
</div>
</body>
</html>
7、css默认样式
没有默认样式的:div span
有默认样式的
body -> marign :8px
h1 -> marign :上下21.440px
font-weight :blod
<p-> marign:上下 16px
ul->marign :上下 16px padding:左 40px
默认点:list-style :disc
a-> text-decoration:underling ;
8、css重置样式
*1、重置方法:
*{marign:0; padding :0; }
ul{list-style:none}
a{text-decoration:none;
color:#666;}
img{display :block}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{list-style: none;}
div{ border: 1px red solid;}
</style>
</head>
<body>
<div><img src="./图片/4960A5E8EC6E8131A4F29A750A8AA52D.jpg" alt=""></div>
</body>
</html>
9、float浮动概念及其原理
大块要在下面
脱离文档流,延迟父容器靠左或靠右进行排列
left right none
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{border: 1px black solid;}
#div1{width: 50px;height: 50px;background: green;float: left;}
#div2{width: 100px;height: 100px;background: red;float: left;}
#div3{width: 200px;height: 200px;background:blue
;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
10、float注意点
float注意点
只会影响后面的元素。
内容默认提升半层。
默认宽根据内容决定。
换行排列。
主要给块元素添加,但也可以给内联元素添加。
11、清除float浮动
如何清除浮动?
上下排列:
clear属性,表示清除浮动的,left、right、both、
嵌套排列:
固定宽高:不推荐,不能把高度固定死,不适合做自适应的效果。
父元素浮动:不推荐,因为父容器浮动也会影响后面的元素。
overflow :hidden(BFC规范),如果有子元素像溢出,那么也会受到影响。
display:inline-block(BFC规范),不推荐,父容器会影响到后面的元素。
设置空标签:不推荐,会多添加一个标签。
after伪类:推荐,是空标签的加强版,目前各大公司的做法。
(clear属性只会操作块标签,对内联标签不起作用)
12.float制作页面小结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
img{display: block;}
a{text-decoration: none; color: #666;}
h1,h2,h3{font-size: 16px;}
.l{ float: left;}
.r{ float: right;}
.clear:after{ content:"";display: block;clear: both;}
#main{width: 400px;margin: 30px auto;}
#main .h22{font-size:10px ;height: 25px;line-height:25px ;font: 700;padding-left: 30px;background: url(../素材图片/背景色.webp)repeat-x;}
#mian ul{overflow: hidden; margin-top: 9px;}
#main li{margin-bottom: 5px;}
#main .div1{border: 1px grey solid;width: 100px;height: 100px;padding-left: 20px;}
#mian .div1 img{margin: 2px;}
#main .div2{width:200px;margin-left: 13px;}
#main .div2 h2{line-height: 30px;}
#main .div2 p{line-height:30px ;}
</style>
</head>
<body>
<div id="main">
<h2 class="h22">面狼和猫</h2>
<ul>
<li class="clear">
<div class="l div1">
<a href="">
<img src="../素材图片/面狼.jpg" alt=""width="100px" height="100px"></a>
</div>
<div class="l div2">
<h2>眠狼的画与猫</h2>
<p>眠狼的画6666666666666666666666666 <a href="#">[详细]</a>
</p>
</div>
</li>
<li class="clear">
<div class="l div1">
<a href="">
<img src="../素材图片/面狼2.jpg" alt=""width="100px" height="100px">
</a>
</div>
<div class="l div2">
<h2>眠狼的画与猫</h2>
<p>眠狼的画6666666666666666666666666<a href="#">[详细]</a>
</p>
</div>
</li>
<li class="clear">
<div class="l div1">
<a href="">
<img src="../素材图片/面狼3.jpg" alt=""width="100px" height="100px">
</a>
</div>
<div class="l div2" >
<h2>眠狼的画与猫</h2>
<p>面狼的画66666666666666666666666666666<a href="#">[详细]</a>
</p>
</div>
</li>
</ul>
</div>
</body>
</html>
更多推荐
初学HTML、CSS
发布评论