Web前端学习html css（一）
10.15
1.1 导学
1.拨云见日
html ，css， 切图流程， PC企业布局， PC游戏布局
2.溯本求源
扩展html ， 扩展css， html5新语法，css3新语法，兼容与hack
3.风声水起
弹性布局，网格布局，移动端布局，响应式布局，Bootstrap
4.巧夺天工
预编译css，postcss css架构，高级功能，css与js交互
1.2.什么是html ，css？
做网站的编程语言
浏览器把代码解析后就是我们看到的网站，鼠标右键看源代码
如何写代码，写在哪里呢？
一个网站是由多个网业组成的
新建文本文档 ，，改后缀名，通过打开方式，进行修改网页。
html
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
css
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
1.3.VS code编译器
Visual Studio Code（简称“VS Code” [1] ）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器， [2] 可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。
下载地址
https://code.visualstudio.com/
插件： open in browser ，view in browser，语言包
学习编译器基本使用：
ctrl+s 保存
创建文件 创建文件夹 重命名 删除 搜索
ctrl+x 剪切 ctrl+c剪切 ctrl+v粘贴
ctrl+z撤销，ctrl+y前进
shift+end（home）从前（后）选一行
shift+alt+↓ 快速复制一行
10.16
tab 向后缩进
tab+shift 向前缩进
alt+↓（↑）快速移动一行
多光标：alt+鼠标左键
ctrl+d 选择相同元素的下一个
Chrome浏览器
简介
深入了解网站开发
UI设计师：模板 设计稿
web前端开发工程师（H5开发）
设计稿——>代码
html+css
HTML:结构
CSS:样式
web后端开发工程师
数据库里数据->显示到页面
Javascript
简介：JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
与css html的关系：
这三者99%的情况下都是搭配使用的，但也不是绝对的，具体关系是：
HTML与CSS、JS是不同的技术，可以独立存在；
HTML一般需要CSS和JS来配合使用，否则单一HTML文档无论是功能还是展示上效果都不理想；
CSS一般是不能脱离HTML或XML的，如果CSS脱离了HTML和XML，那就没有存在的必要的；
JS可以脱离HTML和CSS而独立存在；
JS可以操作HTML和CSS。
总结：如果把HTML比做身体，那CSS就好比是衣服，而JavaScript则意味着人能做的一些高级动作。
三剑客
HTML:结构
CSS:样式
Javascript：交互（行为）
10.17
HTML基本结构和属性
html：超文本 标记 语言
超文本：文本内容+非文本内容（图片 视频 音频等）
标记：<单词>
语言：编程语言
标记也叫做标签
写法分为两种：单标签<>双标签<></>
创件标签的快捷键 ：单词+tab
标签可以上下排列也可以组合嵌套
html常见标签：
标签的属性：来修饰标签，设置标签的功能<标签 属性=“值”>可以加多个标签
HTML初始代码（符合规范）
快捷键：！+tab （快速创建初始代码）
<!DOCTYPE html> 文档申明告诉浏览器是一个HTML文件
<html lang="en"> lang=“en"表示英文网站 cn中文网站
<head><meta charset="UTF-8">/*meta元信息，是编写网页中的一些赋值信息*/charset="UTF-8"不容易出现乱码<title>Document</title>设置网业的标题
</head>
<body>显示网页内容的区域
</body>
</html>
HTML注释
写法：<!--注释的内容-->在浏览器中看不到，只能在代码中看到注释的内容。
意义：
1.把暂时不用的代码注释起来，方便以后使用。
2.对于开发人员进行提示。
快捷添加注释与删除：
1.ctrl+/
2.shift+alt+a
10.18
html语义化（选择合适的标签进行编写 ）
好处：
1.在没有css的情况下，页面能呈现很好的内容结构。
2.有利于SEO，让搜索引擎爬虫更好的理解网页。
3.方便其他设备解析。（屏幕阅读器，盲人阅读器）。
4.便于团队开发与维护。
标题与段落
标题->双标签
…
在一个网页中，h1标题最重要，并且一个.html文件只能出现一个h1标签。
h5 h6不经常使用
段落——>双标签
练习：
<!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>
<h1>王辉</h1>
<h2>个人简介</h2>
<h3>主授课程</h3><p>高等数学等</p><p>个人简历</p><p>2005.9—2007.6：武汉大学数学学院，硕士</p> <p>2007.9—2010.6：南开大学数学学院，博士 </p><p>2010.6至今：南京邮电大学 理学院</p><h4>研究领域</h4><p>微分几何与李群李代数</p></body>
</html>
效果如下
文本修饰标签
强调->双标签,
区别：
1.一个加粗一个斜体
2.strong的强调性强，em稍弱
上(下)表文本()
删除文本删除线
插入文本
两个混合使用
10.19
图片标签与图片属性
img->单标签
src引入图片地址
alt当图片出现问题的时候，替代图片显示文字
title提示信息
width，height：图片大小
引入文件的地址路径
相对路径
1...跳到上一级
绝对路径（完整路径）
跳转链接
<a> </a>
href属性：链接的地址
target属性：可以改变链接打开方式，默认情况下在当前页面打开—self 新窗口打开—blank
base->单标签，改变链接默认行为的。
<base target="_blank">
跳转锚点
实现一
#号
id属性
实现二
#号
name属性（加给a标签的）
<!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="#html">HTML</a><a href="#CSS">CSS</a><a href="#JavaScript">JavaScript</a><h2 id="html">HTML超文本标记语言<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><h2 id="CSS">CSS层叠样式</h2><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><h2 id="JavaScript">JavaScript</h2><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
</body>
<html>效果如下
特数符号
代码可以忽略空格，所以要空格符
无序列表
<ul>、<li>：列表的最外层容器，列表项
注：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>
</head>
<body><ul><li>第一项</ul> <li>第二项</ul> <li>第三项</ul> </ul>
</body>
<html>
效果如下
有序列表
<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>
</head>
<body><ol><li>第一项</ul> <li>第二项</ul> <li>第三项</ul> </ol>
</body>
效果如下
type属性<ol type="a">
定义列表<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>
<body>
<dl><dt>HTML</dt><dd>超文本标记语言</dd><dt>CSS</dt><dd>层叠样式表</dd><dt>JavaScript</dt><dd>网页脚本语言</dd>
</dl></body>
<html>
效果如下
10.22
嵌套列表
列表之间可以互相嵌套形成多层级列表
<!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><ul><li>辽宁省<ul><li>沈阳</li><li>大连</li><li>丹东</li></ul></li><li>山东省<ul><li>济南</li><li>烟台</li><li>青岛</li></ul></li></ul>
</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=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- <ul><li>辽宁省<ul><li>沈阳</li><li>大连</li><li>丹东</li></ul></li><li>山东省<ul><li>济南</li><li>烟台</li><li>青岛</li></ul></li></ul> --><dl><dt>中国</dt><dl><dt>辽宁省</dt><dd>沈阳</dd><dd>大连</dd><dd>丹东</dd></dl><dl><dt> 山东省</dt><dd>济南</dd><dd>青岛</dd><dd>烟台</dd></dl><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=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- <ul><li>辽宁省<ul><li>沈阳</li><li>大连</li><li>丹东</li></ul></li><li>山东省<ul><li>济南</li><li>烟台</li><li>青岛</li></ul></li></ul> --><!-- <dl><dt>中国</dt><dl><dt>辽宁省</dt><dd>沈阳</dd><dd>大连</dd><dd>丹东</dd></dl><dl><dt> 山东省</dt><dd>济南</dd><dd>青岛</dd><dd>烟台</dd></dl><dt>美国</dt><dd>洛杉矶</dd><dd>纽约</dd></dl> --><h1>好美味的小吃</h1><ul><li>小吃类<ul><li>拌青菜</li><li>蛋炒饭</li><li>煮粉干</li><li>煎蛋</li><li>米饭</li></ul></li><li>卤味类<ul><li>鸭肠</li><li>面筋</li><li>牛肚</li><li>猪耳朵</li><li>猪头肉</li><li>大肠</li><li>鱿鱼</li></ul></li><li>套餐类<ul><li>卤肉筋饭</li><li>猪肉肉饭</li><li>猪耳朵饭</li><li>卤猪脚饭</li><li>卤猪舌头饭</li></ul></li><li>炖罐类<ul><li>猪蹄黄豆</li><li>猪肚莲子</li><li>猪心枸杞</li><li>羊肉枸杞</li><li>牛肉枸杞</li></ul></li></li></ul><em>亲,20元以上可送餐哦!!</em>
</body>
</html>
效果如下
表格标签
<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>：定义表格单元
<caption>：定义表格标题
之间是有嵌套关系的，要符合嵌套规范
<!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><tr><th>日期</th><th>天气情况</th><th>出行情况</th></tr><tr><td>2019.1.1</td><td><img src="./OIP-C.jfif" alt=""></td><td>天气晴朗，适合出行</td></tr><tr><td>2019.1.2</td><td><img src="./OIP-C (1).jfif" alt=""></td><td>有小雨，出门请带伞</td></tr></table>
</body>
</html>
效果如下
语义化标签:<tHead>,<tBody>,<tFood>
<!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>2019.1.1</td><td><img src="./OIP-C.jfif" alt=""></td><td>天气晴朗，适合出行</td></tr><tr><td>2019.1.2</td><td><img src="./OIP-C (1).jfif" alt=""></td><td>有小雨，出门请带伞</td></tr></Tbody><tFood></tFood></table>
</body>
</html>
效果如上图一样
tBody可以出现多次，但是tHead，tFood只能出现一次
表格属性
border：表格边框
cellpading：单元格内空间
cellspacing：单元格之间空间
rowspan:合并行
colspan：合并列
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><caption>天气预报</caption><tHead><tr><th>日期</th><th>天气情况</th><th>出行情况</th></tr></tHead><Tbody><tr><td>2019.1.1</td><td><img src="./OIP-C.jfif" alt=""></td><td>天气晴朗，适合出行</td></tr><tr><td>2019.1.2</td><td><img src="./OIP-C (1).jfif" alt=""></td><td>有小雨，出门请带伞</td></tr></Tbody><tFood></tFood></table> --><table border="1" cellpading="30" cellspacing="30"><caption>天气预报</caption><tHead><tr align="right" valign="top"><th colspan="2">日期</th><th>天气情况</th><th>出行情况</th></tr></tHead><Tbody><tr><td rowspan="2">2019.1.1</td><td>白天</td><td><img src="./OIP-C.jfif" alt=""></td><td>天气晴朗，适合出行</td></tr><tr><td>夜晚</td><td><img src="./OIP-C.jfif" alt=""></td><td>天气晴朗，适合出行</td></tr><tr><td rowspan="2">2019.1.2</td><td>白天</td><td><img src="./OIP-C (1).jfif" alt=""></td><td>有小雨，出门请带伞</td></tr><tr><td>夜晚</td><td><img src="./OIP-C (1).jfif" alt=""></td><td>有小雨，出门请带伞</td></tr></Tbody><tFood></tFood></table>
</body>
</html>
效果如图
作业
<body><table border="1" cellpading="30"><tr><td>班次名称</td><td>科目</td><td>授课内容</td><td>增值服务</td><td>课时</td><td>价格</td><td>试听</td><td>购买</td></tr><tr><td rowspan="3">真题精解班</td><td>行测+申论</td><td>全科历年真题精解</td><td rowspan="3">课后赠两套模拟卷24小时以内答疑</td><td>48</td><td>1280元</td><td><img src="./QQ截图20221023211810.png" alt=""></td><td><img src="./QQ截图20221023211856.png" alt=""></td></tr><tr><td>行测</td><td>行测历年真题精解</td><td>32</td><td>980元</td><td><img src="./QQ截图20221023211810.png" alt=""></td><td><img src="./QQ截图20221023211856.png" alt=""></td></tr><tr><td>申论</td><td>申论历年真题精解</td><td>16</td><td>580元</td><td><img src="./QQ截图20221023211810.png" alt=""></td><td><img src="./QQ截图20221023211856.png" alt=""></td></tr><tr><td rowspan="3">高分技巧班</td><td>行测+申论</td><td>全科技巧强化</td><td rowspan="3">入学试卷测评24小时内答疑</td><td>32</td><td>980元</td><td><img src="./QQ截图20221023211810.png" alt=""></td><td><img src="./QQ截图20221023211856.png" alt=""></td></tr><tr><td>行测</td><td>行测速技巧强化</td><td>18</td><td>680元</td><td><img src="./QQ截图20221023211810.png" alt=""></td><td><img src="./QQ截图20221023211856.png" alt=""></td></tr><tr><td>申论</td><td>申论速解技巧强化</td><td>14</td><td>580元</td><td><img src="./QQ截图20221023211810.png" alt=""></td><td><img src="./QQ截图20221023211856.png" alt=""></td></tr></table>
</body>
</html>
效果如图所示
10.23
表单标签
form input …
input（单标签）标签有一个type属性 ，决定是什么控件。
还有一些常见属性：
checked disabled name for…(如下图代码1.1)
<!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://2607371654@qq.com"><h2>输入框：</h2><input type="text" placeholder="请输入用户名"><h2>密码框：</h2><input type="password" placeholder="请输入密码"><h2>复选框</h2><input type="checkbox" checked>苹果<input type="checkbox" checked>香蕉<input type="checkbox" disabled>葡萄<h2>单选框</h2><input type="radio" name="1">男<input type="radio" name="1">女<h2>上传文件</h2><input type="file"><h2>提交按钮和重置按钮</h2><input type="submit"><input type="reset"></form>
</body>
</html>
表格标签
form，input，textarea，select，label…
代码1.1
<h2>多行文本框</h2><textarea cols="30" rows="10"></textarea><h2>下拉菜单</h2><select ><option selected disabled>请选择</option><option>北京</option><option>上海</option><option>杭州</option></select><select size="3"><!-- 默认为1，显示项数 --><option>北京</option><option>上海</option><option>杭州</option></select><select multiple ><option>北京</option><option>上海</option><option>杭州</option></select><input type="file" mutieple><input type="radio" name="1" id="man"><label for="man">男</label><input type="radio" name="1" id="woman"><label for="woman">女</label>
效果如下
表格表单的组合
<form action=""><table border="1" cellpading="30"><tr align="center"><td rowspan="4">总体信息</td><td colspan="2">用户注册</td></tr><tr align="right"><td>用户名：</td><td><input type="text" placeholder="请输入用户名"></td></tr><tr align="right"><td>密码：</td><td><input type="text" placeholder="请输入密码"></td></tr><tr align="center"><td colspan="2"><input type="submit"> <input type="reset"></td></tr></table></form>
效果如下
10.24
<div>与<span>
1.<div>做一个区域划分的块
2.<span>对文字进行修饰，内联
<div><h2><a href="#">哔哩哔哩 <span style="color: red;">(゜-゜)つロ</span> 干杯~-bilibili</a></h2><a href="#"></a><p>哔哩哔哩（bilibili.com)是国内知名的视频弹幕网站，这里有及时的动漫新番，活跃的ACG氛围，有创意的Up 主。大家可以在这里找到许多欢乐。</p><a href="#">https://www.bilibili.com</a></div>
效果如下图所示
css基础语法
格式
选择器{属性1：值1；属性2：值2}
单位
px->像素（pixel）
%->百分比（外容器->600px 当前容器50%->300px ）
基本样式
width 宽
height 高
background-color 背景颜色
css注释
/* css注释*/
<!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{background-color: blue;}</style>
</head>
<body><div>这是一个块</div><span>666</span>
</body>
</html>
<style>div{width:100%; height: 100px;background-color: red}span{background-color: blue;}</style>
内链样式与内部样式（css引入样式）
1.内联样式
style属性
2.内部样式
style标签
区别：
内部样式可以复用，符合w3c规范标准，进行让结构样式分开处理。
<div style="width:100px; height: 100px;background-color: red">这是一个块</div><div style="width:100px; height: 100px;background-color: red">另外一个块</div>
<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}</style>
</head>
<body><!-- <div style="width:100px; height: 100px;background-color: red">这是一个块</div><div style="width:100px; height: 100px;background-color: red">另外一个块</div> --><div>这是一个块</div><div>另外一个块</div>
</body>
</html>
效果跟上图一样
10.25
外部样式
引入一个单独css文件：name.css
通过标签引入外部资源
rel属性 指定资源跟页面关系
href属性 资源的地址
<!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"><link rel="stylesheet" href="./common.css"><title>Document</title>
</head>
<body><div>这是一个块</div>
</body>
</html>
效果如下
== 还可以通过@import引入外部样式==（不建议使用，了解就可以）
<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"><!-- <link rel="stylesheet" href="./common.css"> --><title>Document</title><style>@import url(./common.css)</style>
CSS颜色表示法
单词表示法
十六进制表示法
0 1 2 3 4 5 6 7 8 9 a b c d e f
<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 { background-color:#000000}</style>
</head>
效果如下
rgb三源色表示法：rgb(255,255,255)
取值范围：0~255
提取颜色的下载地址https://www.fehelper.com
也可以ps提取16进制代码
CSS背景样式
background-color 背景色
background-image 背景图
url（背景地址）
默认：水平垂直都铺满
<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: 300px;height: 300px;background-color: red;background-image:url(./QQ截图20221023211856.png) ;}</style>
</head>
background-repeat 平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat （x,y 都进行平铺，默认值）
no-repeat 都不平铺
background-position：背景位置
x ，y ：nummber||单词||百分比
x：left，center，right
y: top,center,bottom
background-attachment：背景图随滚动条的移动方式
scroll：默认值==（按照当前元素进行偏移的）==
fixed （按照浏览器进行偏移的）
10.26
练习
CSS边框的样式
border-style 样式：
solid 实线
dashed 虚线
dotted 点线
border-color 颜色：
red 。。。
border- width 大小
px 。。。
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{height: 2000px;} *//* div{width: 300px;height: 300px;background-color: red;background-image:url(./QQ截图20221023211856.png) ;background-repeat: repeat;background-attachment: scroll;} */div{width: 300px;height: 300px;border-style: solid;}</style>
</head>
<body><div></div>
</body>
边框也可以对某一条边单独设置
border-left-style(top right left bottom)
<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{height: 2000px;} *//* div{width: 300px;height: 300px;background-color: red;background-image:url(./QQ截图20221023211856.png) ;background-repeat: repeat;background-attachment: scroll;} */div{width: 300px;height: 300px;border-right-style: solid;border-width: 10px;border-color: blue;}</style>
</head>
<body><div></div>
</body>
练习
<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: 300px;height: 300px;border-top-color: black; border-top-style: solid;border-top-width: 10px;border-bottom-color: black; border-bottom-style: solid;border-bottom-width: 10px;border-left-color: black; border-left-style: solid;border-left-width: 10px;border-right-color: black; border-right-style: solid;border-right-width: 10px;}</style>
</head>
<body><div></div>
</body>
效果：
练习
透明色 transparent
<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{background-color: aquamarine;}div{width: 0px;height: 0px;border-top-color: black; border-top-style: solid;border-top-width: 10px;border-bottom-color: transparent; border-bottom-style: solid;border-bottom-width: 10px;border-left-color: transparent; border-left-style: solid;border-left-width: 10px;border-right-color: transparent; border-right-style: solid;border-right-width: 10px;}</style>
</head>
CSS文字样式
font-family：字体类型
英文字体：Arial，‘Times New Roman’
中文字体：微软雅黑，宋体
中文字体的英文名称
微软雅黑：‘Microsoft YaHei’
宋体：’SimSun‘
衬线体与非衬线体
注：1、设置多字体方式和目的
在font-family后面依次输入，并用逗号隔开；为了防止用户电脑中没有对应字体，依次识别。
2、引号的问题
当名称之中存在空格是需要用到引号（英文）
<!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{font-family: 宋体;}div2{font-family: 'Times New Roman';}</style>
</head>
<body><div id="div1">Win11 新功能：可通过Wi-Fi面板直接打开并连接到手机热点</div><p>我们活着不能与草木同腐，不能醉生梦死，枉度人生，要有所作为！</p><div id="div2">Everything is possible.</div><p>There's a kind of poverty called short-sightedness.</p>
</body>
</html>
字体大小
最好用具体的像素，不建议使用单词；字体大小一般为偶数
字体粗细
写法：正常（normal）、加粗（bold）；也可以直接输入数值（100 200 … 900 都是一些成百的数字，但是100~500都是正常的，600～900都是加粗的）
<style>div{font-weight:bold;}
</style>
字体样式
模式：正常（normal）、斜体（italic）
<style>div{font-style:italic;}
</style>
注：oblique也是斜体，但是用的比较少。
区别：1、italic 所有带有倾斜字体的字体才可以设置倾斜操作
2、oblique 没有倾斜属性的字体也可以设置倾斜操作
段落样式
text-decoration：文本修饰
下划线：underline
删除线：line-through
上划线：overline
不修饰：none
注：可以通过空格隔开进行多个文本修饰
<style>p{width:300px;text-decoration: underline ，overline;}</style>
文本缩进 (text-indent)
首行缩进
em单位：相对单位，1em永远和字体大小相同。如果我利用font-size更改的字体大小，而我在text-indent输入2em，保存后永远会空出俩个字符大小，如果统一段落中混入了英文，那么就有可能依旧对不齐。
</head><style>p{text-indent: 36px;font-size:18px}</style>
</head>
<body><p>我们活着不能与草木同腐，不能醉生梦死，枉度人生，要有所作为！</p>
</body>
效果如下
我们就可以看到它首行空出了2个字的间距
文本对齐方式（text-align）
对齐方式：left、right、center、justify（两端点对齐）
我们让上面的文本进行中间对齐：
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>p{text-align: center;}</style>
</head>
<body><p>我们活着不能与草木同腐，不能醉生梦死，枉度人生，要有所作为！</p>
</body>
定义行高（line-height）
定义：一行文字的高度。一行文字的高度，上边距和下边距是等价的
默认行高：不是固定值，而是随当前字体大小不断变化的。
取值：1、具体数值。2、比例尺（scale），与文字大小成比例（1就是字体的1倍，2就是两倍）
<style>p{line-height: 40px;} /也可以直接输入数字，他就会默认成字体大小的比例倍数/</style>
</head>
<body><p>我们活着不能与草木同腐，不能醉生梦死，枉度人生，要有所作为！对于熟悉微软的用户来说，“星期二补丁”都是相当熟悉的一个词汇，自从2003年开始，微软就在每个月的第二个周二推送这个月的系统补丁，为用户带来最新的安全性更新。但近一段时间，“星期二补丁”却往往会在修复问题的同时，带来更多的问题。近日，微软确定，10月份Win10的星期二补丁KB5018410存在问题，可能会导致OneDrive受到影响，出现意外关闭、闪退等问题。同时，微软还表示如果帐户创建的标识不同于用于加入域的标识，则可能会遇到错误“0xaac (2732) ”的情况。目前，微软尚未针对上述问题给出任何解决方案，仅表示正在进行调查，预计下周推出对应的修复程序。</p>
</body>
24、CSS复合样式
一个CSS属性只控制一个样式，叫做单一样式
一个CSS属性控制多种样式，叫做复合样式
复合样式
background
border
font
复合的写法：是通过空格来实现的
例如：
<!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:300px;height: 300px;background: red url(./QQ截图20221023211810.png) no-repeat center center;border:4px black solid；font:bold italic 30px 宋体}</style>
</head>
<body><div></div>
</body>
们当然也可以类似上面的边框的写法进行编辑。而且有的写法是不需要关系顺序的，例如background、border；有的是需要关系顺序的，例如：font（注：font至少需要两个值：size和family，而且size总是需要在family之前）
==注意，尽量不要混写，如果非要混写，那一定要先写复合样式再写单一样式。==如果按照如下格式（先单一后复合）写，那么background-color被覆盖!
24、CSS复合样式
一个CSS属性只控制一个样式，叫做单一样式
一个CSS属性控制多种样式，叫做复合样式
复合样式
backgroundborderfont
复合的写法：是通过空格来实现的
例如：
<!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:300px;height: 300px;background: red url(./图片合集/OIP-C.jpg) no-repeat center center;border:4px black solid；font:bold italic 30px 宋体}</style>
</head>
<body><div></div>
</body>
<ml>
我们当然也可以类似上面的边框的写法进行编辑。而且有的写法是不需要关系顺序的，例如background、border；有的是需要关系顺序的，例如：font（注：font至少需要两个值：size和family，而且size总是需要在family之前）
==注意，尽量不要婚鞋，如果非要混写，那一定要先写复合样式再写单一样式。==如果按照如下格式（先单一后复合）写，那么background-color被覆盖
CSS选择器
id选择器
CSS：#elem{}
id=“elem”
html：id=“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>#div1{background: red }#div2{background: blue}</style>
</head>
<body><div id="div1">对于熟悉微软的用户来说，“星期二补丁”都是相当熟悉的一个词汇，自从2003年开始，微软就在每个月的第二个周二推送这个月的系统补丁,为用户带来最新的安全性更新。</div><div id="div2">对于熟悉微软的用户来说，“星期二补丁”都是相当熟悉的一个词汇，自从2003年开始，微软就在每个月的第二个周二推送这个月的系统补丁，为用户带来最新的安全性更新。</div>
</body>
注意：1、一个页面之中只能有一个对应id，出现多个就是不规范的操作
2、命名规范：字母、下划线、中划线，不能是数字
3、驼峰写法：searchButton（小驼峰写法）
短线写法（推荐）：search-small-button
下划线写法：search_small_button
有一个id创建的快捷键：div#div1+tab键
CLASS选择器
CSS：.elem{}
html:class="elem"
注意：（1）、class是可以复用的。
例如：
<!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>.box{background:red}</style>
</head>
<body><div class="box">这是一个区块</div><div class="box">这是一个区块</div><p class="box">这是一个区块</p>
</body>
</html>
（2）、可以添加多个class样式
<!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>.box{background:red}.content{font-size:30px}</style>
</head>
<body><div class="box content">这是一个区块</div>
</body>
<ml>
（3）、多个样式的时候，样式的优先级根据CSS决定的，而不是在class内的顺序决定的。
<head><style>.box{background:red}.content{font-size:30px;background:blue}</style>
</head>
<body><div class="content box">这是一个区块</div>
</body>
class中box在content后面，但是这个只会显示蓝色，所以不是按照class内的顺序来决定的。
“.”前面是用来标签限制的，例如：
<head><style>p.box{background:red}</style>
</head>
<body><div class="box">这是一个区块</div><p class="box">这时一个段落</p>
</body>
这里保存后运行就只会对下文中的p标签生效了。
Web前端学习html css（一）相关推荐
- web前端学习中CSS，JS代码压缩
web前端要学习的知识有很多,前端基础要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML负责结构,网页想要表达的内容由html书写. CSS负责样式,网 ...
- Web前端学习之 CSS基础二
Web前端学习之 CSS基础二 1. 2. 主体 3. 完整代码如下所示 4. 结束语 1. /* 权重是0 */* {font-size: 35px;text-align: center;color ...
- 自学web前端怎么学？web前端学习路线css属性
自学web前端技术,如果才能找到一份web前端的工作.按照现在的招聘标准来看,无论你去哪个公司面试,你只需要满足他们公司的需求就可以.找到一份web前端工作需要掌握的内容如下: 首先是html,css ...
- web前端学习（CSS篇）
目录 CSS基础语法 基本样式 内联样式与内部样式 内联样式 外部样式及两种写法 CSS中的颜色表示法 CSS背景样式 背景实现视觉差效果 CSS边框样式 边框实现三角形 CSS文字样式 CSS段落样 ...
- Web前端学习笔记——CSS京东案例、BFC
京东项目(一) 京东项目介绍 项目名称:京东网 项目描述:京东首页公共部分的头部和尾部制作,京东首页中间部分. 项目背景 现阶段电商类网站很流行,很多同学毕业之后会进入电商类企业工作,同时电商类网站需 ...
- web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...
- WEB前端学习之 CSS颜色对应表
总表图如下: FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 #000000 #FFB7DD #FF88C2 #FF44AA #FF0088 #C1006 ...
- html css 前端实现消息提醒数_自学的福音，web前端学习全套视频教程+最新学习思维导图都在这里...
1.产品经理.这些是负责策划应用程序的一群人.他们会想出很多新鲜的.奇怪的.甚至是不可能实现的应用.一般来说,产品经理都追求丰富的功能. 2.UI设计师.这些人负责应用程序的视觉设计和交互模拟. 3. ...
- 零基础web前端学习之JavaScript 和css 阻塞
web前端学习之JavaScript 和css 阻塞,JavaScript 是客户端和服务器端的脚本语言,可以插入HTML 页函中, 并且是目前较热门的Web 开发语言.同时, JavaScript ...
最新文章
- 二级域名用asp.net 2.0的实现方案
- 【MySQL】MySQL的索引
- Linux系统管理技术手册——第6章 添加新用户
- 【PAT甲级 BigInteger运算】1024 Palindromic Number (25 分) Java 全部AC
- 推荐一个好用的Chrome扩展，专门处理xml的，名叫XML Tree
- 2019-2020 ICPC Asia Hong Kong Regional Contest 补题（部分）
- Fedora 15 快捷操作之新体验
- python11_Python11，文件操作
- 10亿+文件数压测，阿里云JindoFS轻松应对
- 请编写一个程序，请将字符串中所有字母全部向后移一位，最后一个字母放在字符串的开头，最后将新的字符串输出。
- java 环绕通知_aop 环绕通知 可以计算机 程序执行的时间
- Cannot read lifecycle mapping metadata for artifact org.apache.maven.plugins问题的解决
- 开课吧：学习C语言应该从哪些方面入手？
- Linux命令详解词典高频命令（1）
- keeplive+haproxy+nginx
- 地震设计反应谱、时程分析法和地震动选取与调整
- 【货干】Idea 安装 MyBatis 插件
- C/C++:std::thread构造函数死锁问题:WIN32下不可以在DllMain中创建线程
- 初创企业购买企业邮箱_什么是技术债务？ 为什么几乎每个初创企业都拥有它？...
- networks.XXX.ipam.config value Additional properties are not allowed (‘gateway‘ was unexpected) 解决办法