×

CSS

CSS概述

  • CSS 指层叠样式表 (Cascading Style Sheets)

  • 样式定义如何显示 HTML 元素

  • 样式通常存储在样式表中

  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题

  • 外部样式表可以极大提高工作效率

  • 外部样式表通常存储在 CSS 文件中

  • 多个样式定义可层叠为一

样式解决了一个普遍的问题

HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。

由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style)。

所有的主流浏览器均支持层叠样式表。

样式表极大地提高了工作效率

样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局,CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者,你能够为每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。

多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

  • 浏览器缺省设置

  • 外部样式表

  • 内部样式表(位于 <head> 标签内部)

  • 内联样式(在 HTML 元素内部)

因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。

关于"CSS"的文章

  • 小程序里修改样式的DEMO

    移动开发 Posted by andy001 2020.04.26 views: 5135 评论:0

    小程序里如何修改CSS的样式呢,其实跟在WEB端很相似,只是换了个方法而已。前端开发中修改样式,js可以操作DOM,即document.getElementById(id).style.property=newstyle但是微信的js是没有DOM操作这...

    Tags: js小程序CSS

  • css基础知识:设置链接的样式

    HTML/CSS Posted by andy001 2019.08.30 views: 5051 评论:0

    链接是从一个网页到另一个网页的连接,CSS可通过不同属性以各种不同方式来设置链接的样式。在讨论CSS属性之前,先了解链接的状态是非常重要的。链接可以存在于不同的状态,并且可以使用伪类进行样式设置。下面给出了四种链接状态:● a:link=>这是一个正常...

    Tags: CSSa链接

  • 轻松绘制几何图形的裁剪路径(clip-path)工具:Clippy

    开发工具 Posted by Web前端之家 2019.07.03 views: 9433 评论:0

    在前端开发项目的时候,有时候会遇到裁剪几何图形的需求,比如设计师的一些不规则图形(菱形,五角星等),一般我们直接用图片去处理,如果你学会了Clippy,一切会变得很简单了。OK,让我们一起来学下“绘制几何图形的裁剪路径(clip-path)工具:Clippy“...

    Tags: ​Clippyclip-pathCSS工具

  • CSS实现鼠标滑动图片出现光效越过效果

    HTML/CSS Posted by andy001 2019.04.01 views: 9899 评论:0

    CSS实现鼠标滑动图片出现光效越过效果,直接上代码:<!DOCTYPE html><html><head><meta name="viewport" con...

    Tags: CSS滑动

  • 用CSS实现模块边框的渐变

    HTML/CSS Posted by andy001 2018.08.23 views: 21676 评论:0

    用CSS实现模块边框的渐变,一起来看下demo.<div class="gradient-block-vertical"></div><div class="gradient-...

    Tags: CSS渐变

  • 推荐几种在移动端实现垂直居中的方法

    HTML/CSS Posted by 天空 2018.04.28 views: 17536 评论:0

    推荐几种在移动端实现垂直居中的方法。方法1:table-cellhtml结构<div class="box box1">    <span>垂直居中&...

    Tags: 垂直居中CSS

  • 探讨挖空文本的CSS技术和效果

    HTML Posted by Web前端之家 2018.03.07 views: 16486 评论:1

    挖空文本是一种技术,将文字从元素中剪切出来并显示背景。换句话说,你只能看到背景,因为这些字母敲出了洞。这很吸引人,因为它打开了我们无法摆脱传统CSS属性的印刷风格,例如color。尽管过去我们已经看到了很多方法来完成挖空文本,但我们现在可以使用一些现代CSS属...

    Tags: CSS挖空SVG

  • 【前端开发工具】弹指间轻轻松松画图形

    开发工具 Posted by Web前端之家 2018.03.02 views: 15156 评论:1

    在开发页面的时候,设计师都喜欢用一些棱角,比如箭头、小三角、不规则矩形等形状,在项目中处理的这些形状的时候,如果时间很赶,会采用直接切图或者找其他方法。好吧,回头想想,既浪费时间,又降低了页面性能;于是决定整一款“点点鼠标画图并且生成CSS代码”的工具,以后不...

    Tags: CSS工具画图

  • 一份HTML/CSS面试内容

    HTML/CSS Posted by 流泪的石头 2017.12.04 views: 8403 评论:0

    一份HTML/CSS面试内容,分享如下:1.常用那几种浏览器测试?有哪些内核(LayoutEngine)?(Q1)浏览器:IE,Chrome,FireFox,Safari,Opera。(Q2)内核:Trident,Gecko,Presto,...

    Tags: HTMLCSS

  • CSS伪元素:before与:after

    HTML/CSS Posted by andy001 2017.10.24 views: 12659 评论:0

    CSS伪元素:before与:after,CSS伪元素用于向某些选择器设置特殊效果。所以本文将和大家一起分享交流CSS的伪元素的使用知识。我们一起来学习下:基本语法所谓的伪元素,顾名思义他们并不是真正的HTML元素。::before与::after用于向目标...

    Tags: CSS:before:after

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.8 Valyria