CSS基础知识

css知识全面总结嘿，朋友！今天咱们来聊聊 CSS 这玩意儿。

CSS 就像是给网页化妆的魔法颜料，能让网页变得美美的。

你想想，要是一个网页没有 CSS，那得多单调、多无聊呀！就好像一个人素颜出门，虽说也能看，但总觉得缺了点啥。

先来说说 CSS 的选择器。

这选择器啊，就像是你手里的魔法棒，指哪儿打哪儿。

比如说，“类选择器”，你给某个元素加上一个独特的类名，然后通过这个类名来控制它的样式，是不是很神奇？这就好比你在一群人中，喊出一个特定的名字，就能找到那个人，然后给他打扮打扮。

还有“ID 选择器”，这可厉害了，每个页面里 ID 得是唯一的。

它就像给网页元素颁发的独一无二的身份证，通过这个身份证，你能精准地给它设定样式。

比如说一个网页里的导航栏，你给它一个特定的ID，然后让它的颜色、字体、大小都变得与众不同。

再说说 CSS 的属性。

字体属性那可是基础中的基础，什么字体大小、字体样式、字重等等。

这就像是给文字穿上不同的衣服，有时候是休闲装（正常字体），有时候是正装（加粗字体），是不是很有趣？还有背景属性，能给网页元素换上各种背景颜色或者图片。

这就像给房间换壁纸，今天喜欢蓝色，明天喜欢粉色，随你心情！再瞧瞧边框属性，能给元素加上边框，粗细、样式、颜色随你定。

这是不是有点像给一个物品加上漂亮的框框，瞬间就高大上起来了？至于定位属性，那可真是个神奇的存在。

绝对定位、相对定位，让元素想在哪就在哪。

这就好比你在摆积木，想把哪块积木放哪儿就放哪儿，多自由！还有浮动属性，能让元素飘起来，并排排列。

这感觉就像一群小伙伴手拉手并排走，多整齐！CSS 还有盒模型呢，这可是个重要的概念。

内容、内边距、边框、外边距，就像一个盒子的里里外外，每个部分都能影响元素的最终大小和显示效果。

另外，CSS 中的媒体查询也不能忽略。

它能让网页根据不同的设备和屏幕尺寸呈现出不同的样式。

这就好比你有一件衣服，能根据不同的场合自动变换款式，是不是超厉害？总之，CSS 就像是网页的化妆师，能让网页变得丰富多彩、独具魅力。

什么是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 的兼容性和拓展功能。