《css与div介绍》课件

与介绍CSS DIV与是网页设计中常用的技术CSS DIV它们能帮助我们创建美观、结构化的网页的概述CSS样式表是一种用于控制网页样式的语言CSS网页设计可以控制网页的字体、颜色、布局、背景等CSS网页代码与结合使用，可以使网页更加美观、易于阅读和维护CSS HTML的特点CSS可分离性可复用性跨平台性可维护性可以将网页内容和样式分可以将相同的样式应用于可以跨平台使用，适用于可以方便地修改网页的样CSS CSS CSSCSS开，使网页的代码更易于维护多个元素，避免重复编写代码不同的浏览器和设备式，无需修改网页内容和管理网页的样式可以适应各种屏幕修改网页的样式只需修改CSS网页内容和样式分离，使网页一个样式规则可以应用到多个尺寸和设备，确保网页的兼容文件，而不必更改文件HTML的代码更易于阅读，提高了可网页，提高了代码的复用率性，提高了网页的维护效率维护性的基本语法CSS选择器1指定要应用样式的元素属性2描述样式的特性值3指定属性的值语法非常简洁易懂，主要由选择器、属性和值组成选择器用来选择要应用样式的元素，属性描述样式的特性，而值则指定属性的值CSS的三种引入方式CSS内联样式内部样式表12在元素标签中使用在文档的标签内使用HTML styleHTML属性直接添加样式内联样式代码示例特点应用场景内联样式是指直接在标签中使用内联样式代码量少，但缺乏可重用性仅对内联样式适合对单个元素进行快速调整，例HTML style属性来设置样式此方法简单易用，适用于当前元素生效，无法应用于其他元素如更改文本颜色、大小、对齐方式等少量样式调整例如，以下代码设置了段落文本颜色为红色内部样式表样式表位置内部样式表位于文档的标签中，使用HTML```外部样式表独立文件链接引入外部样式表以独立的文件存储，通过标签将外部样式表链link通常以为扩展名接到文档中.css HTML可重用性维护便捷多个页面可以共享同一个外部样修改外部样式表可以同步更新所式表，提高代码效率有使用它的页面的选择器CSS标签选择器类选择器通过标签名选中所有同类标签，通过类名选中多个元素，实现灵实现统一样式活的样式控制选择器ID通过属性选中唯一元素，实现精准的样式定位ID标签选择器针对标签选择所有段落标签选择所有标题标签选择所有使用特定标签的元素，例如例如，选择所有例如，选择所有HTML选择所有标签标签，表示所有网页上的段落文本标签，表示所有网页上的主要标题类选择器类选择器的概念类选择器示例类选择器使用一个点来表示，后面跟着类名，用于选择具有特定例如，类选择器将选择所有具有类属性的元素..red red类的所有元素.red{color:red;}这将把具有类名的所有元素的文本颜色设置为红色“red”选择器ID唯一标识每个选择器只能在页面中使用一次，用于唯一标识元素ID高优先级选择器的优先级高于类选择器和标签选择器ID安全可靠使用选择器可以更好地控制元素样式，避免样式冲突ID组合选择器并集选择器后代选择器多个选择器用逗号隔开，作用于所有匹配的选空格隔开，作用于所有后代元素择器子选择器相邻兄弟选择器大于号隔开，作用于直接子元素加号隔开，作用于紧挨着的前一个兄弟元素层次选择器后代选择器子选择器选择器后代选择器，表示选择选择器子选择器，表示选择A B A B A元素的所有后代元素元素的所有子元素元素A B B相邻兄弟选择器一般兄弟选择器选择器选择器，表示选择元选择器选择器，表示选择元A+BAA~BA素后面紧邻的兄弟元素元素素后面所有兄弟元素元素BB属性选择器属性选择器示例通过元素的属性和值选择元素例如，选择所有具有属性为以下代码示例选择所有具有属性且值为的元素class titleexample的元素，可以使用选择器special[class=special]a[title=example]{color:red;}的盒模型CSS盒模型是网页设计的基础知识之一，它将每个网页元素视为一个矩形盒子，CSS盒子由内容、内边距、边框和外边距组成理解盒模型有助于精确控制页面元素的尺寸、位置和间距，从而打造更加精致、美观的网页布局内边距定义属性作用123内边距是指元素内容区域与边框之间中使用属性来设置内内边距可以用来控制元素内容区域的CSS`padding`的距离它控制元素内容与边框之间边距它可以指定四个方向的内边距尺寸，以及元素内容与边框之间的空的空白区域，也可以单独指定某个方向的内边距白区域边框边框样式边框颜色边框宽度边框样式使用边框属性可以为元素添可以设置边框的颜色，可以使可以使用像素单位（）、百可以设置边框的样式，如实线CSS px加边框，从而改变其外观和视用颜色名称、十六进制颜色值分比（）或其他单位来设置边（）、虚线（）、%solid dashed觉效果或值来指定框宽度点线（）等RGB dotted外边距外边距设置外边距控制间距元素周围的空白区域使用属性设置可以指定不同方向的间距margin的背景属性CSS背景属性可以控制网页元素的背景外观，例如背景颜色、图片CSS、位置和重复方式这些属性可以让网页设计更加丰富和个性化通过设置背景属性，您可以为网页元素创建不同的视觉效果，例如添加背景颜色来突出显示特定区域，或者使用背景图片来增强视觉吸引力背景颜色背景颜色选择使用的属性设置元素的背景颜色CSS background-color颜色值可以使用颜色名称、十六进制颜色码、颜色值和颜色值RGB HSL示例代码background-color:#FF0000;设置红色背景背景图片设置背景图片使用属性设置背景图片`background-image`可以使用图片或作为背景图片的来源URL`data:`URI背景定位背景图像定位方式background-position属性用于控制背景图使用关键词定位、、、background-position top bottom left片在元素中的位置可以使用关键字例如、；使用百分比定位例如right center、、、、百分比或像素代表水平垂直居中；使用像素值topbottomleft right50%50%值来指定位置定位例如代表距离左上角10px20px10px20px背景定位示例可以使用代码设置背景定位，例如表示将背景图CSS background-position:center center;片水平和垂直居中的文本属性CSSCSS提供了丰富的文本属性，可以控制文本的外观和显示方式文本属性可以设置字体的样式、颜色、大小、对齐方式、间距等这些属性可以用于使文本更具可读性、更具吸引力，并更好地融入网页设计通过使用CSS文本属性，可以轻松地自定义文本的外观，使其符合网页的整体风格和设计理念字体字体系列字体大小

1.

2.12例如宋体、黑体、楷体、微软雅黑等可以使用像素（）、百分比（）、等单位px%em字体粗细字体样式

3.

4.34可以使用、、等值来控制可以使用、、等值来控制normal boldlighter normalitalic oblique文本颜色设置文本颜色常见颜色值应用文本颜色使用属性来设置文本颜色可以使例如，，，，例如会将所有段落文字`color``red``blue``green``#FF0000``p{color:red;}`用颜色名称或十六进制颜色代码等设置为红色文本对齐左对齐右对齐居中对齐文本内容靠左对齐，在网页中是最常见文本内容靠右对齐，适合一些特殊场景文本内容居中对齐，适用于一些需要突的对齐方式，例如标题的右对齐出显示的文字，例如网站标题的概述DIV通用容器网页布局基础灵活性和可扩展性标签是中的一个通用容器，用于对标签可以用来划分页面区域，并通过标签的灵活性和可扩展性使其成为网页DIV HTMLDIV DIV网页内容进行结构化和布局样式控制其外观和位置设计和布局的强大工具CSS的使用DIV创建页面结构控制布局元素可用于创建网页结构，划分不同区域元素可以通过控制其大小、位置、颜色等属性DIV DIV CSS使用标签可以将网页内容进行分组，并为不同的区域设置样式可以利用元素创建各种布局，例如两栏布局、三栏布局等DIV DIV的布局DIV块级元素1本身就是块级元素，可包含其他元素DIV定位CSS2使用定位属性控制的位置DIV浮动3利用浮动属性实现侧边栏等布局Flexbox4使用布局模型实现更灵活的布局Flexbox布局是指使用标签对网页内容进行排版和结构化本身是一个块级元素，可以包含其他元素，并可以通过定位、浮动和等属性DIV DIVDIVCSSFlexbox进行灵活的布局。