css知识点总结
CSS的样式PPT课件
知识点精讲
知识点分析 CSS文字样式的常用属性 设置字体： 基本语法为font-family:字体1，字体2，字体3。 例如：h1{font-family:宋体，楷体，隶书;}。 设置文字大小 基本语法为font-size:尺寸|百分比|关键字。 设置斜体 基本语法为font-style:normal|italic|oblique。 设置文字粗细 基本语法为font-weight:normal|bold|bolder|lighter|number。 设置变体 基本语法为font-variant:normal|small-caps。
网站建设与管理
CSS的样式
考纲解读
1 掌握CSS的基础知识。 2 掌握CSS的属性。
考点解读
重难点分析：CSS样式表、样式选择器及CSS的属性。
知识点精讲
知识点1 CSS的基础知识 例题精讲 请输入正确的代码
【解析】外部链接样式表的声明方法为<link rel=″stylesheet″ type=″text/css″ href=″样式 表文件的地址″>
知识点精讲
巩固提高
在Dreamweaver软件中，给网站首页设置“页面属性”的具体要求如下:
网站首页中文字大小设置为12 px，文字颜色设置为“#000”。
设置网页背景颜色为“#CCC”。 设置“链接（CSS） ”中“下划线样式”为“始终无下划线”。 设置“链接（CSS）”中“链接颜色”为“#000”。 下面是网站首页的部分源代码，请从选项A~N中将正确的内容填入相应位置。
知识点精讲
CSS段落和其他文字样式属性 修饰文字 基本语法为text-decoration:underline|overline|line-through|blink|none。 设置段落的水平对齐方式 基本语法为text-align:left|right|left|justify。 颜色及背景 设置文字颜色 基本语法为color：颜色的名称|RGB值|十六进制数。 设置背景 基本语法为background:背景颜色|背景图像|背景重复|背景附件|背景位置。 设置背景颜色属性 基本语法为background-color:颜色|transparent（透明）。 设置背景图像属性 基本语法为background-image:url（背景图片的路径和名称）。
CSS媒体查询知识点
CSS媒体查询知识点CSS媒体查询是一种在网页设计中常用的技术，通过媒体查询可以根据设备的特性来适配网页的样式和布局。
本文将介绍CSS媒体查询的基本概念、语法和常见应用，帮助读者更好地理解和运用这一技术。
一、基本概念CSS媒体查询是一种CSS3新增的特性，用于根据设备的特性或特定的媒体类型来应用不同的CSS样式。
媒体查询提供了一种响应式布局的解决方案，使得网页可以在不同的设备上展现出最佳的视觉效果。
二、语法媒体查询的语法如下所示：@media mediatype and (condition) {CSS rules;}其中，mediatype表示媒体类型，condition表示条件，CSS rules表示需要应用的CSS样式。
常用的媒体类型包括：1. all：所有设备2. screen：屏幕设备，如计算机、平板电脑3. print：打印机和打印预览4. speech：屏幕阅读器等语音合成器常用的条件包括：1. width：设备的宽度2. height：设备的高度3. orientation：设备的方向（横向或纵向）4. device-aspect-ratio：设备的宽高比5. resolution：设备的分辨率三、常见应用媒体查询在网页设计中有着广泛的应用，以下是几个常见的应用示例：1. 自适应布局媒体查询可以根据设备的宽度来调整网页的布局。
通过设置不同的CSS样式，可以实现在不同设备上展示不同的版面结构和元素排列方式，从而达到适应不同屏幕大小的效果。
2. 响应式图片在响应式网页设计中，媒体查询可以根据设备的分辨率来动态加载适应当前设备的不同大小的图片。
通过设置不同分辨率的图片资源，可以提升网页的加载速度和用户体验。
3. 打印样式通过媒体查询，可以为打印设备单独定义样式，使打印的页面排版更加合适。
例如，可以设置打印时隐藏导航栏和广告等不必要的元素，并调整字体大小和行间距等，以保证打印输出的质量。
CSS滤镜知识点
CSS滤镜知识点CSS滤镜是一种应用于HTML元素的视觉效果工具，通过改变元素的颜色、亮度、对比度等属性，能够实现各种各样的效果。
在本文中，我们将深入探讨CSS滤镜的相关知识点。
一、CSS滤镜简介CSS滤镜是一系列用于改变HTML元素的呈现方式的特效。
通过对图像或元素应用一系列滤镜效果，我们可以改变其外观和视觉效果，从而创造出更加丰富多样的界面效果。
二、常用的CSS滤镜属性1. filter属性filter属性是应用滤镜效果的关键属性，通过给元素添加filter属性来应用滤镜效果。
具体的滤镜效果是通过filter函数来定义的。
2. blur滤镜blur滤镜用于给元素添加模糊效果。
可以通过设置模糊半径来控制模糊程度，半径越大，模糊程度越高。
3. brightness滤镜brightness滤镜用于调整元素的亮度。
可以通过设置亮度的百分比来控制亮度的变化，例如brightness(150%)表示将元素的亮度增加50%。
4. contrast滤镜contrast滤镜用于调整元素的对比度。
可以通过设置对比度的百分比来控制对比度的变化，例如contrast(200%)表示将元素的对比度增加100%。
5. grayscale滤镜grayscale滤镜用于将元素转换为灰度图像。
可以通过设置灰度的百分比来控制灰度的变化，例如grayscale(50%)表示将元素的灰度程度设置为50%。
6. sepia滤镜sepia滤镜用于将元素转换为复古风格的棕色色调。
可以通过设置棕色的百分比来控制棕色的变化，例如sepia(80%)表示将元素的棕色程度设置为80%。
7. saturate滤镜saturate滤镜用于调整元素的饱和度。
可以通过设置饱和度的百分比来控制饱和度的变化，例如saturate(200%)表示将元素的饱和度增加100%。
8. hue-rotate滤镜hue-rotate滤镜用于旋转元素的色相。
可以通过设置旋转角度来控制色相的变化，例如hue-rotate(90deg)表示将元素的色相顺时针旋转90度。
CSS超全笔记（适合新手入门）
CSS超全笔记（适合新⼿⼊门）CSSCSS初识CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜⾊、背景的控制及整体排版等，⽽且还可以针对不同的浏览器设置不同的样式。
引⼊CSS样式表（书写位置）CSS可以写到那个位置？是不是⼀定写到html⽂件⾥⾯呢？内部样式表内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下：<head><style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。
type="text/CSS" 在html5中可以省略，写上也⽐较符合规范，所以这个地⽅可以写也可以省略。
⾏内式（内联样式）内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。
是通过标签的style属性来设置元素的样式，其基本语法格式如下：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>语法中style是标签的属性，实际上任何HTML标签都拥有style属性，⽤来设置⾏内式。
其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标签及嵌套在其中的⼦标签起作⽤。
外部样式表（外链式）链⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：<head><link href="CSS⽂件的路径" rel="stylesheet" /></head>注意： link 是个单标签哦该语法中，link标签需要放在的三个属性head头部标签中，并且必须指定link标签，具体如下：href：定义所链接外部样式表⽂件的URL，可以是相对路径，也可以是绝对路径。
css实训总结
CSS实训总结在这次CSS实训中，我学到了很多关于CSS的知识和技能。
通过实际操作，我深入了解了CSS的选择器、样式规则、布局和响应式设计等重要概念。
以下是我对这次实训的总结：1. CSS基础知识：在实训开始之前，我重新温习了CSS的基础知识，包括选择器、样式规则、颜色和字体、盒模型等。
这些基础知识对于理解CSS的核心概念非常重要。
2. 选择器：在实训中，我学习了更多的选择器，如类选择器、ID选择器、属性选择器等。
这些选择器让我能够更精确地定位和样式化页面元素。
通过使用不同的选择器，我可以根据需要选择单个元素或一组元素进行样式化。
3. 样式规则：在这次实训中，我学习了更多的CSS样式规则，如背景、边框、阴影、渐变等。
通过这些样式规则，我可以创建更加美观和专业的网页设计。
此外，我还学习了如何使用CSS动画和过渡效果，为网页添加动态效果。
4. 布局：在实训中，我学习了如何使用CSS进行页面布局。
通过使用Flexbox和Grid布局，我可以轻松地创建复杂的页面布局。
这些布局方法使得页面元素的排列和分布更加灵活和可控。
5. 响应式设计：在这次实训中，我学习了如何使用媒体查询和响应式设计。
通过使用媒体查询，我可以根据不同的设备和屏幕尺寸，应用不同的样式规则。
这使得我的网页能够在各种设备和屏幕尺寸上良好地显示和使用。
6. 实际应用：在实训中，我通过实际项目来应用所学的CSS知识。
我为一个虚构的网站设计了样式，并实现了响应式布局。
在这个过程中，我遇到了很多问题，但通过查阅文档和请教老师，我成功地解决了这些问题。
这个过程让我更加深入地理解了CSS的实际应用和技巧。
7. 总结：通过这次CSS实训，我不仅温习了基础知识，还学习了更多的高级技能。
我掌握了如何使用选择器、样式规则、布局和响应式设计来创建美观而专业的网页。
这次实训对我的专业技能的提升非常有帮助，也为我未来的职业发展打下了坚实的基础。
html css知识点
html css知识点嘿，朋友！今天咱们来聊聊 HTML 和 CSS 这对好搭档的知识点。
HTML 就像是一栋房子的骨架，它决定了房子的结构和布局。
比如说，`<html>` 标签就是整个网页的开始，就像房子的地基一样重要。
`<head>` 里放着各种关于网页的重要信息，比如网页的标题`<title>`，这就好比是房子的门牌号码，让人一看就知道这是啥地方。
`<body>` 呢，那就是房子里真正能放东西的空间，里面的各种标签，比如`<h1>` 到 `<h6>` 是不同大小的标题，想象一下，这是不是像房子里不同大小的房间标识？再来说说 CSS ，它就像是给房子装修的魔法。
比如，通过设置`color: red;` 就能让文字变成红色，这不就像是给房间刷上了喜欢的颜色？还有 `font-size: 20px;` 能改变文字大小，就好像给文字穿上了不同尺码的衣服。
CSS 里的选择器也很有趣哦！类选择器 `.class-name` ，就好像给一群有相同特点的元素发了个特别的徽章，只要有这个徽章，就能受到特定的样式影响。
还有 ID 选择器 `#id-name` ，这可厉害了，它是独一无二的，就像给某个元素发了张专属的贵宾卡。
说到定位，`position: relative;` 和 `position: absolute;` 也很有意思。
相对定位就像是一个人在原本的位置上稍微挪了挪，而绝对定位呢，就像是直接把一个东西从原来的地方拎出来，放到了一个全新的位置。
还有浮动 `float` ，这就好比把一些元素放在水面上，让它们能顺着水流漂到一边去，给其他元素腾出空间。
盒子模型也是很关键的哦！想象一下，每个元素都是一个盒子，有内容、内边距、边框和外边距。
调整这些，就像是在给盒子量身定制合适的包装。
怎么样，HTML 和 CSS 是不是很神奇？只要掌握了它们，就能打造出各种漂亮、独特的网页，就像建造出梦想中的房子一样！所以，别犹豫，多练习，多尝试，相信你一定能成为网页设计的高手！。
CSS知识点总结
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中知识点 sass_less_stylus 整理
面试官：说说对Css预编语言的理解？有哪些区别?一、是什么Css作为一门标记性语言，语法相对简单，对使用者的要求较低，但同时也带来一些问题需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少Css编写经验而很难写出组织良好且易于维护的Css代码Css预处理器便是针对上述问题的解决方案预处理语言扩充了Css语言，增加了诸如变量、混合（mixin）、函数等功能，让Css更易维护、方便本质上，预处理是Css的超集包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的Css文件二、有哪些Css预编译语言在前端里面有三大优秀的预编处理器，分别是：•sass•less•stylussass2007 年诞生，最早也是最成熟的Css预处理器，拥有 Ruby 社区的支持和Compass 这一最强大的Css框架，目前受LESS影响，已经进化到了全面兼容Css的Scss文件后缀名为.sass与scss，可以严格按照 sass 的缩进方式省去大括号和分号less2009年出现，受SASS的影响较大，但又使用Css的语法，让大部分开发者和设计师更容易上手，在Ruby社区之外支持者远超过SASS其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容Css，反过来也影响了SASS演变到了Scss的时代stylusStylus是一个Css的预处理框架，2010 年产生，来自Node.js社区，主要用来给Node项目进行Css预处理支持所以Stylus是一种新型语言，可以创建健壮的、动态的、富有表现力的Css。
比较年轻，其本质上做的事情与SASS/LESS等类似三、区别虽然各种预处理器功能强大，但使用最多的，还是以下特性：•变量（variables）•作用域（scope）•代码混合（ mixins）•嵌套（nested rules）•代码模块化（Modules）因此，下面就展开这些方面的区别基本使用less和scss.box {display: block;}sass.boxdisplay: block.boxdisplay: block嵌套三者的嵌套语法都是一致的，甚至连引用父级选择器的标记 & 也相同区别只是 Sass 和 Stylus 可以用没有大括号的方式书写less.a {&.b {color: red;}}变量变量无疑为 Css 增加了一种有效的复用方式，减少了原来在 Css 中无法避免的重复「硬编码」less声明的变量必须以@开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号:分隔开@red: #c00;strong {color: @red;}sass声明的变量跟less十分的相似，只是变量名前面使用@开头$red: #c00;strong {color: $red;}stylus声明的变量没有任何的限定，可以使用$开头，结尾的分号;可有可无，但变量与变量值之间需要使用=在stylus中我们不建议使用@符号开头声明变量red = #c00strongcolor: redCss预编译器把变量赋予作用域，也就是存在生命周期。
web前端考试知识点总结
web前端考试知识点总结一、HTML知识点总结1. HTML基础知识- HTML的基本结构- HTML的常用标签- HTML的元数据标签- HTML的列表、表格、表单等相关标签2. HTML5新增的语义化标签- header、footer、nav、article、section、aside等3. HTML5新增的表单元素- input的各种类型- 新增的表单元素如datalist、keygen等4. HTML5新增的媒体元素- video、audio等5. HTML5新增的API- 本地存储、离线应用、地理定位等二、CSS知识点总结1. CSS基础知识- CSS的语法- CSS的选择器- CSS的样式属性2. CSS布局- 盒模型- 浮动- 定位- 弹性盒子布局- 栅格布局3. CSS3新增的样式- 边框、背景、文字、渐变、阴影等效果 - 过渡、变换、动画等4. 响应式设计- 媒体查询- 移动优先5. CSS预处理器- SASS、LESS等三、JavaScript知识点总结1. JavaScript基础知识- 数据类型- 运算符- 流程控制语句2. JavaScript函数- 函数的定义- 作用域- 闭包- 高阶函数3. JavaScript对象- 对象的创建- 原型链- 对象的继承4. DOM操作- 节点的增删改查- 事件处理5. AJAX与跨域- XMLHttpRequest对象- 跨域访问的解决方案6. ES6知识点- let、const- 箭头函数- 解构赋值- 模板字符串- Promise等四、Web前端知识点总结1. 前端框架- Vue.js、React、Angular等- 每个框架的基本原理和使用方法2. 前端工程工具- Webpack、Gulp、Grunt等- 理解构建工具的作用和配置3. 前端性能优化- 页面加载速度优化- 代码性能优化4. 前端安全- XSS、CSRF、点击劫持等- 前端安全常见问题和解决方案5. 前端测试- 单元测试- UI测试6. 前端工程化- 模块化开发- 前端构建流程综上所述，Web前端技术知识点之多之杂，要想在考试中取得好成绩，需要对各种知识点进行深入理解和掌握。
css总结笔记
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 的兼容性和拓展功能。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
css知识点总结
1. HTML 标签，分为结构性和修饰性
2. css必须写在<head></head>里面的<style></style>里面
3. css 由选择器+ 规则组成, 规则由属性和值组成，格式示例：div{color:red;}
4. 常用的选择器有：标签选择器（类型选择器）、class选择器（类选择器）、id选择器、后代选择器、组合选择器和并列选择器等等
5. class选择器与id选择器的区别是，class可以样式重用，而id不行，因为id就像是人的身份证，是唯一的
6. 当规则冲突，后面的覆盖前面的（最近原则）
7. css规则中
1）有数字，就要带单位（零除外），例如div{width:200px;}
2）边框三要素：颜色大小形状例如div{border:#F00 1px solid;}
3）层居中的要决：1、有宽度2、左右外补丁要为auto 例如div{width:200px; margin:auto;} 4）margin的提供参数值不同个数代表不同的意思，可以参考手册
5）高度=行高，字就可以垂直居中例如div{height:200px; line-height:200px;}
8. 标签还可以分为行内标签和块级标签，行内标签的占用空间取决于内容（例如a、span），块级标签不管内容多与少都会占用一整行（例如div、p）。
由于行内标签一般不支持width、height，所以排版过程中都会用块级标签来布局
9. 如果需要块级标签排版在同一行，只需要给它们都加上float:left的规则即可
10. 用选择器的时候，注意不要伤及无辜。
11. 背景图默认会平铺（也叫重复），如果想背景图水平居右，垂直居中，不重复的话，可以写background:url(bg.jpg) right center no-repeat;
12. 网页当中的空白，不要再用 的方法来实现，而应该考虑用外补丁（margin）或内补丁（padding）来实现
13. 鼠标的形状可以通过cursor来实现，例如div{cursor:pointer;}
14.CSS背景属性（Background）
background 在一个声明中设置所有的背景属性。
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 设置元素的背景图像。
background-position 设置背景图像的开始位置。
background-repeat 设置是否如何重复背景图像。
15.CSS字体属性（Font）
font 在一个声明中设置所有字体属性。
font-family 规定文本的字体系列。
font-size 规定文本的字体尺寸。
font-size-adjust 为元素规定aspect值。
font-stretch 收缩或拉伸当前的字体系列。
font-style 规定文本的字体样式。
font-variant 规定字体的粗细。
16.CSS外边距属性（Margin）
margin 在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。
17.CSS内边距属性（Padding）
padding 在一个声明中设置所有内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。
18.CSS列表属性（List）
list-style 在一个声明中设置所有的列表属性。
list-style-image 将图像设置为列表项标记。
list-style-position 设置列表项标记的放置位置。
list-style-type 设置列表项标记的类型。
marker-offset
19.CSS尺寸属性（Dimension）
height 设置元素高度。
max-height 设置元素的最大高度。
min-height 设置元素的最小高度。
min-width 设置元素的高度。