这里写目录标题
- 一、HTML+CSS系列教程之导学
- 二、VS Code（宇宙第一编辑器）
- 三、深入了解网站开发
- 四、web前端的三大核心技术
- 五、HTML的基础结构与属性
- 六、 HTML的初始代码
- 七、HTML的注释
- 八、HTML语义化
- 九、标题与段落
- 十、图片标签与图片属性
- 十一、引入文件的地址路径
- 十二、跳转链接
- 十三、跳转描点
- 十四、特殊符号
- 十五、无序列表(列表标签)
- 十六、有序列表
- 十七、定义列表
- 十八、嵌套列表
- 十九、表格标签
- 二十、表格属性
- 二十一、表单标签
- 二十二、表单表格组合
- 二十三、div与span
- 二十四、CSS基础语法（语法格式）
- 二十五、内联样式与内部样式
- 二十六、外部样式
- 二十七、css颜色表示法
- 二十八、背景样式
- 二十九、边框样式
- 三十、css段落样式
- 三十一、文本与段落实现个人简介
一、HTML+CSS系列教程之导学
HTML+CSS系列
（1）拔云见日
1.HTML
2.CSS
3.切图流程
4.PC企业站布局
5.PC游戏站布局
（2)溯本求源
1.扩展HTML
2.扩展CSS
3. HTML5新语法
4.CSS3新语法
5. 兼容与hack
（3)风生水起
1.弹性布局
2.风格布局
3.移动端布局
4.响应式布局
5.Bootstrap
（4）巧夺天工
1.预编译CSS
2.postcass
3.CSS架构
4.高级功能
5.CSS与JS交互
标题：web前端—VS code
HTML——编程语言——做网站开发的基础语言；
CSS——编程语言——浏览器把代码解释后滴样子就是我们看到的网站，并通过鼠标右键查看网页源代码。
.HTML文件的书写
寻找指定目录下点击右键并重命名为01_demo.html
右键选择打开方式选择熟悉的打开方式并在浏览器中打开右键查看网页源代码，弹出代码源显示。
HTML和CSS知识的延伸
HTML是超文本标记语言，是制作超级文本文档的简单标记语言，可以从一个平台移植到另一个平台，通常用于制作网页。HTML具体的百度介绍
CSS是层叠样式表的意思，是一种用来表现HTML或XML等文件样式的计算机语言；css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS具体的百度介绍
二、VS Code（宇宙第一编辑器）
VS Code的概念
第一步
打开网页访问并下载VS Code
VS Code下载地址
下载后根据提示安装，并创建桌面快捷键
第二步
改文字语言，添加安装插件
打开VS Code转换语言为中文
点开最左栏最后一个扩展按键对文字语言进行调换后在应用商店搜索扩展中搜索需要安装的插件
（语言包、open in browser、 view in browser返回主页面）
安装好插件后及有此显示点开Open In Default Browser,即可在VS Code直接打开该网页版，方法种类多样
方法二
直接打开文件夹添加点开，右键点下图标所示位置
第三步
新建文件、新建文件夹、重命名和删除
学习代码编辑器的保存的基本使用。
Ctrl+s：保存
Ctrl+a: 全选
Ctrl+c：复制
Ctrl+v：粘贴
Ctrl+x：剪切
Ctrl+z：撤销
Ctrl+y：恢复
shift+end：从头选中一行
shift+home：从尾部选中一行
shift+alt+↓：快速复制一行
alt+↑或↓：快速移动一行
tab：向后缩进
tab+shift：向前缩进
多光标：alt+鼠标左键
ctrl+d:选择相同元素的下一个
首选编辑器设置(文字大小，是否换行Word warp)
自动折行的操作，文件首选项设置当中搜索中搜索word，找到word warp选择on。
Chrome浏览器？
图标：
三、深入了解网站开发
UI设计师：设计稿
web前端开发工程师（HS开发）
设计师–代码
数据库里的数据——显示到页面
HTML+CSS
HTML：结构
CSS：样式
web后端开发工程师
前端的另一项技能：JavaScript，与HTML、CSS之间的关系
四、web前端的三大核心技术
HTML：结构
CSS：样式
JavaScript：行为
自己写的代码：
记得使用时先要保存
五、HTML的基础结构与属性
概念
HTML：超文本 标记 语言
超文本：文本内容和非文本内容（图片、视频、音频等）
标记：<单词>
语言：编程语言
标记也叫做标签：
写法分成两种：
- 单标签<单词>
- 双标签<单词></单词>
创建标签的快捷键：
单词+tab-><单词>
标签可以上下排列，也可以组合嵌套。HTML常见标签
标签的属性：
来修饰标签的，设置当前标签的一些功能
<标签 属性="值"属性2=“值2”>
HTML的属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name=“value”。
属性总是在 HTML 元素的开始标签中规定。
HTML 链接由 标签定义。链接的地址在 href 属性中指定：
六、 HTML的初始代码
初始代码的概念
每个.html文件都有的代码叫做初始代码，要符合.html文件的写法。！+tab键：快速的创建.html文件的初始代码。
例如：
具体格式内容
七、HTML的注释
写法：在浏览器中显示不出来，只有在文件中可以看到<!-- 注释的内容 – >
意义
1.把暂时不用的代码注释起来，方便以后使用。
2.对开发人员进行提示。
快捷添加注释与删除注释
- ctrl+/
- shift+alt+a
八、HTML语义化
所谓HTML语义化指的是，根据网页中内容等结构，选择适合的HTML标签进行编写。
好处：
1.去掉或者丢失样式的时候能够让页面呈现出清晰的结构；·有利于SEO：和搜引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
2·方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页；
3·便于团队开发和维护，语义化更具可读性，遵循W3C标准，可以减少差异化。
举例“屏幕阅读器”
九、标题与段落
标签：{h标签、p标签}
标题：双标签< h1>< /h1 >…< h6>< /h6>
在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签，h5，h6标签在网页中不经常使用。
段落：双标签
带有标题和段落的个人简介
文本修饰标签，文本修饰标签？
强调：双标签
区别：1.写法和展示效果有区别的一个加粗，一个斜体
2.strong的强调性更强，en的强调性稍强。
上标：< sub>< /sub>
下标：< sup>< /sup>
删除文本：< del>< /del>
插入文本：< ins>< /ins>
注：一般情况下，删除文本都是和插入文本配合使用的。
举例
十、图片标签与图片属性
< img>图片,单标签
src:引入图片的地址。
alt：当图片出现问题的时候，可以显示一段友好的文字提示
title：提示信息
width、height：图片的大小
十一、引入文件的地址路径
相对路径：
- 在路径中表示当前路径；
- 在路径中表示上一级路径
绝对路径
文件地址
类似：
十二、跳转链接
1. < a >标签：href、target
连接标签：a→双标签< a>< /a>
href属性：链接地址
target属性：可以改变链接打开方式，默认情况下：在当前页面打开_self；新窗口打开_blank。
2.< base>标签
base：单标签
作用：改变接连的默认行为
十三、跳转描点
实现一
#号
ID属性：加的是h标签
实现二
#号
name属性：加的是a标签
十四、特殊符号
特殊符号：
特殊符号（Special symbols）特殊符号是真实的文字和可复制并粘贴到文本中，比如：数学符号，单位符号，制表符等…
特殊字符
特殊字符是相对于传统或常用的符号外，使用频率较少字符且难以直接输入的符号。比如数学符号；单位符号；制表符等。种类繁多，有些符号要安装MS Gothic字体（日文字体）才可显示。
- &+字符
- 解决冲突左右尖括号、添加多个空格的实现
- <；>； ；
十五、无序列表(列表标签)
无序列表< ul >< li >
列表的最外层容器、列表项
注：ul和li必须是组合出现的，他们之间是不能有其他标签的
type属性：改变前面标记的样式（一般都是用CSS去控制）
十六、有序列表
一、定义
所谓有序列表，就是有顺序的列表，即列表前面带个123或abc什么的。英文单词为“Ordered List”，标签为< OL>，作用是在网页中显示一个有顺序的列表。
二、语法
< ol >
< li >列表项1< /li >
< li >列表项2< /li>
< li>列表项n< /li>
< /ol>
说明，跟< ul>一样，每个列表项目也使用< li>标签表示。
三、属性
1、type，定义每个列表项前面的符合标记类型，取舍为：A（大写字母）、a（小写字母）、I（大写罗马文）、i（小写罗马文）、1（数字1）等。
四、注意
1、< ul>表示无序列表，而< ol>表示有序列表。
2、< li>列表项标签中，可以使用超链接、段落、换行、图片等其它HTML元素。
3、< ol>的type属性，不建议使用。因为CSS的横空出世，ol和ul的type属性均不怎么使用了，都是用CSS来搞定列表样式。
记得保存
十七、定义列表
定义列表
描述→di dt dd 列表项需要添加标题和对标题进行描述的内容
dl(definition lists): 定义列表
dt(definition term): 定义列表中的项目
dd(definition description): 描述列表中的项目
与其他列表区别：有标题和标题内容的结构。
十八、嵌套列表
列表之间可以互相嵌套，形成多层级列表。
例如：代码块
<!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>
<li>东莞</li>
</ul>
</li>
<li>湖北省
<ul>
<li>武汉</li>
<li>荆州</li>
<li>钟祥</li>
</ul>
</li>
</ul> -->
<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=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body><h1>好吃的小吃推荐目录</h1>
<ul>
<li>广东小吃
<ul>
<li>肠粉</li>
<li>糯米鸡</li>
<li>煲仔饭</li>
<li>砂锅粥</li>
<li>叉烧包</li>
<li>蜜汁叉烧</li>
</ul>
</li>
<li>湖北小吃</li>
<ul>
<li>热干面</li>
<li>炸酱面</li>
<li>糍粑</li>
<li>锅盔</li>
</ul>
</ul>
<p><em>有机会快来的话快去品尝吧！</em></p>
</body>
</html>
十九、表格标签
< table>:表格的最外层容器
< tr>:定义表格行
< th>:定义表格单元
< caption>:定义表格标题
注：之间是有嵌套关系，要符合嵌套规范
| 日期 | 天气情况 | 出行情况 |
|---|---|---|
| 2022年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>
<table>
<caption>天气预报</caption>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
<tr>
<th>2022年10月22日</th>
<th>晴朗</th>
<th>天气晴朗，适合出行</th>
</tr>
</table>
</body>
</html>
语义化标签：< tHead>首部、< tBody>身体部、< tFood>尾部。
注：tBody是可以出现多次的，但是tHead、tFood只能出现一次.
二十、表格属性
border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式
align：left、center、right
valign：上下对齐方式
valign：top、middle、bottom
格式运用类型：< table border="1"cellpadding=“30”>
< tr align=“right”//靠右valign=“top”>//对齐
举例：
<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="center">
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
<tr>
<th>2022年10月22日</th>
<th>晴朗</th>
<th>天气晴朗，适合出行</th>
</tr>
</table>
</body>
</html>
二十一、表单标签
< form>
表单的最外层容器
< intput>
标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
< textarea>
多行文本框
< select >、< option>
下拉菜单
< label>
辅助表单
还有一些常见的属性：
checked、disabled、name、for…
表单标签： form ,input,textarea,select,label…
input（单标签）标签有一个type属性，决定是什么控件。
checkbox：默认选中
disabled：禁止使用
placeholder：在栏框内给与提示
含有input的简单举例一：
<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="https://www.baidu.com/">
<h2>输入框：</h2>
<input type="text"placeholder="请输入用户名">
<h2>密码框：</h2>
<input type="password"placeholder="请输入密码">
<h2>复选框：</h2>
<input type="checkbox">苹果
<input type="checkbox">香蕉
<input type="checkbox">葡萄
<input type="checkbox">火龙果 -->
<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>
范围稍大的简单举例二：
<!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>
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select>
<option selected disabled>请选择</option>
<option >北京</option>
<option >上海</option>
<option >广东</option>
<option >江苏</option>
</select>
<select size="4">
<option >北京</option>
<option >上海</option>
<option >广东</option>
<option >江苏</option>
</select>
<select multiple>
<option >北京</option>
<option >上海</option>
<option >广东</option>
<option >江苏</option>
</select>
<input type="file"multiple>
<input type="radio"name="gender"id="man"><laber for="men">男</laber>
<input type="radio"name="gender"id="woman"><laber for="women">女</label>
</form>
</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>
<form action="">
<table border="1"cellpadding="30">
<tBody>
<tr align="center">
<td rowspan="4">总体信息</td>
<td colspa="2">用户注册</td>
</tr>
<tr align="right">
<td>用户名：</td>
<td><input type="text"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>
</body>
</html>
二十三、div与span
< div>< span>
div（块）：百度一下
DIV
层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。
< div> 可定义文档中的分区（division/section）。
< div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 < div>，那么该标签的作用会变得更加有效。
注释：< div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。
提示：请使用 < div> 元素来组合块级元素，这样就可以使用样式对它们进行格式化。
DIV 标签编辑
span百度一下
span（内联）：SPAN技术主要是用来监控交换机上的数据流，大体分为两种类型，本地SPAN和远程SPAN. ----Local Switched Port Analyzer (SPAN) and Remote SPAN (RSPAN)，实现方法上稍有不同。 利用SPAN技术我们可以把交换机上某些想要被监控端口（以下简称受控端口）的数据流COPY或MIRROR一 份，发送给连接在监控端口上的流量分析仪，比如CISCO的IDS或是装了SNIFFER工具的PC. 受控端口和 监控端口可以在同一台交换机上（本地SPAN），也可以在不同的交换机上（远程SPAN）。
举例运用：
<div>
<h2>
<a herf="#">xx教育<apan>**//文本修饰**html5</apan>中国数万程序员的选择—官方网页</a></h2>
<a herf="#"><img src=""alt=""></a>
<p>优势：XXXX</p>
<a href="#">www.123456789-评价 广告</a>
</div>
注意：1.结构，2.样式
二十四、CSS基础语法（语法格式）
格式：
选择器{属性1：值1;属性二：值2}
单位：
长度单位：
1.px->像数（pixel）、
2.%->百分比
基本样式：
width宽、height高、blackground-color背景颜色；
CSS注释：
/ * css注释的内容 * /
二十五、内联样式与内部样式
CSS的引入方式
1.内联样式（行内、行间）在html标签上添加style属性来实现的
style属性
2.内部样式在< style>标签内添加的样式
style标签
注：内部样式的优点，可以复用代码
区别：内部样式的代码可以复用、复合w3c
二十六、外部样式
引入一个单独的css文件，name.css
< link>标签
relHTML< link>标签的rel属性
href
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址
@import方式引入外部样式
注：这种方式有很多问题不建议使用。
引入外部样式的举例
例子一
<meta charset="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content ="ie=edge">
<link rel="stylesheet"herf="./common.css">
<title>Document</title>
例子二
<meta charset="UTF-8">
<meta charset="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content ="ie=edge">
<!-- <link rel="stylesheet"herf="./common.css"> -->
<title>Document</title>
<style>
@import url('./common.css');
</style>
注意：
<style>
div{ width:100px;height:100px;background-color:red} //颜色！
@import url('./common.css');
</style>
link和@import的区别：
1、从属关系区别
2、加载顺序区别
3、兼容性区别
4、DOM可控性区别
二十七、css颜色表示法
1.单词表示法：red、blue、black、green、yellow
2.十六进制表示法：
0123456789
01
0123456789abcdef
3.RGB三色表示法：tgb(255,255,255)
取值范围0-255
获取颜色的工具：
提取颜色的下载地址
photoshop工具
二十八、背景样式
背景样式：
background-color 背景颜色
background-image 背景图片
url（背景地址）
默认会水平垂直都铺满
background-repeat 背景图片平铺方式
css背景样式
repeat-x x轴平铺
repeat-y y轴平铺
repeat（x，y都进行平铺，默认值）
no-repeat 都不平铺
background-position：背景位置
x y：number （px，%）单词
x：left、cencer、right
y：top、center、bottom
background-attachment:背景图随滚动条的移动方式
scroll：默认值（背景元素是按照当前元素进行偏移）
fixed：（背景位置是按照浏览器进行偏移的）
div{width:300px;height:300px;background-color:red}
background-image:url(. /img/dog.jpg);
background-repct：no-repeat;
background-position：50% 50%;
background-attachment:fixed;
背景实现视觉差效果
二十九、边框样式
border-style：边框样式
border-width：边框大小
border-color：边框颜色
css的文字样式
solid：实线
dashed：虚线
dotted：点线
大小，px，颜色，red#foo…
边框也可以针对某一天边进行单独设置：border-left-style：中间是方向left，right，top，bottom，
font-family：字体类型，英文中文
英文字体：Arial，‘Times New Roman’
中文字体：微软雅黑，宋体
<style>
div{font-family：Arial}
</style>
<p>复制</p>
中文字体的英文名称
微软雅黑：‘Microsoft YaHei’
宋体：SimSum
（family字体类型）
衬线体与非衬线体
注意事项：
1.设置多字体方式
2.引号的问题
<style>
/*div{font-family'Times New Roman';}*/
/*div{font-family:SimSun;}*/
div{font-family:华文彩云，'Time New Roman',SimSum,微软雅黑；}
</style>
<body>
<div>这是一段文字</div>
<p>这是一段文字</p>
<div>this is a text</div>
<p>this is a tex</p>
</body>
font-size:字体大小
默认大小：16px
写法：number（px）|单词（small large…不推荐使用）
注：字体大小一般为偶数。
/div{font-family’Times New Roman’;}/
/div{font-family:SimSun;}/
/div{font-family:华文彩云，‘Time New Roman’,SimSum,微软雅黑；}/
div{ font-side:16px}
举例二：
<html>
<head>
<style type="text/css">
h1 {font-size: 300%}
h2 {font-size: 200%}
p {font-size: 100%}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
效果图：
This is header 1
This is header 2
This is a paragraph
**font-weight：**字体粗细
**两种模式：**正常（normal）加粗（bold）
**写法：**单词（normal、bold）|number（100 200…900）
**font-style：**字体样式
**模式：**正常（normal）斜体（italic）
**写法：**单词（normal、italic）
注：oblique也是表示斜体，用的比较少，一般了解即可。
区别：
1.italic所有带有倾斜字体的可以设置，
2.oblique 没有倾斜属性的字体也可以设置倾斜操作，
**color：**字体颜色
三十、css段落样式
**text-decoration：**文本修饰
取值
添加多个
**text-transform:**文本大小写
下划线： underline
删除线： line-through
上划线： overline
取值： none
注：添加多个文件修饰：line-through underline overline
text-transform：文本大小写（针对英文段落）
大写： lowercase
小写： uppercase
只针对首字母大写： capitalize
text-indent： 文本缩进
首行缩进
em单位： 相对单位，lem永远都是跟字体大小相同
text-align： 文本对齐方式
对齐方式： left、right、center、justify（两端点对齐）
line-height： 定义行高
定义： 一行字的高度，上边距和下边距的等价关系
默认行高：不是固定值而是变化的根据字体的大小再不断的变化
取值： 1.number（px）|scale（比例值跟文字的大小成比例）
文本间距与英文折行
letter-spacing:字之间的间距
word-spacing:词之间的间距（针对英文段落的）
英文和数字不自动折行的问题：
1.word-break：break-all；（非常强烈的折行）
2.word-wrap：break-word；（不是那么强烈的折行，会产生一些空白区域。）
格式：
强烈的折行
<style>
div{wideth:300px;height:300px；border：1px solid red；word-break：break-all;}
</style>
<body>
<p>...........</p>
<div>..........</div>
</body>
三十一、文本与段落实现个人简介
颜色提取器下载网址
主要注意：
图片中所展示的格式：
复合的写法：是通过空格的方式实现的。
1.background：red url（）repeat 0 0；
2.border：1px red solid；
3.font:
注：最少要有两个值 size family
weight style size family√
style weight size family√
weight style size family/line-height family√
例子：
<style>
div{width:300px;height:300px;
background : red url(./img/dog.jpg)no-repeat center center;
/* border:2px black soild; */
border-right:2px bluedashed;
}
</style>
css的复合样式：
一个css属性只控制一种样式，叫做单一样式
一个css属性控制多种样式，叫做复合样式
复合样式
background
border
font
注：尽量不要混写，如果要混写，那么一定要先写复合样式再写单一样式。
css选择器
1.ID选择器
#elem{} id=“elem”
注：
1.ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
2.命名的规范，由字母、下划线、中划线、字母（并且第一个不能是数字）
3.驼峰写法：searchButton（小驼峰）SearchButton（大驼峰）searchSmallButton短线写法： search-small-button
下划线写法 ：search_small_button
glass选择器
css：.elem{} html：class=“elem”
注：
1.class选择器是可以复用的。
2.可以添加多个class样式
3.多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序
4.标签+类的写法
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
