下载文档原格式
手把手教你学习HTML和CSS的基础知识第一章：HTML基础知识HTML，全名为超文本标记语言（HyperText Markup Language），是用于创建网页的标准标记语言。
学习HTML是学习网页开发的第一步。
本章将介绍HTML的基础知识。
1.1 HTML的起源与发展HTML最早由蒂姆·伯纳斯-李（Tim Berners-Lee）于1990年创造，并在1993年发布了HTML 2.0的第一个正式规范。
随着时间的推移，HTML不断发展，现在最新的版本是HTML5。
1.2 HTML文档的结构HTML文档由HTML标签组成，标签用于定义文档的结构和呈现内容。
一个HTML文档通常包含<head>、<body>和</html>等标签。
1.3 HTML标签的基本语法HTML标签由尖括号包围，并以起始标签和结束标签的形式出现。
例如，<p>是一个起始标签，</p>是一个结束标签。
还有一些标签是没有结束标签的，如<br>标签。
1.4 HTML元素与属性元素是指由起始标签、内容和结束标签组成的整体。
属性提供了关于元素的额外信息，如元素的样式、链接地址等。
HTML元素和属性中的内容是由标签和值组成的。
1.5 常用的HTML标签HTML有很多常用的标签，本章只介绍一些基础的标签。
如<h1>到<h6>标签用于定义标题；<p>标签用于定义段落；<a>标签用于创建超链接等。
第二章：CSS基础知识CSS，全名为层叠样式表（Cascading Style Sheets），是用于网页设计的样式表语言。
学习CSS可以为HTML文档添加样式和布局。
本章将介绍CSS的基础知识。
2.1 CSS的起源与发展CSS最早由赖耶斯博士（Håkon Wium Lie）和贝尔纳斯·卡尔（Bert Bos）于1996年创造，并在1997年发布了CSS1的第一个正式规范。
什么是CSS？CSS（Cascading Style Sheets）是一种用于描述网页样式和布局的样式表语言。
它与HTML结合使用，为网页提供外观和样式的控制。
CSS通过选择器和属性来选择和定义网页中的元素，使得开发人员可以轻松地改变网页的外观、布局和交互效果。
以下是CSS的一些关键概念和特点：1. 样式表：CSS是一种样式表语言，用于定义网页元素的外观和布局。
样式表由一系列的规则组成，每个规则由选择器和一组样式属性构成。
2. 选择器：CSS使用选择器来选择网页中的元素，并将样式应用于这些元素。
选择器可以根据元素的标签名、类名、ID、属性等进行匹配。
例如，选择器`p`选择所有的段落元素，选择器`.class`选择所有具有特定类名的元素。
3. 样式属性：CSS使用属性来描述元素的外观和布局。
属性定义了元素的颜色、字体、大小、边框、间距等方面的样式。
例如，属性`color`定义了元素的文本颜色，属性`font-size`定义了元素的字体大小。
4. 层叠和继承：CSS的名称中包含了"层叠"（Cascading）一词，表示样式的层叠和优先级规则。
当多个样式规则应用于同一个元素时，CSS使用层叠规则来确定最终的样式。
此外，CSS 中还存在继承的概念，某些样式属性可以从父元素继承到子元素。
5. 盒模型：CSS中的盒模型用于描述元素的布局。
每个元素都被视为一个矩形盒子，其包括内容区域、内边距、边框和外边距。
开发人员可以通过设置盒模型相关的属性来控制元素的大小和间距。
6. 响应式设计：CSS可以用于实现响应式设计，即根据不同设备和屏幕尺寸自动调整和适应网页的布局和样式。
通过使用CSS媒体查询或CSS框架，可以根据设备的特性和屏幕尺寸应用不同的样式。
7. CSS预处理器：CSS预处理器是一种将类似编程语言的语法引入CSS的工具。
它们增加了变量、嵌套规则、函数、导入等功能，使得CSS的编写更加灵活和可维护。
1、页面中，所有的CSS代码，需要写入到<style></style>标签中。
style标签的type属性应该选择text/css2、CSS 注释CSS修改页面中的所有标签，必须借助选择器选中。
选择器中，可以写多对CSS属性，用{}包裹：每个属性名与属性值之间用:分隔，多对属性之间，必须用;分隔。
3、【CSS常用选择器】①标签选择器写法：HTML标签名{}作用：可以选中页面中，所有与选择器同名的HTML标签。
②类选择器(class选择器)写法：.class名{}调用：在需要调用选择器样式的标签上，使用class="class 名"调用选择器优先级：>标签选择器③ID 选择器写法：#ID名{}调用：需要调用样式的标签，起一个id="ID名"优先级：ID选择器>class选择器注意：一个页面中，不能出现同名ID【Class选择器与ID选择器的区别】写法不同:class选择器用.声明，ID选择器用#声明；优先级不同：ID选择器>class选择器作用范围不同：class选择器可以多次调用，ID选择器只能使用一次。
【选择器的命名规范】只能有字母、数字、下划线、减号组成；开头不能是数字。
也不能是只有一个减号。
一般，起名要求有语义，使用英文单词与数字的组合。
④通用选择器写法：*{}作用：可以选中页面中所有的HTML标签。
优先级：最低！！！⑤并集选择器写法：选择器1,选择器2,……,选择器n{}生效规则：多个选择器取并集，只要标签满足其中任意一个选择器，样式即可生效。
⑥交集选择器写法：选择器1选择器2……选择器n{} 所有选择器紧挨着，没有分隔生效规则：多个选择器取交集，则必须满足所有选择器的要求，才能生效⑦后代选择器写法：选择器1 选择器2 ……选择器n{} 选择器之间空格分隔生效规则：只要满足，后一选择器是前一个选择器的后代，即可成效。
css教程菜鸟CSS（层叠样式表）是一种用于描述网页上的元素布局和样式的语言，它能够使网页更加美观和易于阅读。
本文将介绍一些CSS的基础知识和常用属性，以帮助菜鸟入门。
首先，让我们了解一下CSS的基本语法。
CSS由选择器和声明块组成。
选择器指定了要应用样式的HTML元素，而声明块则包含了一系列属性-值对，用于描述要应用到元素上的样式。
下面是一个简单的示例：```p {color: red;font-size: 20px;}```上述代码中，选择器“p”表示要应用样式的HTML段落元素。
声明块中的属性-值对指定了段落的文本颜色为红色，字体大小为20像素。
接下来，我们将介绍一些常用的CSS属性。
1. 字体属性：用于设置文本的字体样式，如字体大小、字体族等。
例如：```p {font-size: 16px;font-family: Arial, sans-serif;}```上述代码将段落的字体大小设置为16像素，字体族为Arial或者sans-serif。
2. 背景属性：用于设置元素的背景样式，如背景颜色、背景图片等。
例如：```body {background-color: lightblue;background-image: url("bg.jpg");}```上述代码将页面的背景颜色设置为浅蓝色，背景图片为名为“bg.jpg”的图片。
3. 边框属性：用于设置元素的边框样式，如边框宽度、边框颜色等。
例如：```div {border: 1px solid black;}```上述代码将`<div>`元素的边框宽度设置为1像素，边框颜色为黑色。
4. 盒模型属性：用于调整元素的尺寸和定位，如元素的宽度、高度、外边距等。
例如：```img {width: 200px;height: 150px;margin-top: 10px;}```上述代码将图片的宽度设置为200像素，高度设置为150像素，并且向上外边距10像素。
CSS知识点总结⼀．Css分类1.替代replaced elements:img input(radio button, checkbox, text)不可替代nonreplaces elements:html,xhtml,span,a,div,body,form,p,em,strong,2.block-level and inline-level:(block可以包含inline 元素，反过来是不可以的！) block-level:p div li ulinline-level: a span strong em b i u⼆．选择器2.元素选择器：P{}3. Grouping Selectors(分组)eg:h2, p {color: gray;}4.The universal selector（通配选择器）eg:* {color: red;}5. Grouping Declarationseg:h1 {font: 18px Helvetica; color: purple; background: aqua;}6.类选择器：.ddd7.ID选择器：#ddd8.属性选择器简单属性选择h1[class] {color: silver;}根据具体属性值p[class="warning"] {font-weight: bold;}根据部分属性值选择p[class~="warning"] {font-weight: bold;}⼦串匹配属性选择器[foo^="bar"][foo$="bar"][foo*="bar"]特定属性选择类型*[lang|="en"] {color: white;}9.使⽤⽂档结构后代选择器blockquote b, p b {color: gray;}选择⼦元素h1 > strong {color: red;}选择相邻兄弟元素h1 + p {margin-top: 0;}10.伪类选择器静态伪类：a:visited{}a:link{}(好像⽤不了)动态伪类：a:focus{}(常⽤于input元素)a:hover{}a:active{}选择第⼀个⼦元素：Li:first-child{}根据语⾔选择（）*:lang(fr){}结合伪类：link:hover:active {color: orange;}伪元素选择器：设置⾸字母样式li:first-letter{ color:Red;设置第⼀⾏的样式：.aa:first-line{ color:Purple;}设置之前和之后元素的样式：a:before{ content:"{}"; color:Silver;}a:after{ content:"end"; color:Aqua;}三．结构和层叠1.特殊性：重要性：!Important (最强悍！) eg: p.dark {color: #333 !important; background: white;}内联样式特殊性：1000 ID选择器：0100 li#answer {color: navy;} /* 0,1,0,1 (winner) */类属性值，属性选择或伪类：0010 h2.grape{color: purple;}/* 0,0,1,1 (winner)*元素和伪元素：0001 h1 {color: red;} /* 0,0,0,1 */通配选择器：0000结合符:⽆继承：⽆（0特殊性⽐⽆特殊性的更强）Eg: * {color: gray;} (（当h1中有其他元素时win）h1#page-title {color: black;}2.继承a)Border：没有继承b)Body:可以向上继承到html,其他的都是向下继承3.层叠：具有相同特殊性的靠后的权重⼤按权重和来源排序：（p79）读者的重要声明>创作⼈员的重要声明>创作⼈员的正常声明>读者正常>⽤户代理声明按特殊性排序按顺序排序Lvha顺序⽐较重要：即live visited hover active四．值和单位1.数字2.百分数3.颜⾊命名颜⾊：blue green white red black maroon ...⽤GRB指定颜⾊函数式RGB颜⾊(百分数法：0%-100%，数字法：0-255)Eg:rgb(100%,100%,100%)rgb(0%,0%,0%)rgb(255,255,255)rgb(0,0,0)灰度表：p.one {color: rgb(0%,0%,0%);}p.two {color: rgb(20%,20%,20%);}p.three {color: rgb(40%,40%,40%);}p.four {color: rgb(60%,60%,60%);}p.five {color: rgb(80%,80%,80%);}p.six {color: rgb(0,0,0);}p.seven {color: rgb(51,51,51);}p.eight {color: rgb(102,102,102);}p.nine {color: rgb(153,153,153);}p.ten {color: rgb(204,204,204);}25%*255=63.75=64⼗六进制RGB颜⾊Web颜⾊：rgb值20%和52和33（⼗六进制）整除4.长度单位a)绝对长度单位：in,cm,mm,pt(点),pc（派卡）1in=2.54cm 1cm=0.3394in1 in=72pt 1 in=6pcB) 相对长度单位Em和ex:Px:1em=14px 1em=2exEm最好的度量单位5.URL绝对URL相对URL注意：url和开始括号之间不能有空格6.关键字None:不同于0，Inherit:它的属性值和⽗元素相同7.css2单位：p(110)a)⾓度值：deg, grad 和 radb)时间值：s,ms 1000ms=1sc)频率值：hz,mhz五．字体1.字体系列制定字体系列：p {font-family: TimesNR,serif;}p {font-family: Times,TimesNR,'New Century Schoolbook',Georgia,'New York',serif;} 有空格、包括“#”和”$”的时候加“单引号”Cursive必须加“双引号”2.字体加粗a)Font-weight:bold bolder mormal 100 --900 lighterb)相对⼤⼩关键字:Bolder 是相对于⽗级字体粗细⽽⾔3.字体⼤⼩a)Font-size:xx-small x-small small medium large x-large xx-large smaller larger inheritb)相对⼤⼩关键字：larger smallerc)绝对⼤⼩：xx-small x-small small medium large x-large xx-larged)百分数：根据⽗元素继承的⼤⼩来计算strong {font-weight: lighter; font-size:larger;}strong b {font-weight:lighter; font-size:200%;}4.风格和变形a)字体风格：Font-style:italic oblique normal inheritb)字体变形：font-variant:small-caps normal inherit（只对英⽂有⽤，对汉语没有影响）c)转换⼤⼩写：p{ text-transform:uppercase;}5.拉伸和调整字体a)字体拉伸：font-stretch:normal| wider | narrower | ultra-condensed | exTRa-condensed| condensed| semi-condensed| semi-expanded| expanded| exTRa-expanded| ultra-expanded | inheritb)我的浏览器不⽀持（可以忽略）6.Font属性a)等价：h1{ font-style:inherit; font-weight:bold; font-variant:small-caps; font-size：20px; font-family:Candara,Corbel;}h1{ font:inherit bold small-caps20px Candara,Corbel; }b)注意;前两个可以互换，后两个不可以，normal 可以省略c)增加⾏⾼：line-height,Eg：body {font-size: 12px;}h1 {font: bold italic200%/1.2Verdana,Helvetica,Arial,sans-serif;}7.字体匹配六．⽂本属性1.缩进和⽔平对齐a)缩进⽂本：(只能⽤于块级元素！)text-indent:3em 10%b)⽔平对齐：(只能⽤于块级元素！)text-align:left center right justify(两端对齐⽂本) inherit2.垂直对齐：元素中⽂本基线之间的最⼩距离a)Line-height:”line-height”减去“font-size”等于⾏间距i.Line-height:18px,0.33in,150%,1.5emii.适⽤于所有元素iii.⾏⾼和继承：Line-height值从⽗元素继承时，要从⽗元素计算，⽽不是⼦元素上计算。
css总结笔记
CSS 是层叠样式表的缩写，是一种用于设计和布局网页的编程语言。
以下是CSS 总结笔记的全文:
一、CSS 的概述
CSS 用于设计和布局网页，可以让网页变得更加生动、美观和易读。
CSS 可以用于网页的头部、主体和底部，以及用于网页的各个部分。
二、CSS 的语法
CSS 的语法包括选择器、属性和值等。
选择器用于选择网页中的元素，属性和值用于设置元素的样式。
三、CSS 的样式
CSS 的样式包括颜色、字体、大小、边框、背景等。
通过设置这些样式，可以让网页变得更加美观。
四、CSS 的应用场景
CSS 的应用场景包括网页的布局、元素的样式设置和网页的颜色搭配等。
通过使用 CSS，可以让网页变得更加生动、美观和易读。
五、CSS 的兼容性
CSS 在不同的浏览器中有不同的兼容性问题。
为了解决这个问题，可以使用CSS 的媒体查询和伪元素等方法。
六、CSS 的优化
CSS 的优化可以提高网页的加载速度和用户体验。
可以通过减少重排、减少重写和压缩 CSS 等方式进行优化。
七、CSS 的拓展
CSS 还有很多拓展功能，如响应式设计、动画效果、Web 组件等。
通过使用CSS，可以让网页变得更加生动、美观和易读。
八、CSS 的总结
CSS 是网页设计中不可或缺的一部分。
通过使用 CSS，可以让网页变得更加生动、美观和易读。
在学习 CSS 时，需要熟练掌握语法、样式和应用场景，并了解 CSS 的兼容性和拓展功能。
什么是CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示HTML 元素
样式通常存储在样式表中
把样式添加到HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
为什么使用CSS？
CSS允许您针对HTML元素应用特定的样式。
CSS的主要好处在于，它允许你将样式与页面内容进行分离。
仅使用HTML，样式将和页面内容格式混杂在一起，这样的页面将会变得难以维护。
所有的web页面样式都可以（也应该）从HTML文档中分离出来，建立成一个单独的CSS 文件再进行引用。
内联CSS
在web文档中直接插入一个CSS是内联样式的使用方法之一。
使用内联样式，将CSS应用于单个元素。
为了使用内联样式，将CSS属性直接添加到相关标签中。
下面的例子展示了如何创建一个灰色背景和白色文本的段落：
外部引用CSS
通过这种方法将所有的CSS样式保存在同一个后缀名为.css的拓展文件中。
然后通过html标签<link>在HTML页面的<head>部分将CSS文件引入。
如下例子所示：
HTML部分：
CSS部分：
CSS语法
CSS是由浏览器解释的样式规则,然后应用于文档中相应的元素。
样式规则有三个部分：选择器，属性和值。
例如，标题颜色可以定义为：
详解：
选择器要指向需要设置样式的HTML元素。
声明块包含一个或多个用分号分隔的声明。
每个声明都包含一个由冒号分隔的属性名称和值。
例如：
类型选择器
最常见和易于理解的选择器是类型选择器。
该选择器以页面上的元素类型为目标。
例如，要定位页面上的所有段落：
CSS注释
注释用于解释您的代码，并可能在您稍后编辑源代码时为您提供帮助。
浏览器会自动忽略注释。
CSS的注释如下所示：
例子：（将原先设置红色背景色的CSS样式注释掉）
CSS级联
网页的最终外观是不同的样式结合的结果。
通过样式的三个主要来源形成一个级联：
由页面的作者创建的CSS样式
浏览器的默认CSS样式
浏览页面的用户自定义CSS样式
CSS继承
继承是指属性在页面中流动的方式。
除非另有定义，子元素通常会采用父元素的特征。
例子：
元素选择器
元素选择器：就是对已选中的HTML元素符号设置CSS样式（例如：div、p、a、ul、li等元素符号）。
如下图所示，就是为div元素设置CSS样式的width和height属性。
参考代码片段：
class选择器
class选择器（类型选择器）：是最常见和易于理解的。
该选择器通过绑定HTML
后代选择器
后代选择器：选中某个父级下对应的所有子级，并针对该子级设置CSS样式。
•后代选择器设置的CSS样式不会影响到父级。
•父级和子级之间需要用空格隔开。
•后代选择器可以存在多层级父级，并不局限在单一父子级之间，层级越深所设置的CSS样式优先级越高。
参考代码片段：
子元素选择器
子元素选择器：子元素选择器与后代选择器较为类似。
相对于后代选择器，子元素选择器所涉及的范围会更小。
•后代选择器可以跨层级影响，而子元素选择器要求父元素和子元素一定为上下级关系，中间如果隔着其他元素则会失效。
•父元素和子元素之间需要用> (子结合符) 隔开。
参考代码片段：
相邻选择器
相邻选择器：选中对应元素的下一个兄弟元素。
•所涉及的相邻兄弟元素必须是该元素的同级元素。
•所涉及的相邻兄弟元素必须是相邻兄弟元素，中间若有其他元素隔开也将导致失效。
•元素A和对应的相邻兄弟元素之间需要用+隔开。
参考代码片段：
属性选择器
属性选择器：检索HTML页面中符合所设置的属性条件的元素。
属性选择器通过[ ]设置被选元素的属性条件。
如下图所示，将选择HTML页面中所有包含了alt属性的img元素并为其设置CSS样式。
参考代码片段：
设置页面上所有含有class属性并且属性值的词列表的某个词等于w3cschool的div元素。
(适用于针对设置了多个class名称的元素使用)
选择器分组
选择器分组：当需要多个元素同时使用同一套CSS样式时，可以使用选择器分组，这样可以避免为每个元素单独设置样式而照成不必要的冗余。
选择器分组通过, （逗号）将需要复用同一套样式的多个元素进行分隔。
参考代码片段：
font-family属性
font-family属性指定元素的字体。
有两种字体系列名称：
•字体系列：特定的字体系列（如Times New Roman或Arial）
•通用族：一组具有相似外观的字体族（如Serif或Monospace）
以下是不同字体样式的示例：
HTML代码：
font-family属性
font-family属性应该包含几个字体名称作为备选。
在CSS样式中指定Web字体时，请添加多个字体名称，以避免意外的行为。
如果客户端计算机出于某种原因没有您选择的字体时，则会尝试下一个字体。
指定通用字体系列是一个很好的做法，如果没有其他字体可用，让浏览器在通用系列中选择相似的字体。
如果浏览器不支持Arial字体，则会尝试下一个字体（Helvetica Neue，Helvetica）。
如果浏览器没有任何一个，它会尝试通用的sans-serif。
font-size属性
font-size属性
font-size属性用于设置字体的大小。
设置网页字体大小的其中之一方法是使用关键字。
例如xx-small, small, medium, large, larger, etc等。
HTML代码：
CSS代码：
您还可以使用像素(px)或相对尺寸单位(em)数值来操纵字体大小。
当您需要像素精度时，以像素值(px)设置字体大小是一个不错的选择，它可以让您完全控制文本大小。
em尺寸单位是设置字体大小的另一种方式（em是相对尺寸单位）。
它允许所有主流浏览器调整文本的大小。
如果您没有在页面上的任何位置设置字体大小，那么这是浏览器的默认大小，即16px。
要计算em大小，只需使用以下公式：em = px / 16，即1em = 16px。
例如：
font-style属性
font-style属性通常用于指定斜体文本。
HTML代码：
CSS代码：
font-style属性有三个值：normal，italic和oblique。
oblique非常类似于italic，但浏览器的支持较少。
HTML代码：
CSS代码：
font-weight属性
font-weight控制文本的粗细。
值可以设置为normal (默认)，bold，bolder，和lighter。
HTML代码：
CSS代码：
根据文本的厚度，也可以使用从100（细）到900（粗）的数字来定义字体粗细。
400与normal相同，700与bold相同。
HTML代码：
CSS代码：
font-variant属性
font-variant属性允许您将字体转换为所有小型大写字母。
值可以设置为normal，small-caps，和inherit。
HTML代码：
CSS代码：
color属性
color属性用于指定文本的颜色。
指定文本颜色的其中一种方法是使用颜色名称：如red, green, blue等
以下是更改字体颜色的示例。
HTML代码：
CSS代码：
定义color的其他方法是使用十六进制值和RGB。
十六进制形式是一个井号(#)，最多6个十六进制值(0-F)。
RGB定义了红色，绿色和蓝色的各个值。
在下面的示例中，我们使用十六进制值将标题颜色设置为蓝色，使用RGB形式将段落设置为红色。
HTML代码：
CSS代码：。
