当前位置：文档之家 › CSS层分离编程是什么

CSS层分离编程是什么

  • 格式：pdf
  • 大小：180.95 KB
  • 文档页数：3

CSS层分离编程是什么
随着CSS的发展，使用CSS有语义化的命名约定和CSS层的分离，将
有助于它的可扩展性，性能的提高和代码的组织管理。大家知道CSS层分离
编程吗?下面我们就给大家详细介绍一下吧!这里有很多可供使用的前端方法
和命名规则，每个都有自己的优缺点。在几乎所有的案例中CSS被分割成更
易于管理的代码“块”。CSS的这种分割方式定义了每一种方法。
 命名规则
 一个可靠命名规则的重要性是不可忽视的。就像组织结构带来的好处一
样，这里有很多性能上的优势让你能够坚持地，有责任感地去命名你的选择
器。
 正确使用任何规则将会在大型项目减少与CSS相关的忧虑而发挥关键的作
用
 BEM
 最流行的命名规则之一就是BEM(block：块，Element：元素，Modifier：
修饰符)。通过给每个元素添加它的父级block模块作为前缀，使得目标的安
全性变得更加简单了。BEM还有助于消除页面和body类对嵌套或者附加样
式依赖。
 CSS Code复制内容到剪贴板
 .block {}
 .block__element {}
 .block--modifier {}
 上面的例子展示了一个BEM项目的类结构，下划线(__)被用来区分元素，
而用连字符(--)是用来修饰元素的。下面是一个现实世界的例子...

合集下载

网页样式CSS总结

网页样式CSS总结

第二章网页样式CSS总结一、CSS的概念与作用Css全称为级联样式表（Cascading Style Sheet）,通常又称为风格样式表（Style Sheet）,是用来进行网页风格设计的。

通过设立样式表，可以统一控制HTML中各标签的显示属性。

CSS可以更有效地控制网页外观。

使用CSS，可以精确的定位网页元素的位置，美化网页外观。

一个合理的CSS，还能有效地节省网络带宽，提高用户体验。

同时，使用CSS制作网页，还有以下优点：1、内容与表现分离。

有了CSS，网页的内容（XHTML）与表现就可以分开了。

2、表现统一。

可以使网页的表现非常统一，并且容易修改。

3、丰富的样式。

使得页面布局更加灵活。

4、减少网页的代码量，增加网页的浏览速度，节省网络带宽。

5、运用独立于页面的CSS，还有利于网页被搜索引擎收录。

二、<div>标签<div>标签可以用于定义HTML文档中的分区或节，即可以把HTML文档分割为独立的、不同的部分。

<div>标签就像一个容器，可以放置其他的HTML标签，如段落，列表，图片，表单等。

CSS的基本语法结构：<style type>=“text/css”>选择器{属性：属性值;......}</style>选择器：表示被修饰的对象，如页面中被修饰的段落标签<p>、列表标签<li>等。

属性：希望改变的样式，如颜色color、字体大小font—size 等，属性和属性值用冒号（：）隔开。

例如，设置页面中所有的<li>标签的文字颜色为红色，字体大小为15px，对应的样式代码如下：<style type=“text/css”>Li{color:#ff0000;font—size:15px;}</style>三、CSS选择器：根据选择器表示所修饰的内容类别，选择器又分为标签选择器、类选择器、ID选择器、并集选择器和后代选择器。

层叠样式表

层叠样式表


尺寸及定位 属性
Top Position
z-index
Company Logo
CSS样式表分类
根据样式代码的位置，分为三类： 行内样式
内嵌样式
外部样式
在最后一个声明后面加上一个分号 (;) 是一个好习惯
Company Logo
行内样式
您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内 样式”。行内样式使用元素标签的 STYLE 属性定义。 <html> <head> <title>行内样式表示例</title> </head> <body> <p style="font-family:华文彩云;">庐山美景——小天池</p> <p style="font-weight:bold">小天池位于庐山牯岭北面，池中之水置于高 山而终年不溢不涸。池后山脊上，屹立着一座白塔似的喇嘛塔。塔建于1936 年。小天池山对面还有一怪石，远望似一雄鹰伸颈欲鸣。</p> </body> </html>
type="text/css"表示类型是样 式表文本
Company Logo
CSS样式表常见的属性
属性 CSS名称 font-family Font-size Font-style 说明 设置或检索文本的字体 设置或检索文本字体的大小 设置或检索文本的字体样式，即字体风格，主 要设置字体是否为斜体。取值范围： normal | italic | oblique 用于设置字体的粗细，取值范围： Normal | bold | bolder | lighter | number
网页程序设计学什么

网页程序设计学什么

网页程序设计学什么网页程序设计是一门结合了视觉设计、用户体验和编程技能的学科，它涉及到创建和维护网站的过程。

以下是网页程序设计的主要学习内容：1. 网页基础知识网页程序设计首先需要了解网页的基本概念，包括互联网的工作原理、URL、HTTP协议等。

学习者需要理解网页是如何通过浏览器呈现给用户的。

2. HTML（超文本标记语言）HTML是构建网页结构的基础，它使用标签来定义网页内容的结构。

学习者需要掌握各种HTML标签的使用，如`<html>`, `<head>`,`<body>`, `<div>`, `<span>`, `<a>`等，以及如何使用它们来创建网页元素。

3. CSS（层叠样式表）CSS用于控制网页的布局和外观。

它允许开发者设置字体、颜色、间距、边框等视觉样式。

学习者需要掌握CSS选择器、属性和值的使用，以及如何使用CSS框架如Bootstrap来快速开发响应式网页。

4. JavaScriptJavaScript是一种脚本语言，用于增强网页的交互性。

它可以用来处理用户输入、控制动画、与服务器进行数据交换等。

学习者需要掌握JavaScript的基本语法、事件处理、DOM操作以及Ajax技术。

5. 前端开发框架和库随着技术的发展，出现了许多前端开发框架和库，如React, Angular,Vue.js等，它们可以帮助开发者更高效地构建复杂的单页应用。

学习者需要了解这些框架的基本概念和使用方法。

6. 响应式设计响应式设计是指网页能够根据不同的设备和屏幕尺寸进行适配。

学习者需要掌握媒体查询、流体布局和弹性布局等技术，以确保网页在各种设备上都能提供良好的用户体验。

7. 用户体验（UX）设计用户体验设计关注于提升用户在使用网站时的体验。

学习者需要了解用户研究、信息架构、交互设计等概念，并学会如何将这些概念应用到网页设计中。

8. 网页图形和多媒体网页不仅仅是文本，还包括图像、视频和音频等多媒体内容。

css样式表讲解

css样式表讲解


3．外部样式表
先创建一个CSS文件，然后在页面中调用这个CSS文
件。
调用的方法:在页面的头部标记<HEAD>中加入下面的
代码 <head> <link href="school.css" rel="stylesheet" type="text/css" />
</head>
<link>标记，用来调用外部的样式表文件。
CSS 样 式 表
CSS 样 式 表
CSS样式表概述 样式表的基本语法 样式表的使用规则 样式表中的常用属性 布局与定位
CSS样式表概述
CSS是Cascading Style Sheet的缩写，称为“层叠样
式表”，简称为“样式表”
层叠是指多个样式可以同时应用于同一个页面或网页
·CSS是一种用来装饰HTML的标记集合，是 对HTML标记的一种扩展，可以进一步美化 HTML页面 样式表的作用： 覆盖浏览器 页面布局 可以重用 多个文档可以链接到一个样式表
样式表的使用规则

样式表的分类
按加入的方式不同，可以分为：
行内样式表、
内部样式表
外部样式表。
1．行内样式表(内嵌样式表)
在HTML标记中使用style属性，直接写入需要定义的样式。 例如： <p style="color:Blue; font-size:12px" >内嵌样式表<p> 其中各个属性之间用“;”隔开，属性与属性值之间用“:”隔开.


内联式样式表是在现有HTML元素的基础上，用style属性把 特殊的样式直接加入到那些控制信息的标记中，比如下面的 例子： <p style="color：#ff0000">内联式样式表</p> 这种样式表只会对使用它的元素起作用，而不会影 响HTML文档中的其他元素。也正因为如此，内联式样式表 通常用在需要特殊格式的某个网页对象上。