CSS 简明教程 - 简介

yufei       5 年, 8 月 前       1024

在深入研究 CSS 之前,我们需要了解 CSS 和其它相关 Web 技术的背景

CSS 是什么

CSS 的全名是 Cascading Style Sheets,中文全名层叠样式表,用于指定如何显示 HTML 元素

HTML 的 CSS 样式通常存储在样式表中

HTML 中的 CSS 样式有三种存放位置:

  1. 使用 <link> 标签链接到外部样式表 .css 文件

    这种外部样式表可以被多个页面引用,因此可以显著提高加载和修改效率

    例如,本站源码中的

    <link rel="stylesheet" type="text/css" media="screen"  href="/css/forum.css?v=2.5.0-dev-7" />
    
  2. 放在 <style> 标签内部的 CSS 样式

    这种样式写法会影响当前页面的所有元素

    例如

    p {color:red}
    
  3. 放在标签元素 style 属性内的内联样式

    这种样式写法只会影响当前标签,例如

    <p style="color:red"></p>
    

需要注意的是它们的优先级,除了内联样式一定会覆盖第一第二种写法外,第一第二种写法的优先级取决于它们的位置

CSS 解决了什么问题?

HTML 标签最初的设计是用于定义文档内容

通过使用 <h1><p><table> 等标签,我们可以表达相应的信息,例如 「 这是一个标题 」、「 这是一个段落 」、「 这是一个表哥 」

例如

<h1>这是一个标题</h1>

<p>这是一个段落</p>

我们可以使用浏览器来处理文档的布局

在 CSS 创建之前的日子里,仅仅依赖 HTML 文档来渲染网页变得越来越困难,因为几个主要的浏览器 ChromeInternet ExplorerFirefox 正在继续向 HTML 添加新的 HTML 标签和属性 ( 例如 font 字体标记和 color 颜色属性 ) 规范

为了解决这个问题,为了解决这个问题,万维网联盟 ( World Wide Web Consortium,简称 W3C ) 在 HTML 4.0 之后创建了 CSS( 层叠样式表 )

从那时开始,我们就不再需要也不建议在 HTML 文档中定义复杂样式,因为所有主流浏览器都支持 CSS

HTML, CSS, 和 JavaScript 之间的关系

HTMLCSSJavaScript 是网站开发领域最基本的三项技术

  1. HTML 用于定义 HTML 文档并描绘在页面上要包含的元素,简单来说,就是定义文档的骨架
  2. CSS 用于定义样式并指定元素在页面上如何显示,简单来说就是定义文档的肌肉和皮肤,人要漂亮,肌肉和皮肤都重要
  3. JavaScript 用于定义操作,例如,你可能希望在单击按钮后触发一系列事件,简单来说就是定义文档的行为举止

下面的代码是一个简单的例子,也许你可以自己尝试更好地理解

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML,CSS,JavaScript Demo</title>
<style>
.default_head{
    color:black;
    font-size:20px
}

.new_head{
    color:red;
    font-size:30px;
}

.button_style{
    padding:5px;
}

</style>
</head>
<body>

<h1 class="default_head" id="heading">Hello,My First Heading.</h1>

<input type="button" value="Click to change heading style" onclick="changeStyle()" />

<script>
function changeStyle(){
var h1 = document.getElementById('heading');
if(h1.className=='default_head'){
    h1.className = 'new_head';
}
else{
    h1.className = 'default_head';
}
}

</script>
</body>
</html>
目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.