《css的基本概念》课件

简介CSS是层叠样式表的缩写，它是一种用于CSS CascadingStyle Sheets控制网页外观和布局的语言可以定义网页的字体、颜色、间距、布局和其他视觉效果，为网CSS页设计师提供强大的控制权的概念和作用CSS网页样式跨平台兼容性提高开发效率控制网页元素的外观，比如颜色确保网站在不同设备上展现一致通过分离样式和结构，简化了网CSS CSS CSS、字体、大小和位置的外观，提升用户体验页开发流程，方便团队协作的基本语法结构CSS选择器选择器用于指定要应用样式的元素选择器用于指定要应用样式的HTML元素HTML属性属性定义要应用的样式，例如颜色、字体大小或边框宽度值值是属性的具体值，例如红色、像素或像素12100的选择器CSS选择器CSS选择器用于指定要应用样式的元素，选择器可以是单个元素、元素组或元素的特定部分选择器作用选择器让您可以准确地选择网页上的特定元素，并将其与所需的CSS样式进行匹配选择器种类CSS提供多种选择器，例如元素选择器、ID选择器、类选择器、属性选择器、伪类选择器、层次选择器等元素选择器标签选择器类选择器

1.

2.12选择所有指定标签名的元选择带有特定类名的元素素，如，如选择所有``.example`属性值为class“example”选择所有段落元素`的元素选择器通配符选择器

3.ID

4.34选择具有特定的元素，选择页面中所有元素，如ID如选择属性选择所有元素`#example`ID`*`值为的元素“example”选择器ID选择器ID使用符号来定义选择器选择器用于选择具有特定#ID ID属性的元素ID选择器必须是唯一的，在一个文档中不能重复ID HTML类选择器类选择器作用类选择器使用句点（）作为将样式应用于具有相同类名.前缀，后跟类名的多个元素应用一个元素可以有多个类名，每个类名应用不同的样式属性选择器属性选择器语法属性选择器用于选择具有特属性选择器语法为属性名[]定属性的元素可以使用属或属性名属性值或属性[=][性名、属性值、或两者结合名属性值或属性名属^=][$=来进行选择性值或属性名属性值][*=]示例选择所有具有属性的元素，选择所有具有属性值title:[title]title为的元素example:[title=example]伪类选择器鼠标悬停鼠标点击首个元素最后一个元素当鼠标悬停在元素上时，应当用户点击元素时，应用不选择列表中的第一个元素，选择列表中的最后一个元素用不同的样式，例如改变颜同的样式，例如改变背景色使其与其他元素有所区别，使其与其他元素有所区别色或显示隐藏内容或添加阴影效果层次选择器后代选择器子元素选择器选择器后面的所有元素，包括子孙后代选择器的直接子元素A A相邻兄弟选择器通用兄弟选择器选择器之后的紧邻兄弟元素选择器之后的兄弟元素A A的单位CSS长度单位百分比单位12像素（）、厘米（）相对于父元素的百分比px cm、英寸（）in颜色单位

3、十六进制、颜色名称RGB长度单位像素（）厘米（）毫米（）英寸（）px cmmm in像素是屏幕上最小的单位厘米是常用的长度单位，毫米是另一种常用的长度英寸是另一种常用的长度，通常是显示器上的一个用于表示物理尺寸在单位，用于表示物理尺寸单位，用于表示物理尺寸点像素单位是最常用的中，厘米单位可以用在中，毫米单位在中，英寸单位CSSCSSCSS长度单位，它直接反映了于定义元素的宽度和高度可以用于定义元素的宽度可以用于定义元素的宽度元素的实际尺寸和高度和高度百分比单位应用场景百分比单位通常用于设置元素的宽度、高度、字体大小等属性例如，设置一个元素的宽度为50%，则该元素的宽度将为其父元素宽度的50%相对值颜色单位十六进制

1.

2.RGB12最常用的颜色表示方法，用三个到之间的数0255使用后跟六个十六进制字表示红、绿、蓝三种颜#数，例如代表色成分，例如#FF0000rgb255,0,红色代表红色0颜色名称

3.HSL

4.34用色相、饱和度和亮度表一些常用的颜色可以直接示颜色，更直观地表达颜使用英文单词表示，例如色变化，例如、、等hsl0,red greenblue代表红色100%,50%的颜色表示CSS使用多种方式表示颜色，常见的有三种CSS•颜色名称•十六进制值•RGB值使用颜色名称比较方便，但颜色选择有限十六进制值更精确，可以表示更多颜色值也比较精确，通常用于动态生成颜色RGB字体属性字体族字体大小指定文本使用的字体系列，例如宋体或定义文本的字号大小，可以使用像素（“”px）、点（）或百分比等单位“Arial”pt字体粗细字体样式设置文本的粗细程度，例如表示设定文本的字体样式，例如表示“normal”“normal”普通，表示加粗常规，表示斜体bold“italic”文本属性文本对齐字体大小属性用于控制文本内容的对齐方式，例如、属性用于设置文本的大小，单位可以使用、、text-align leftright font-size px em、、等center justifyrem字体颜色行高属性用于设置文本的颜色，可以使用颜色名称或十六进制属性用于设置文本的行高，它控制行与行之间的间color line-height颜色值距背景属性背景颜色背景图片背景尺寸和位置背景透明度设置元素的背景颜色，可以设置元素的背景图片，可以控制背景图片的尺寸和位置设置背景的透明度，使其可使用颜色值或渐变色是本地图片或网络图片，使其在元素中显示得更好以透过背景看到元素内容盒子模型盒子模型是中的基本概念，用于描述元素在网页中的大小和位置CSS每个元素都被视为一个矩形盒子，包含内容区域、内边距、边框和外边距边框属性border-width border-style设置边框的宽度，常用单位设置边框的样式，例如实线包括像素（）和百分比（（）、虚线（）px soliddashed）、点线（）等%dottedborder-color设置边框的颜色，可以使用颜色名称、十六进制颜色值、或RGB格式HSL内边距属性定义作用内边距指的是元素内容与边增加元素内容与边框的距离框之间的空白区域，用，使元素内容更具可读性属性设置padding属性值方向内边距属性的值可以是数字可以单独设置上、下、左、、百分比或长度单位，例如右方向的内边距，例如、、等、pxemrem padding-top padding-、、bottom padding-leftpadding-right外边距属性定义属性值应用示例外边距用于控制外边距属性可以使用像素外边距可以用来创建元素例如，您可以使用margin元素周围的空白区域它、百分比、等之间的间距，以及控制元属性来设置元px%em margin-top可以指定元素与其他元素单位进行设置素在页面上的位置素的上边距或浏览器窗口边缘之间的距离布局方式浮动布局定位布局弹性布局栅格布局浮动布局使用属性将定位布局使用属性弹性布局使用栅格布局使用float positiondisplay:flex display:grid元素向左或向右移动，并使将元素从文档流中移除，并属性将元素排列成一行或一属性将元素排列成一个二维其脱离标准文档流使用、、或列，并允许元素在容器中自网格，并允许元素在网格中top right bottom属性来定位元素动调整大小自动调整大小left浮动布局元素脱离文档流浮动元素脱离正常文档流，允许元素在页面中自由移动文字环绕文字可以环绕浮动元素，形成文字与图片并列的效果多栏布局使用浮动布局可以创建多栏页面，实现不同的内容排版定位布局精确控制相对定位定位布局允许您通过设置元素的属性来精确控制相对于元素在文档流中的默认位置进行定位，使用、position top元素的位置、和属性进行调整rightbottomleft绝对定位固定定位相对于最近的已定位祖先元素进行定位，如果没有已定位相对于浏览器窗口进行定位，即使滚动页面，元素也会保祖先元素，则相对于浏览器窗口进行定位持在相同位置定位布局定位定位模式使用定位可以精确控制元素的位置默认定位，元素处于正常•static:通过设置元素的定位模式和偏移量，的文档流中可以将其放置在页面上的任何位置相对定位，元素相对于•relative:其正常位置进行偏移绝对定位，元素相对于•absolute:最近的已定位祖先元素进行定位，如果没有已定位祖先元素，则相对于文档进行定位固定定位，元素相对于浏览•fixed:器窗口进行定位栅格布局布局灵活性响应式设计易于使用栅格布局提供灵活的布局控制，可以响应式设计可以自动适应不同屏幕尺栅格布局易于学习和使用，并提供简轻松调整元素的宽度和位置寸，使网站在各种设备上都能保持一洁的语法，简化了网页布局过程致的布局的继承CSS层级关系属性传递继承是指子元素可以从父元素继继承自父元素的样式属性会应用到子CSS承某些样式属性元素上，除非子元素自身定义了不同的样式属性样式覆盖提高效率子元素可以覆盖从父元素继承的样式通过继承可以减少代码重复，提高属性，通过设置自身属性来实现代码的可维护性和效率CSS的优先级CSS样式优先级优先级排序冲突解决继承影响浏览器在应用样式时，会根从高到低，优先级依次为如果多个样式规则应用于同子元素可以继承父元素的样据不同的优先级规则来选择重要性声明，内联样式，一个元素，则具有最高优先式，但可以通过更具体的样ID最终生效的样式选择器，类选择器，标签选级的样式规则会生效式规则覆盖继承的样式择器，通配符选择器的常见应用CSS网页设计可以控制网站的视觉外观，包括字体、颜色、布局和动画CSS移动应用可以用来设计和美化移动应用的用户界面，使其在各种设备上都能呈现最佳效果CSS互动游戏可以创建动画、交互元素，以提升游戏体验，使其更具吸引力CSS。