--这里是注释的文字--> 2、外部式css样式，写在单独的一个文件中 注解： 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名...="text/css" /> 注意： 1、css样式文件名称以有意义的英文字母命名，如 main.css。...3、类选择器、ID选择器 注解： 1）、类选择器 类选择器在css样式编码中是最常用到的，如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。...实际上，块状元素都会以行的形式占据位置。 ②、内联元素都会在所处的包含元素内从左到右水平分布显示。...因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。... 这时 p 段落中的文本会显示的red红色。 注意：!important要写在分号的前面 这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。...div{border-bottom:1px solid red;} 只设置下边框 高度和宽度： css定义的宽（width）和高（height），指的是填充以里的内容范围。...块级元素都会在所处的包含元素自上而下按顺序垂直延伸分布，因为在默认情况下，块状元素的宽度都是100%，实际上，块级元素都会以行的形式占据位置。 2. ...显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。 （1）CSS伪类 :link -> 该伪类将应用于未被访问过的链接，IE6不兼容。一般不用此伪类，直接使用a标签。 ...:active -> 该伪类将应用于被激活的元素，例如被点击的链接、被按下的按钮登等。 :visited -> 该伪类将应用于已经被访问过的链接。 ...常见的块元素有：h1,h6,p,div,ul,ol,li等，其中div标记是最典型的块元素。...（3）常用标签嵌套 ①内联元素不能包含块元素，它只能包含其他的内联元素 例如：span>div -> 错误 div>div>ul>li>div -> 错误 ②有些块级元素不能放其他块级元素...这种方式固然可以实现圆角背景的效果，但是，如果以后增加或减少列表项中的文字，就需要重新对li定义背景图像，以适应文本内容的多少。
它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。 （1）CSS伪类 :link -> 该伪类将应用于未被访问过的链接，IE6不兼容。一般不用此伪类，直接使用a标签。 ...:active -> 该伪类将应用于被激活的元素，例如被点击的链接、被按下的按钮登等。 :visited -> 该伪类将应用于已经被访问过的链接。 ...:focus -> 该伪类将应用于拥有键盘输入焦点的元素。 ...常见的块元素有：h1,h6,p,div,ul,ol,li等，其中div标记是最典型的块元素。...这种方式固然可以实现圆角背景的效果，但是，如果以后增加或减少列表项中的文字，就需要重新对li定义背景图像，以适应文本内容的多少。
---- CSS如何影响HTML Web浏览器将CSS规则应用于文档以影响它们的显示方式。一个CSS规则由以下组成： 一组 属性 ，属性的值更新了 HTML 的内容的显示方式。...CSS声明会被放置在一个CSS声明块中。最后，CSS声明块与选择器相结合形成一个CSS规则集（或CSS规则） CSS声明 CSS 的属性和属性值都是区分大小写的。...多重选择器（Multiple selectors）： 这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面， 以将一组声明应用于由这些选择器选择的所有元素。...同样值得一提的是，文档中的多个元素可以具有相同的类名，而单个元素可以有多个类名(以空格分开多个类名的形式书写)。...1）伪类 一个 CSS 伪类（pseudo-class） 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类
描述：在 HTML 中首先会使用 CSS 来对元素进行定位，我们将学习如何使用 CSS 来控制和定位网页元素的位置、大小和布局。...块级元素（block-level elements）：块级元素以块的形式显示在页面上，它们会独占一行，宽度默认是 100%。...常见的块级元素有div、p、h1-h6、ol、ul、li、table、form、address、blockquote等。 块级元素可以设置宽度、高度、内外边距等属性，可以包含其他块级元素和内联元素。...内联块状元素（inline-block elements）：内联块状元素结合了块级元素和内联元素的特性，可以设置宽度、高度、内外边距等属性，同时以行的形式显示在页面上。... 总结: display 属性可以改变盒子的外部显示类型是块级还是内联，这将会改变它与布局中的其他元素的显示方式。
子选择器， .span>li{}，作用于父元素span类下一层的li标签。 包含选择器，.span li{}，作用于父元素span下所有li标签。...在html中、 、、、 和 就是块级元素。设置display:block就是将元素显示为块级元素。...实际上，块状元素都会以行的形式占据位置 ---- 流动模型（二） 第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。...ul-li无序标签 ol-li有序标签 在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个标签中，这个标签的作用就相当于一个容器。...实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。 第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。
，类选择器具有差异化选择的优点,开发中最常用 差异化选择：可以单独所有同一种标签中一个或者多个标签 手动调用 ps:类选择器名称要英文，有意义， 类选择器命名英文大全 css中以“.类名”来定义类选择器...P70.ID选择器 手动调用 css中以“#id名”来定义 html中以 id=‘’id名‘’ 来设置 css: #pink { color:...元素显示模式的分类 元素显示模式的转换 一.元素显示模式的定义和分类 1.定义 定义:元素(标签)显示的方式 html元素类型分类:块元素和行内元素 2.分类 a.块元素 块元素:比如div...特殊的:块元素-p和h这种内部只能放文本的块元素中不能再放块元素....块元素-div 块元素-h 块元素-p 块元素-ol 块元素-li 错误示范:
ul-li 列表信息，以圆点显示 信息1 信息2 ...... ...嵌入式 较通用的一类，CSS样式放置在标签中，而通常要放置在内 ...外部式 把CSS代码写到一个单独的外部文件中，以.css扩展名结尾，在内使用标签引入，如： <link href="base.<em>css</em>" rel...CSS 伪类选择符 伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色 a:hover{color...因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”） 2. em 假定 font-size设定 14px，那么 1em=14px 3.
我们不要着急先来总结一下他们的相同点和不同点： 相同点：可以应用于任何元素不同点： 1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。...比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。...:#666} 7-3 文字排版--粗体 我们还可以使用css样式来改变文字的样式：粗体、斜体、下划线、删除线，可以使用下面代码实现设置文字以粗体样式显示出来。...7-4 文字排版--斜体 以下代码可以实现文字以斜体样式在浏览器中显示： p a{font-style:italic;}三年级时，我还是一个胆小如鼠的小女孩。...在html中、 、、、 和 就是块级元素。设置display:block 就是将元素显示为块级元素。
如果你这个css样式是定义在某个html网页中的话，那其他网页是无法使用的，但可以把 把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在...外部式css样式，写在单独的一个文件中 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在标签内...(引自CSS2.0手册) 类选择器 类选择器在css样式编码中是最常用到的，如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。...比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。...一般来说，把各个元素的内边距和外边距 浮动 因为 div 元素是块级元素，独占一行的。如何在一行显示多个 div 元素？显然默认的标准流已经无法满足需求，这就要用到浮动。
2、CSS注释 /*这是注释*/ 三、CSS的几种引入方式 1、行内样式 行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。...7、选择器的优先级 7.1 CSS继承 继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。...4.3 float 在CSS中，任何元素都可以浮动。 浮动元素会生成一个块级框，而不论它本身是何种元素。...关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止； 由于浮动框不在文档的普通流中，所以文档的普通流中的块级框表现得就像浮动框不存在一样。...float: left; } li > a { display: block; /*让链接显示为块级标签*/ padding: 0 15px; /*设置左右各15
选择器的优先级 CSS继承 继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。...在 CSS 中，任何元素都可以浮动。...由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。...relative（相对定位） 相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...float: left; } li > a { display: block; /*让链接显示为块级标签*/ padding: 0 15px; /*设置左右各15
再下面是逐级嵌套的后代节点。 在文档中，根节点是所有其他元素的祖先节点。根节点有一个伪类选择器（:root），可以用来选中它自己。...变量必须在一个声明块内声明，这使用了:root 选择器，因此该变量可以在整个网页使用 */ } CSS入门容易，但精通不易。...学习CSS并不是学习一两个小技巧，而是要理解这门语言的方方面面，并知道如何将其搭配使用。...学习CSS并不是学习一两个小技巧，而是要理解这门语言的方方面面，并知道如何将其搭配使用。...学习CSS并不是学习一两个小技巧，而是要理解这门语言的方方面面，并知道如何将其搭配使用。
最常用的标签。 type属性 text：文本框，单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符 password：密码框，密码字段。该字段中的字符以黑圆显示。...3) 外部样式 外部样式又称为链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标签将样式连接到HTML文档中。 <!...1.2.4 选择器 要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。...1.2.5.2 转换：display HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块标签和行内标签。 块标签：以区域块方式出现。每个块标签独自占据一整行或多整行。...常见的块元素：、、等 行内元素：不必在新的一行开始，同时也不强迫其他元素在新的一行显示。
然后，您必须使用“className”属性将Pure.css类应用于您的JSX组件。...在本节中，我们将使用Pure.css最基本的构建块，这些构建块也是项目中最常用的。你只需要热热手，我们就可以写出漂亮的代码。我们之前列出的大多数组件将在本组件部分进行处理。...pure-button 类，例如 Pure.css 和 Pure.css ，以创建具有不同样式和行为的按钮。...为了使照片以行的方式灵活排列，我使用Pure.css中的网格中的“pure.g”类将它们分组。 Forms 要在Pure.css中使用表单，您需要在HTML文档中包含Pure.css样式表。...命名空间是一个前缀，它被添加到CSS类的名称中，有助于防止与其他样式表中具有相同名称的类发生冲突。
:block; 块和行内元素转行内块元素（用的最多） display:inline-block; ---- CSS三大特性 层叠性 当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码...如果背景图定义在div里面，而显示的位置在浏览器范围内但是不在div的范围内的话，背景图无法显示。...行高以像素为单位，就是定义的行高值。 推荐行高使用像素为单位。...它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。...通常情况下，这个由很多小的背景图像合成的大图被称为精灵图，如下图所示为淘宝网站中的一个精灵图。 ? 工作原理： CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）。
# CSS-02 CSS复合选择器 并集选择器 后代选择器(重点) 子元素选择器（重点） 复合选择器总结 综合练习 标签显示模式（display）（重点） 块级元素(block-level) 行内元素...标签以什么方式进行显示，比如div 自己占一行， 比如span 一行可以放很多个 作用： 我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。...常见的块元素有~、、、、、等，其中标签是最典型的块元素。 块级元素的特点： （1）总是从新行开始。...# CSS层叠性 所谓层叠性是指多种CSS样式的叠加,就是css处理冲突的能力。 一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。...# CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。 注意： 1.
li> 公司产品 联系我们 <!...标签以什么方式进行显示，比如div 自己占一行， 比如span 一行可以放很多个 作用： 我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。...2.2 块级元素(block-level) 例： 常见的块元素有~、、、、、等，其中标签是最典型的块元素。 ?...注意： 只有 文字才 能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div 同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素...想要设置一个可继承的属性，只需将它应用于父元素即可。 简单的理解就是： 子承父业。 注意： 恰当地使用继承可以简化代码，降低CSS样式的复杂性。
学习目标 三种样式表的书写位置和优缺点 标签的三种显示模式和转换 复合选择器 背景属性 css的三大特性 样式表的书写位置 样式表可以有三种书写方式，分别分为 内嵌式样式表 外链式样式表 行内式样式表...，在html文件里面通过link标签引入css文件 行内式样式表 将样式直接写在标签本身上，以属性的形式存在 <div...较少 控制一个标签（少） 内嵌式样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面（中） 外链式样式表 完全实现结构和样式相分离 需要引入 最多，强烈推荐 控制整个站点（多） 标签的三种显示模式...块级元素 可设置宽和高 独占一行 默认宽度是父级标签的宽度 块级元素一般用于包裹其他块级或者行内元素 p这种段落标签不要嵌套块级元素 代表标签：div,p,ol,li,ul,dt,dd,dl,header...2.像素 如果是像素 那么默认在以“当前盒子”的左上角为0 0原点 构建一个坐标系 第一值是X轴的位置 第二个值是Y轴的位置 交互的点就是图片开始显示的起始位置 多说一嘴： 1、程序里面的坐标系X
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
