Web Front-endHTML TutorialPowerful CSS tool combination: Blueprint, Sass, Compass_html/css_WEB-ITnose
掌握CSS是每个Web开发者的基本要求，虽然CSS本身并不复杂，但怎样写出支持所有主流浏览器（特别是IE）的CSS，以及在大型网站中如何有序地组织好CSS结构却是一个相当棘手的问题。我更多的是一个开发者，而不是一个设计师，却不幸花了大量时间处理CSS这些棘手问题，如果能有一些工具能帮我处理这些问题，那将很有意义。经过一段时间的搜索和研究，还真发现了几个很棒的工具，感觉真是相见恨晚，与大家分享之。
Blueprint CSS Framework
刚才说过了，处理浏览?的不一致性是很困难的事情。每开始一个新项目，我们都需要做一些重复的事情，比如需要将一些元素的padding和margin重置为0，设置某些元素的默认样式，定义一些通用的样式等，这些由于浏览器之间的不一致而变得复杂。有了blueprint ，你就不用再担心这些啦，blueprint已经非常完美的为你做好这些事情了。这还只是blueprint做的一小部分事情，它还定义了一些form的样式，另外它带一些插件。blueprint还是一个基于网格(grid)布局的框架。在我看到blueprint之前还不知道网格布局已经这么流行了。网格布局就是把浏览器内容区域划分一些固定的大小的网格，网页中元素的定位都向网格靠齐。blueprint默认设置网页的宽度为950像素，并它分成24个网格，每个网格宽度为30像素，每个网格之间的距离为10像素。
在blueprint下布局非常容易，我们来看如何使用blueprint来做非常常见的三列布局：
Html代码
-
- Header
- Left sidebar
- Main content
- Right sidebar
- Footer
- grid, while leaving a margin of 10 pixels on the right. For example, the width of span-4 is 4*40-10=150 pixels. Note that when the content crosses the 24th style, you need to define the last style. The function of the last style is to set the right-margin to 0. So the above example is very clear, the header and footer span all 24 grids, the left and right side columns span 4 grids each, and the middle content spans 16 grids. Here is an even cooler example that uses blueprint built-in styles entirely.
Sass
Sass is a programming language that outputs CSS. Yes, CSS There are also programming languages. Sass is based on the Ruby language and is part of Haml, so to install Sass you must install Haml, and of course Ruby must be installed. I don't like Haml, but I like Sass very much. Install Haml (and also Sass) with the following command. Depending on your operating system, you may need to add sudo to the command:
Ruby Code
gem install haml
Sass is an indentation-based language, let’s look at an example:
Sass code
table.hl
margin: 2em 0
td. ln
text-align: right- li
- font:
- family: serif
- weight: bold
- size: 1.2em
- Assuming the above content is saved in the style.sass file, run the command:
Command code
sass style.sass style.css
The style.css file will be output, its content is:
Css code
table.hl {
margin: 2em 0;
}
table.hl td.ln {- text-align: right;
- }
- li {
- font-family: serif;
- font-weight: bold;
- font-size: 1.2em;
- }
- You can see the advantages of Sass syntax. Because it is based on indentation, the common prefix only needs to be written once, while in the CSS file It needs to be repeated multiple times, which is a problem for maintenance. Of course, Sass can do more, it also supports variables and mixins. Mixins are reusable styles and can even take parameters. The definition of Mixin starts with "=", and the definition of variables starts with "!".
Java code
=table-scaffolding
th
text -align: center
font-weight: bold- td, th
- padding: 2px
- =left(!dist )
- float: left
- margin-left = !dist
- #data
- left(10px)
- table-scaffolding
- The above code defines two Mixins, table-scaffolding and left, where left also receives a dist parameter. The #data style includes the styles defined by left Mixin and table-scaffolding Mixin. It will output the following CSS:
Java code
- #data {
- float: left;
- margin-left: 10px;
- }
- #data th {
- text-align: center;
- font-weight: bold;
- }
- #data td, #data th {
- padding: 2px;
- }
Mixin是Sass非常强大的一个特性，想想看你是不是在项目中看到很多重复的CSS定义，你不得不来回的拷贝复制。通过Sass你可以将这些公用的Sass定义成一个Mixin，然后在其它实际定义样式的地方包含它。你甚至还可以定义项目之间都通用的Mixin，把它们包含在一个单独的文件里，就像类库一样，需要时就引用。我们可以为Blueprint的样式转变成Sass的格式，并把它们做成Mixin，然后再定义基于语义的样式，它们包含这些Mixin，这样我们就可以在页面中使用语义样式名称了，而不需要使用Blueprint带的基于表现的样式。幸运的是，我们并不需要自己做这些事情，已经有另外的框架帮你做好了，那就我接下来要谈的Compass。Sass支持变量的运算，这有时非常方便，我们可以定义一些元素的宽度，定义为变量，其它元素的宽度由它们计算出来，当改变布局时，只需要修改几个变量的值就可以了。作为一门编程语言，Sass还支持控制条件和循环语句，虽然这在一般情况下很少用到。
Compass
Blueprint提供了一个非常健壮的CSS框架，但是却大量使用基于表现的class名称；Sass语言提供将基于表现的class名称转化成基于语义的class名称的基础设施，但本身不带任何样式；Compass 的作用就是将两者集成到一块，结合两者的优点。Compass还支持其它CSS框架的集成，这里就不说了。Compass也是基于Ruby语言的，使用下列命令来安装：
Command代码
- gem install compass
要开始一个新的Compass项目，使用：
Command代码
- compass -f blueprint project-name
选项-f表示和blueprint框架集成。进入到项目目录下，让我们基于Compass来实现一个三列布局。先写HTML文件：
Html代码
- Header
- Left sidebar
- Main content
- ;
- FOOTER
- & lt;/div & gt;
- & lt;/div & gt;
- & lt;/body & gt;
Note that there are no blueprint-related style names above. We define a semantic-based id for each part, and then they are Define the style, open the src/screen.sass file in the project directory, and change its content to the following:
Sass code
- // This import apps a global reset to any page that imports this stylesheet.
- @import blueprint/reset.sass
- // To configure blueprint, edit the partials/base .sass file.
- @import partials/base.sass
- @import blueprint
- @import blueprint/modules/scaffolding.sass
- blueprint-typography("body")
- blueprint-scaffolding("body")
- blueprint-utilities
- blueprint-debug
- blueprint-interaction
- #container
- container
- #header, #footer
- // true means it is the last column
- column(!blueprint_grid_columns, true)
- // The sidebar occupies 1/4 of the entire page, which means it spans 6 columns
- !sidebar_columns = floor(!blueprint_grid_columns / 4)
- #left-sidebar
- column(!sidebar_columns)
- #main-content
- column(!blueprint_grid_columns - 2 * !sidebar_columns)
- #right-sidebar
- column(!sidebar_columns, true)
The first few lines import Compass to provide Blue-related Sass styles, which contain many Mixins that can be used. The styles of #header and #footer directly include column Mixin. The first parameter is the bluepring_grid_columns variable defined by compass. The default is 24. The second parameter is true, which means that the element will span the last column. left-sidebar and right-sidebar occupy 1/4 of the entire page width. The variable sidebar_columns represents the column width occupied by the sidebar, which is calculated based on bluepring_grid_columns. Similarly, the width of main-content is also calculated. They all directly include column Mixin. Convert it into css and use the command directly in the project directory:
Java code
- compass
can convert the sass files in the src directory into the corresponding css. Now open the HTML file you just created and you should be able to see the normal layout of the page.
During project development, it would be too troublesome if you need to manually call the compass command every time to convert the sass file into a css file. compass provides the command
Command code
- compass -w
It will automatically Monitor changes to sass files in the src directory and automatically convert them into css files.
What is the purpose of HTML attributes?May 07, 2025 am 12:01 AMHTMLattributesareessentialforenhancingwebelements'functionalityandappearance.Theyaddinformationtodefinebehavior,appearance,andinteraction,makingwebsitesinteractive,responsive,andvisuallyappealing.Attributeslikesrc,href,class,type,anddisabledtransform
How do you create a list in HTML?May 06, 2025 am 12:01 AMTocreatealistinHTML,useforunorderedlistsandfororderedlists:1)Forunorderedlists,wrapitemsinanduseforeachitem,renderingasabulletedlist.2)Fororderedlists,useandfornumberedlists,customizablewiththetypeattributefordifferentnumberingstyles.
HTML in Action: Examples of Website StructureMay 05, 2025 am 12:03 AMHTML is used to build websites with clear structure. 1) Use tags such as, and define the website structure. 2) Examples show the structure of blogs and e-commerce websites. 3) Avoid common mistakes such as incorrect label nesting. 4) Optimize performance by reducing HTTP requests and using semantic tags.
How do you insert an image into an HTML page?May 04, 2025 am 12:02 AMToinsertanimageintoanHTMLpage,usethetagwithsrcandaltattributes.1)UsealttextforaccessibilityandSEO.2)Implementsrcsetforresponsiveimages.3)Applylazyloadingwithloading="lazy"tooptimizeperformance.4)OptimizeimagesusingtoolslikeImageOptimtoreduc
HTML's Purpose: Enabling Web Browsers to Display ContentMay 03, 2025 am 12:03 AMThe core purpose of HTML is to enable the browser to understand and display web content. 1. HTML defines the web page structure and content through tags, such as, to, etc. 2. HTML5 enhances multimedia support and introduces and tags. 3.HTML provides form elements to support user interaction. 4. Optimizing HTML code can improve web page performance, such as reducing HTTP requests and compressing HTML.
Why are HTML tags important for web development?May 02, 2025 am 12:03 AMHTMLtagsareessentialforwebdevelopmentastheystructureandenhancewebpages.1)Theydefinelayout,semantics,andinteractivity.2)SemantictagsimproveaccessibilityandSEO.3)Properuseoftagscanoptimizeperformanceandensurecross-browsercompatibility.
Explain the importance of using consistent coding style for HTML tags and attributes.May 01, 2025 am 12:01 AMA consistent HTML encoding style is important because it improves the readability, maintainability and efficiency of the code. 1) Use lowercase tags and attributes, 2) Keep consistent indentation, 3) Select and stick to single or double quotes, 4) Avoid mixing different styles in projects, 5) Use automation tools such as Prettier or ESLint to ensure consistency in styles.
How to implement multi-project carousel in Bootstrap 4?Apr 30, 2025 pm 03:24 PMSolution to implement multi-project carousel in Bootstrap4 Implementing multi-project carousel in Bootstrap4 is not an easy task. Although Bootstrap...
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
Notepad++7.3.1
Easy-to-use and free code editor
