4CSS技术
第6章Div标签与CSS样式表(4)-CSS语法
CSS是一种用来装饰HTML的标记集合。
CSS优点
❖ 其优点包括：
▪ 1：表现和内容相分离 将设计部分剥离出来放在一个独立样式文
件中，HTML文件中只存放文本信息。这样的页 面对搜索引擎更加友好。
▪ 2：简化了网页的格式代码，外部的样式表还会 被浏览器保存在缓存里，加快了下载显示的速 度，也减少了需要上传的代码数量 。
▪ 3：易于维护和改版 只要修改保存着网站格式的CSS样式表文件
就可以改变整个站点的风格特色。
❖ 级联样式表（CSS）里用到的许多CSS属性都与HTML 属性用法相似。
❖ 例：要用红色作为网页的背景色：
❖ 用HTML表达：
❖
<body bgcolor=“#FF0000”>
❖ 用CSS表达：
❖ body {background-color:#FF0000;}
❖ 常用的HTML标记： ❖ body ❖p ❖ table ❖ tr ❖ h1等
1.2 类别选择符
类别名称 .class 类别选择器
声明
声明
color: green;
font-size: 20px;
属性
值
属性
值
图2 类别选择器
class选择符-类选择符
❖ class选择符：在一个文档中可以为不同类型的元素定义相同的类 名，class可以实现把相同样式的元素统一为一类，使用class选择 符时要先为每个元素定义一个class属性：
❖ 通过CSS选择符来指定此HTML标签使用此CSS样式。 ❖ 选择符语法：一个CSS选择符就定义了一个样式 ❖ 选择符名称 ❖{ ❖ 声明 ; ❖}
实训4 div+css综合运用
实训4 div+css综合运用一、背景介绍在Web开发领域，div和css是两个基础、重要的概念。
div是HTML中的一个标签，用来划分网页的结构和布局；而css是一种样式表语言，用于描述HTML文档的呈现方式。
实训4中涉及到了div 和css的综合运用，旨在帮助学习者掌握这两个技术，并且能够灵活运用于实际项目中。
二、整体评估在实训4中，学习者需要通过实际操作，完成一个包含头部、导航、内容区域和底部的网页布局。
这样的任务要求对div和css的综合运用提出了很高的要求，需要考虑到页面的整体结构、样式和布局。
在评估过程中，我发现学习者需要注意以下几点：1. 结构清晰：div标签应该按照页面的结构和布局来合理地进行划分和嵌套，以确保页面结构清晰、层次分明。
2. 样式统一：css样式应该对整个页面起到统一、协调的作用，保证整体的美观和一致性。
3. 响应式布局：在综合运用中，需要考虑到不同设备上的显示效果，保证页面能够适配不同的屏幕尺寸。
4. 创新设计：除了基本的布局要求，学习者还可以通过css的特效和动画等进行创新设计，提升页面的互动性和吸引力。
三、文章撰写在本次实训4中，我们深入学习了div和css的综合运用，从理论到实践，都有了全面的了解和掌握。
通过对div的合理划分和css的样式设置，我们可以轻松实现一个精美、完善的网页布局。
在整个过程中，我对div和css的重要性有了更深的理解。
div作为网页设计中最基础的组件，它的合理划分和嵌套对于页面的结构和布局起着至关重要的作用。
通过div的灵活运用，我们可以将页面分割成不同的模块，从而更好地呈现页面内容，提高用户的浏览体验。
css则是页面样式的设计师，通过设置各种样式属性，我们可以实现页面的美化和个性化定制。
通过css的盒子模型、浮动布局、弹性布局等特性，我们可以完美定制各种不同风格的网页布局。
在综合运用的过程中，我深刻体会到了对div和css的熟练掌握意味着更自由地实现网页设计的愿景。
CSS与DIV构建网站(4)布局与定位
table-caption : 将对象作为表格标题显示
table-cell : 将对象作为表格单元格显示
table-column : 将对象作为表格列显示
table-column-group : 将对象作为表格列组显示
table-header-group : 将对象作为表格标题组显示
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
（12）设置对象是否及如何显示
格式：display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
可以单独设置对象各边的内部边距：padding-top（上边）、padding-bottom（下边）、padding-left（左边）、padding-right（右边）。格式参数同padding。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
【详解】提示框（tooltip）的使用-bootStrap4常用CSS笔记
【详解】提⽰框（tooltip）的使⽤-bootStrap4常⽤CSS笔记tooltip (提⽰框) 是⼀个⼩⼩的弹窗，在⿏标移动到元素上显⽰，⿏标移到元素外就消失。
属性常⽤的功能，可以通过以下属性来设置：data-toggle = "tooltip"指明这是⼀个tooltip组件对象，其实可以省略title = "这⾥设置展⽰的⽂字"提⽰框显⽰的内容。
data-trigger = "{click | hover | focus | manual}"触发提⽰框的⽅式：1、click 【默认】单击时显⽰或关闭2、hover 移上去显⽰，移出去隐藏3、focus 单击时显⽰，点击空⽩处时隐藏4、manual ⼿动模式。
需要调⽤js代码触发显⽰或关闭提⽰框data-html = "{false | true}"设置提⽰框内容是否⽀持HTML格式。
默认值:false当值为true时，title属性值可以设置成html代码。
不过建议不要这么设置，以防XSS攻击data-delay = "{数值}"设置提⽰框延迟显⽰。
⽐如 data-delay = "1000" 时，提⽰框会在执⾏后1秒才显⽰。
默认值：0 data-animation = {true | false}是否动画效果显⽰提⽰框。
默认值：false不显⽰动画效果。
data-container = {string | false}默认值false，当提⽰框⽤于按钮组、表单或表格时，必须指定选项容器：'body'以避免不必要的副作⽤，（例如当触发弹出窗⼝时元素变宽和/或失去圆⾓）。
data-container = "body"data-placement = {left | top | right | bottom | auto}设置提⽰框的显⽰位置，⽀持多种设置，⽐如data-placement="auto left"时，提⽰窗尽可能显⽰在左边,在情况不允许的情况下它才显⽰在右边简单的提⽰框HTML代码⽰例：1<a href="#" id="text" data-toggle="tooltip" title="这是⼀段显⽰的⽂字" data-placement="right" data-trigger="hover">右边显⽰内容</a>2<script>3 $(function(){4 $('[data-toggle="tooltip"]').tooltip(); // 也可以使⽤ $('#text').tooltip(); 来启⽤弹窗5 });6</script>⽀持HTML格式的提⽰框⽰例：1<a href="#" id="text" data-toggle="tooltip" title="<h1>bootStrap4学习之路</h1><p>漫漫长路，吾将上下求索之！</p>" data-html="true" data-placement="bottom" data-trigger="hover">显⽰HTML样式提⽰窗</a> 23<script>4 $(function(){5 $('[data-toggle="tooltip"]').tooltip(); // 也可以使⽤ ('#text').tooltip(); 来启⽤提⽰框6 });7</script>⽅法还可以通过tooltip的option设置来实现更多功能，tooltip函数原型：1 $obj.tooltip({2 title: '', // 提⽰框显⽰的⽂本内容。
CSS的4种引入方式及优先级
CSS的4种引⼊⽅式及优先级第⼀：CSS的4种引⼊⽅式CSS的4种引⼊⽅式是：⾏内样式、内嵌样式、链接样式、导⼊样式1.⾏内样式最直接最简单的⼀种，直接对HTML标签使⽤style=""，例如：<p style="color:#F00; "></p>缺点：HTML页⾯不纯净，⽂件体积⼤，不利于蜘蛛爬⾏，后期维护不⽅便。
2.内嵌样式内嵌样式就是将CSS代码写在<head></head>之间，并且⽤<style></style>进⾏声明，例如：<style type="text/css">body,div,a,img,p{margin:0; padding:0;}</style>优缺点：页⾯使⽤公共CSS代码，也是每个页⾯都要定义的，如果⼀个⽹站有很多页⾯，每个⽂件都会变⼤，后期维护难度也⼤，如果⽂件很少，CSS代码也不多，这种样式还是很不错的。
3.链接样式链接样式是使⽤频率最⾼，最实⽤的样式，只需要在<head></head>之间加上<link…/>就可以了，如下：<link type="text/css" rel="stylesheet" href="style.css" />优缺点：实现了页⾯框架代码与表现CSS代码的完全分离，使得前期制作和后期维护都⼗分⽅便4.导⼊样式（不建议使⽤）导⼊样式和链接样式⽐较相似，采⽤@import样式导⼊CSS样式表，在HTML初始化时，会被导⼊到HTML或者CSS⽂件中，成为⽂件的⼀部分，类似第⼆种内嵌样式。
@import在html中使⽤，如下：<style type="text/css">@import url(style.css);</style>@import在CSS中使⽤，如下：@import url(style.css);第⼆：四种CSS引⼊⽅式的优先级1.就近原则2.理论上：⾏内>内嵌>链接>导⼊3.实际上：内嵌、链接、导⼊在同⼀个⽂件头部，谁离相应的代码近，谁的优先级⾼。
下拉、上拉菜单-bootStrap4常用CSS笔记
下拉、上拉菜单-bootStrap4常⽤CSS笔记菜单触发样式.dropdown-toggle下拉基类，定义⼀个触发下拉的元素。
要和data-toggle="dropdown"属性结合使⽤.dropdown-toggle-split菜单分割线，作⽤未知菜单列表样式.dropdown-menu定义⼀个下拉菜单容器.dropdown-menu-right下拉菜单容器右对齐。
默认是左对齐.dropdown-header下拉菜单标题.dropdown-item下拉菜单列表项⽬.dropdown-divider在下拉菜单中创建⼀个⽔平的分割线.active启⽤指定下拉菜单列表项⽬.disabled禁⽤指定下拉菜单列表项⽬下拉、上拉菜单需要引⼊jquery版本不低于3.2，且还要引⼊popper.min.js⽂件，两个⽂件的CDN引⽤如下：<script src="https:///jquery/3.2.1/jquery.min.js"></script><script src="https:///popper.js/1.12.5/umd/popper.min.js"></script>下拉菜单⽰例：1<div class="container">2<div class="wrapper">3<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">点我下拉</a>4<div class="dropdown-menu dropdown-menu-right">5<div class="dropdown-header">产品⼤类</div>6<a href="#" class="dropdown-item">菜单⼀</a>7<a href="#" class="dropdown-item">菜单⼆</a>8<div class="dropdown-divider"></div>9<a href="#" class="dropdown-item">菜单三</a>10<a href="#" class="dropdown-item">菜单四</a>11</div>12</div>13</div>按钮下拉⽰例：1<div class="container">2<div class="wrapper">3点击按钮，下拉菜单：<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">点我</button>4<!-- 定义下拉菜单 -->5<div class="dropdown-menu">6<a href="#" class="dropdown-item">a菜单⼀</a>7<a href="#" class="dropdown-item">b菜单⼆</a>8<div class="dropdown-divider"></div>9<a href="#" class="dropdown-item">c菜单三</a>10<a href="#" class="dropdown-item">d菜单四</a>11</div>12</div>13</div>按钮组下拉⽰例：<div class="container"><div class="btn-group"><button class="btn btn-primary">请选择</button><button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><!-- 定义下拉菜单 --><div class="dropdown-menu"><a href="#" class="dropdown-item">a菜单⼀</a><a href="#" class="dropdown-item">b菜单⼆</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">c菜单三</a><a href="#" class="dropdown-item">d菜单四</a></div></div></div>上拉菜单⽤法和下拉相同，只要将下拉菜单包含在⼀个类名为: dropup 的容器内就可以实现上拉菜单功能。
网页设计与制作 单元4 CSS3样式-任务4.1
任务4.1 定义CSS3基础样式
行内样式表的语法格式通常为： <selector style= "property: value; …">…</selector> 由于行内样式表需要为每一个标签设置style属性，后期维护工 作量大、成本高，而且HTML代码繁杂，并未真正实现内容与形式的 分离。因此，对于需要使用CSS样式规则较多的网页，不建议使用行 内样式。
例如：
p{ font-size:12px; color:red; }
/* 设 置 p 标 签 大 小 为
12px，字体为红色*/
div{ width:300px;height:240px; border:1px;} /* 设 置
div标签宽度为300px，高度为240px，边框粗细为1px */
使用标签选择器，网页中所有相关标签将使用所定义的样式。
任务4.1 定义CSS3基础样式
4.1.1 CSS3简介 CSS（Cascading Style Sheets），又称层叠样式表或级联样 式表，是用于控制或增强网页外观样式，并且可以与网页内容相分离 的一种标记性语言。使用CSS样式表，可以使网页更小、下载速度更 快，更新和维护网页更加方便，因此CSS样式表在网页设计中得到广 泛应用。 早期，网页一般用于传递信息，HTML用于描述网页结构和内容。 随着Web的流行与发展，网页外观得到重视。网页制作的越来越复杂， HTML代码变得越来越繁杂，大量的标签堆积起来，难以阅读和理解。
任务4.1 定义CSS3基础样式
CSS设计器分为两种模式： -全部：显示并编辑CSS样式表中的多个规则。 -当前：在CSS样式表中编辑单个规则。 在 CSS设计器界面中可以使用以下内容： -来源：与项目相关的 CSS 文件的集合； -@Media：用于控制屏幕大小的媒体查询； -选择器：与 @Media 面板中所选媒体查询相关的选择器； -属性：与所选的选择器相关的属性，提供仅显示已设置属性的 选项。
css select option 间距
css select option 间距摘要：1.CSS选择器简介2.常见CSS选择器类型3.创建自定义选择器4.应用案例：间距调整5.总结与拓展正文：在日常的网页开发中，CSS选择器（简称选择器）是一种非常实用的技术，它可以让我们更轻松地管理和调整网页元素的样式。
本文将介绍CSS选择器的相关知识，并通过案例演示如何使用CSS选择器调整选项间距。
1.CSS选择器简介CSS选择器是一种用于选择网页元素并为其应用样式的技术。
通过使用各种类型的CSS选择器，我们可以更精确地定位到需要的元素，从而实现个性化styling。
2.常见CSS选择器类型常见的CSS选择器类型包括：- 标签选择器：通过HTML标签名称进行选择- 类选择器：通过HTML元素的`class`属性值进行选择- ID选择器：通过HTML元素的`id`属性值进行选择- 属性选择器：通过HTML元素的特定属性及其值进行选择- 伪类选择器：通过元素的特定状态进行选择（如：悬停、聚焦、激活等）3.创建自定义选择器我们可以通过组合以上常见类型的选择器，创建出更复杂、更具针对性的自定义选择器。
例如，我们可以通过`标签选择器+ 类选择器`的方式，针对特定类型的元素应用样式：```css/* 示例*/.class-name {color: red;font-size: 16px;}```4.应用案例：间距调整下面我们通过一个实际案例，演示如何使用CSS选择器调整选项间距。
假设我们有如下HTML结构：```html<select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select>```我们可以使用如下CSS代码，调整选项之间的间距：```css/* 设置选项的默认样式*/option {padding: 5px;margin-bottom: 5px;}/* 设置奇数选项的样式*/option:nth-child(odd) {background-color: #f0f0f0;}/* 设置偶数选项的样式*/option:nth-child(even) {background-color: #ffffff;}```5.总结与拓展本文介绍了CSS选择器的基本概念和常见类型，并通过实际案例演示了如何使用CSS选择器调整选项间距。
第4章CSS样式表
图4.2 “链接外部样式表”对话 框
图4.3 “新建CSS样式”对话框
“编辑样式表”按钮：打开如图4.4所示的“编辑样式表”对话 框，编辑当前文档或外部样式表中的任何样式。 “删除CSS样式”按钮：删除“CSS样式”面板中的所选CSS样 式，并删除该样式应用于任何元素中的格式设置。
图4.4 “编辑样式表”对话框 本书将以第4章的“本章实例”目录下的“样本原文.html”为例，对 以上几个操作进行讲解。
CSS（层叠样式表）其实是一系列格式规则，这些规则由两部分组 成：选择符和声明。选择符通常是指样式表的名称或特定的标 签，而声明则用于定义样式元素。声明由两部分组成：属性和 值。要注意的是，单一选择符的复合样式声明应该用分号隔开。 术语“层叠”是指同一个网页应用多个样式表的能力，例如创 建两个样式表分别用来设置字体和行距，它们同样用于一个网 页。这些规则组合在一起，就可以告诉浏览器怎样去呈现一个 文档。 CSS样式表起初或许只为了控制文本的属性，如字体、字号、颜色 等，但是随着CSS更高版本的推出，弥补了HTML对传统的文本 属性控制的不足，如段落间距、行距等。除了对传统文本的控 制，CSS还加入了对其他网页元素属性甚至网页布局的控制， 比如图片的显示效果、网页元素的位置、表单元素的边框粗细、 鼠标指针的形状、排版定位等，并且这些设置都可以随着CSS 样式表文件的更新而动态更新。
2.重定义特定标签格式 重定义特定标签格式
使用这种CSS样式可以改变HTML标记的原意，从而使所有应用了这 些标记的HTML文本按照CSS的定义格式显示，例如为<body>和 </body>标签定义了CSS，那么所有包含在<body>和</body> 标签内的内容都要按照此CSS样式进行显示，代码如下： Body｛font-size: 10pt;｝ ｛ ｝ 本例将<body>和</body>标签内的所有文本字体都设置为10像素 大小。
CSS4
CSS常用属性
• CSS margin 属性 围绕在元素边框的空白区域是外边距。 设置外边距会在元素外创建额外的“空 白”。
设置外边距就是使用 margin 属性，这个 属性接受任何长度单位、百分数值甚至负 值。
CSS常用属性
• 值复制 如果为外边距指定了 3 个值，则第 4 个 值（即左外边距）会从第 2 个值（右外边 距）复制得到。
CSS常用属性
如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从 第 1 个值（上外边距）复制得到。
最后一个情况，如果只给定一个值，那 么其他 3 个外边距都由这个值（上外边距） 复制得到。
CSS列表
• list-style-position 设置列表中列表项标志的位置。值如下：
inside：列表项目标记放置在文本以内，且环 绕文本根据标记对齐。
outside:默认值。保持标记位于文本的左侧。 列表项目标记放置在文本以外，且环绕文本 不根据标记对齐。
CSS列表
list-style 简写属性在一个声明中设置所有 的列表属性。 可以按顺序设置如下属性： list-style-type list-style-position list-style-image 可以不设置其中的某个值，未比较
DIV+CSS布局比Table布局节省页面代码， 代码结构更清晰。 DIV+CSS开发速度要比Table快，布局更精 确。 DIV+CSS布局比Table更节约所占空间和站 点流量。
网页基本设计原则
使用DIV元素来制作网页的设计布局，定位。 使用Table来显示页面中需要展示的数据。 Table与DIV可以互相嵌套。
CSS常用属性
实验四DivCSS网页布局
实验四 Div+CSS网页布局一、站点规划在网页制作中，有许多的术语，例如： HTML、CSS、DIV等等。
下面我们就开始一步一步使用DIV+CSS 进行网页布局设计吧。
所有的设计第一步就是构思，构思好了，一般来说还需要制作的界面布局简单的构画出来。
下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：│body {}/*这是一个HTML元素，具体我就不说明了*/└#Container {}/*页面层容器*/├#Header {}/*页面头部*/├#PageBody {}/*页面主体*/│├#Sidebar {}/*侧边栏*/│└#MainBody {}/*主体内容*/└#Footer {}/*页面底部*/至此，页面布局及规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
接下来我们在桌面新建一个文件夹，命名为“DIV+CSS页面布局”，在文件夹下新建两个空的记事本文档，输入以下内容：这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。
下面，我们在<body></body>标签对中写入DIV的基本结构，代码如下：为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的布局了。
关于以上CSS的说明：1、请养成良好的注释习惯，这是非常重要的；2、body是一个HTML元素，页面中所有的内容都应该写在这标签对之内，我就不多说了；3、讲解一些常用的CSS代码的含义：font:12px Tahoma；这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma；说明字体为12像素大小，字体为Tahoma格式；margin:0px；也使用了缩写，完整的应该是：margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px或margin:0px 0px 0px 0px顺序是上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，另外还有以下几种写法：margin:0px auto；说明上下边距为0px，左右为自动调整；我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的，只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。
第4章 使CSS格式化XML
第4章使用CSS格式化XML由前面的知识知道，在XML中，XML不能为一个特定的元素预定义显示属性。
因此，它需要一个分离的样式表来描述一个XML如何才能被显示。
XML的内容和表述的分离允许XML的内容能很容易被重新安排。
Microsoft Internet Explorer 支持使用CSS或者XSL书写的样式表。
在本章中，将详细介绍如何使用Dreamweaver 4创建层叠样式表单的基本要素，主要包括CSS的基本概念、CSS属性、格式化模型以及CSS单位等一些基本的内容。
4.1 CSS开始文档在本节中，将通过具体的实例来阐述在XML中如何使用CSS来表现XML的基本知识，有关更深入的知识将在后面几节中介绍。
对于将诸如粗体和斜体等样式应用于特定的XML元素来说，CSS是一种简单、易懂的语言。
任何常用的字处理软件都具有CSS支持的大多数样式。
例如，可选择字体、字体的粗细、字号、背景颜色、各种元素的间距、元素周围的边框等。
但是，所有的样式信息并不在文档之内存储，而是放置在一种称为样式表的独立文件中。
仅仅改变样式表就可以以多种不同方式格式化一个XML文档。
不同的样式单可用于不同的目的，并且无需改变文档中的任何内容。
以上功能在Dreamweaver 4中很容易实现，Dreamweaver 4不但可以创建任意复杂的CSS样式表，还可以将该样式表导出为一个独立的样式表文件。
4.1.1 Style Sheets简介层叠样式表（Cascading Style Sheets，以下简称CSS）是1996年作为把有关样式属性信息，如字体和边框加到HTML文档中的标准方法而提出来的。
但是，CSS与XML 结合的确比与HTML结合得更好，因为HTML承担着CSS标志和HTML标志之间向后兼容的任务。
例如，要正确地支持CSS的nowrap属性就不能使用HTML中非标准的但又是经常使用的NOWRAP元素。
由于XML元素没有任何预定义的格式规定，所以不会限制何种CSS样式只能用于何种元素。
Dreamweaver英语代码详解
Decoration：在文本中添加underline（下划线）、overline（上划线）、line-through（中划线）、blink（闪烁效果）。这些效果可以同时存在，将效果前的复选框选定即可。相对应的CSS属性是”text-decoration”。
注意：链接的默认设置是Underline，我们可以通过选none去除下划线。Blink（闪烁效果）只在NC浏览器里可以看到。 Weight：给字体指定粗体字的磅值。Normal等同于400；Bold等同于700。设粗体字一般用bold。相对应的CSS属性是”font-weight”。 Variant：允许你选取字体的变种，选small-caps（小型大写字母）时，此样式区域内所有字母大写。相对应的CSS属性是，或者令单词全部大写或全部小写。参数：capitalize（单词首字母大写）、uppercase（转换成大写）、lowercase（转换成小写）、none（不转换）。相对应的CSS属性是” text-transform”。 Color：定义文字颜色。相对应的CSS属性是” color”。 注意：CSS中颜色的值有三种表示方法： l #RRGGBB格式，是由红绿蓝三种颜色的值组合，每种颜色的值为“00 – FF”的两位十六进制正整数。例如：#FF0000表示红色，#FFFF00表示黄色。 l rgb(R,G,B)格式，RGB为三色的值，取0~255，例如：rgb(255,0,0)表示红色，rgb(255,255,0)表示黄色。 l 用颜色名称。CSS可以使用已经定义好的颜色名称。例如：red表示红色，yellow表示黄色。 2. Background（背景） Background面板主要是对元素的背景进行设置，包括背景颜色、背景图象、背景图象的控制。一般是对BODY（页面）、TABLE（表格）、DIV（区域）的设置。 Background Color：设置元素的背景色。相对应的CSS属性是”background-color”。 Background Image：设置元素的背景图像。相对应的CSS属性是”background-image”。 Repeat：确定背景图像是否以及如何重复。No Repeat：在元素的开头显示一遍图像。Repeat：在元素的背景部分水平和垂直方向平铺图像。Repeat-x and Repeat-y：分别在水平和垂直方向重复显示，默认为Repeat。相对应的CSS属性是”background-repeat”。 注意：如果定义的元素的BODY，可以控制页面背景是否重复。 Attachment：固定背景图像或者跟随内容滚动。参数fixed表示固定背景，scroll表示跟随内容滚动的背景。相对应的CSS属性是”background-attachment”。注意：如果定义的元素的BODY，可以使页面背景固定。
web前端开发技术第4版实验11
实验11：使用CSS实现响应式布局随着移动设备的普及，用户对网页的响应式布局要求也越来越高。
在本实验中，我们将学习如何使用CSS实现响应式布局，使网页能够在不同设备上自适应地显示。
1. 弹性布局在响应式布局中，弹性布局是一种常用的布局方式。
它可以让网页元素根据浏览器窗口的大小自动调整布局。
我们可以使用CSS3的弹性盒子（Flexbox）布局来实现弹性布局。
通过设置元素的flex属性和flex-direction属性，我们可以轻松地实现各种布局效果。
2. 媒体查询媒体查询是CSS3提供的一种机制，它可以根据设备的特性（如屏幕尺寸、分辨率等）来加载不同的样式表，从而实现响应式布局。
我们可以使用media规则来编写针对不同设备的样式，并在样式表中引入不同的媒体查询，使网页能够适应不同的设备。
3. 流式布局流式布局是一种根据浏览器窗口大小自动调整布局的方式。
通过设置元素的百分比宽度和最大宽度，我们可以实现流式布局。
这样可以使网页在不同设备上都能够自动调整布局，从而提供更好的用户体验。
4. 图片响应式布局在响应式布局中，图片的大小也需要根据设备的大小来自动调整。
我们可以使用max-width属性来设置图片的最大宽度，从而保证图片在不同设备上都能够自适应地显示。
还可以使用srcset属性来为不同的设备加载不同尺寸的图片，以提高网页的加载速度和显示效果。
5. 响应式导航菜单在响应式布局中，导航菜单的样式也需要随着设备的大小而改变。
我们可以使用媒体查询和Flexbox布局来实现响应式导航菜单。
通过设置菜单项的排列方式和显示方式，我们可以在不同设备上实现不同的导航菜单效果，从而提高网页的易用性和用户体验。
6. 实验目标本次实验的目标是学习使用CSS实现响应式布局的基本技术，掌握弹性布局、媒体查询、流式布局、图片响应式布局和响应式导航菜单等方面的知识和技能。
通过完成本实验，我们将能够设计和开发出更符合用户需求的响应式网页，提升全球信息站的可访问性和用户体验。
导航栏（navbar）-bootStrap4常用CSS笔记
导航栏（navbar）-bootStrap4常⽤CSS笔记导航栏：navbar导航栏容器可以包含以下⼏个常⽤组成：1、品牌LOGO（.navbar-brand ）2、导航菜单（.navbar-nav）3、导航⽂本（.navbar-text）4、折叠导航按钮（.navbar-toggle）5、表单（.form-inline）⼀、导航容器⼀般使⽤nav标签来定义：<nav class="navbar">...</nav>导航容器可⽤样式：.navbar导航栏基础样式.navbar-expand-{sm | md | xl | lg}响应式导航，⼤屏幕⽔平铺开，⼩屏幕垂直堆叠.flex-top导航栏⼀直在顶部.flex-bottom导航栏⼀直在顶部.bg-{primary | secondary | success | info | danger | warning | dark | light}导航栏的背景颜⾊.navbar-dark导航配⾊⽅案。
深⾊背景，加此样式可以突显⽂字.navbar-light导航配⾊⽅案。
浅⾊背景，加此样式可突显⽂字⼆、导航菜单⼀般使⽤ul、li来定义：1<nav class="navbar navbar-expand-md bg-light nav-light">2<ul class="navbar-nav">3<li class="nav-item active"><a href="#" class="nav-link ">菜单⼀</a></li>4<li class="nav-item"><a href="#" class="nav-link">菜单⼆</a></li>5<li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>6</ul>7</nav>导航菜单可⽤样式：.navbar-nav应⽤于ul标签.nav-item 、 .active应⽤于li标签.nav-link 、 .disabled应⽤于a标签三、导航栏中加品牌元素（.navbar-brand）:1<nav class="navbar navbar-expand-md bg-dark navbar-dark">2<!-- 品牌 -->3<a href="#" class="navbar-brand">品牌LOGO</a>45<!-- 菜单 -->6<ul class="navbar-nav">7<li class="nav-item active"><a href="#" class="nav-link">菜单⼀</a></li>8<li class="nav-item"><a href="#" class="nav-link">菜单⼆</a></li>9<li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>10</ul>11</nav>品牌可以是⽂字，也可以是图⽚。
CSS实现等分布局的4种方式
CSS实现等分布局的4种⽅式思路⼀: float缺点:结构和样式存在耦合性，IE7-浏览器下对宽度百分⽐取值存在四舍五⼊的误差【1】float + padding + background-clip使⽤padding来实现⼦元素之间的间距，使⽤background-clip使⼦元素padding部分不显⽰背景float:left; + padding-right:20px; + background-clip:content-box; + box-sizing:border-box;【2】float + margin + calc使⽤margin实现⼦元素之间的间距，使⽤calc()函数计算⼦元素的宽度width: calc(25% - 20px);**注意：calc使⽤时运算符两边有空格float:left; + margin-right:20px; + width:calc(25% - 20px);【3】float + margin + (fix)通过在⼦元素中增加结构，为添加结构设置margin实现等分布局间距思路⼆: inline-block缺点：需要设置垂直对齐⽅式vertical-align，则需要处理换⾏符解析成空格的间隙问题。
IE7-浏览器不⽀持给块级元素设置inline-block属性，兼容代码是display:inline;zoom:1;font-size: 0; ⽤来处理换⾏符解析成空格的间隙问题；相当于思路⼀的float换成⼦元素中的inline-block + vertical-align:top;要在⽗元素中添加font-size: 0;【1】inline-block + padding + background-clip【2】inline-block + margin + calc【3】inline-block + margin + (fix)思路三: table缺点：元素被设置为table后，内容撑开宽度。
VueCli4引用tailwindcss
cnpm install tailwindcss
搞事情
找到我们的Vle.exports = {
css: { loaderOptions: { postcss: { plugins: [ require('tailwindcss'), require('autoprefixer') ] } }
创建tailwind.config.js
除了运行下面的shell外,还可以自己手动创建
npx tailwind init
后记
本篇随笔借鉴于 但是由于无法复制,所以我这里就重新搞了一遍.谢谢这位大佬.感谢无私奉献的人.有你更精彩....
mainjs部分代码加入这一行tailwindcsstailwindcss不需要创建使我们安装包后在nodemoduls下自动生成的importtailwindcsstailwindcss
前言
VueCli4引用 tailwindcss
是我写前端很喜欢的一个css样式模块 本人按照官网的教程没成功过.所以自己特意来写一篇关于TailwindCss的随笔. 如果误区,请评论指出,谢谢您的支持!
} }
找到我们的main.js,导入我们的tailwindcss
// main.js 部分代码 // 加入这一行 // tailwindcss/tailwind.css 不需要创建,使我们安装包后在node_moduls下自动生成的 import 'tailwindcss/tailwind.css';
CSS实现等分布局的4种方式
CSS实现等分布局的4种⽅式等分布局是指⼦元素平均分配⽗元素宽度的布局⽅式，本⽂将介绍实现等分布局的4种⽅式思路⼀: float缺点:结构和样式存在耦合性，IE7-浏览器下对宽度百分⽐取值存在四舍五⼊的误差【1】float + padding + background-clip使⽤padding来实现⼦元素之间的间距，使⽤background-clip使⼦元素padding部分不显⽰背景CSS Code复制内容到剪贴板【2】float + margin + calc使⽤margin实现⼦元素之间的间距，使⽤calc()函数计算⼦元素的宽度CSS Code复制内容到剪贴板【3】float + margin + (fix)使⽤margin实现⼦元素之间的间距，通过增加结构来实现兼容CSS Code复制内容到剪贴板思路⼆: inline-block缺点：需要设置垂直对齐⽅式vertical-align，则需要处理换⾏符解析成空格的间隙问题。
IE7-浏览器不⽀持给块级元素设置inline-block属性，兼容代码是display:inline;zoom:1;【1】inline-block + padding + background-clipCSS Code复制内容到剪贴板【2】inline-block + margin + calc CSS Code复制内容到剪贴板【3】inline-block + margin + (fix) CSS Code复制内容到剪贴板思路三: table缺点：元素被设置为table后，内容撑开宽度。
若要兼容IE7-浏览器，需要改为结构。
table-cell元素⽆法设置margin，设置padding及background-clip也不可⾏【1】table + margin负值CSS Code复制内容到剪贴板思路四: flexCSS Code复制内容到剪贴板以上就是本⽂的全部内容，希望对⼤家的学习有所帮助。