所谓全栈，个体可以独立地完成系统的设计、开发、测试、部署以及运维。打通一个领域从无到有的全过程。

为什么会有 markdown 文本编辑显示工具呢，因为 html 太重了。markdown 是 html 的一种简化思路，css 则是另外一种。css 是对 html 其中部分工作的提取和分担，这部分的工作就在于 html 各种标签的属性以及 style 属性的定制等。使得 html 单纯用于文档结构格式和整体布局。

css 是 html 的一个辅助语言，用来描述网页样式，html 没有css也可以工作（可以通过标签的各种属性以及 style 属性定制样式），但 css 可以把样式做抽象，和 html 剥离，这样 html 单纯用作布局（css 与 html 的关系因此也可以看做，抽象和分离的关系）。

  • hello_world.html

    <html>
    
    <head>
    
        <link rel="stylesheet" type="text/css" href="style.css" />
    
    </head>
    
    <body>
    
        <h1>hello world</h1>
    
    </body>
    
</html>

  • style.css

    h1 {
    
    color: red
    
}

1. 设置标签样式

  • CSS 样式通常写在<head></head>下的 <style></style>下：

    <html>
    
    <head>
    
        <style type="text/css">
    
        </style>
    
    </head>
    
    <body>
    
    ...
    
    </body>
    
</html>

  • 我们可以在 style 标签内将 body 标签的前景色设置为红色：

    <style type="text/css">
    
    body {
    
        color: red;
    
    }
    
</style>

2. 设置 id 样式

  • 比如我们在网页主体（body）中使用<div>标签（div，division，区块，用于划分版区），定义一个 id 为 swatch 的版区：

    <body>
    
    <div id="swatch"> </div>
    
</body>

  • 通过 # 进行索引，然后设置样式：

    <style type="text/css">
    
    #swatch {
    
            width: 150px;
    
            height: 100px;
    
            color: #fff;
    
            background-color:blue;
    
    }
    
</style>

3. 设置 class 的样式

  • class 类属性用来标识一组具有相同性质的元素；

    <body>
    
    <p class="marker">....</p>
    
    <p>
    
        <span class="marker">....</span>
    
        <span class="marker">....</span>
    
    </p>
    
</body>

  • 通过 . 进行选择定位：

    <style type="text/css">
    
    .marker {
    
            background-color:#ff;
    
    }
    
</style>

4. 复合选择器（compound selector）

<div id="bt">

    <a >....</a>

</div>

<p>

    <a ...></a>

</p>

这时如何定位<div>下的 <a>而不是<p>下的呢？就要用到 compound selector 的概念了：

#bt a {

    text-decoration: none;

}

CSS（网页样式语言）基础的更多相关文章

  1. Css网页样式设计

    第一章 概述 一.CSS简介1.CSS是Cascading Style Sheets(层叠样式表单)的简称.通常所称的CSS是指CSS1,即层叠样式表单1级. 2.编辑CSS文档:与编辑HTML的方法 ...

  2. 精通CSS+DIV网页样式与布局--页面背景

    上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...

  3. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  4. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  5. CSS+DIV网页样式与布局：第二章：CSS的基本语法

    第二章:CSS的基本语法 一 CSS选择器(所有的HTML语言中的标记都是通过不同的css选择器进行控制的).用户只需要 通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...

  6. 详解CSS网页布局中默认字体样式

    浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...

  7. 精通CSS+DIV网页样式与布局--页面和浏览器元素

    在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...

  8. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  9. 动态样式语言—LESS基础知识

    CSS是一门非程序式语言,缺少逻辑性,不便于维护 LESS在CSS现有语法的基础上,为CSS加入程序式语言的特性 引入了变量.混入.运算.函数等功能,大大简化CSS的编写,降低了CSS的维护成本 LE ...

随机推荐

  1. mootools常用特性和示例（基础篇2）

    接着上一篇:mootools常用特性和示例(基础篇1) 1.表单操作 html: <form id="myForm" action="submit.php" ...

  2. HDU 1406 完数 因子的和

    http://acm.hdu.edu.cn/showproblem.php?pid=1406 完数的定义:如果一个大于1的正整数的所有因子之和等于它的本身,则称这个数是完数,比如6,28都是完数:6= ...

  3. 【例题3-5 UVA - 1583】Digit Generator

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] for (int i = 1;i <= n;i++) { 算出i是哪一个的生成元. 假设是y. 则ans[y] = min(a ...

  4. thinkphp 获取url参数,汉字获取不到

    //这样获取不到 dump($_GET['car_code']); //这样就可以获取了 dump(iconv("gb2312","utf-8",$_GET[' ...

  5. 最简单的基于FFmpeg的移动端样例：IOS HelloWorld

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

  6. Lucene学习总结之七：Lucene搜索过程解析 2014-06-25 14:23 863人阅读 评论(1) 收藏

    一.Lucene搜索过程总论 搜索的过程总的来说就是将词典及倒排表信息从索引中读出来,根据用户输入的查询语句合并倒排表,得到结果文档集并对文档进行打分的过程. 其可用如下图示: 总共包括以下几个过程: ...

  7. Objective-C中 ==、isEqual、isEqualToString判断字符串相等

    图片发自简书App 在判断一个字符串类型的变量是否与某字符时相等,你可能写下这样一行代码 if (activityType == @"0"){} //activityType是某一 ...

  8. 利用函数的惰性载入提高 javascript 代码性能

    在 javascript 代码中,因为各浏览器之间的行为的差异,我们经常会在函数中包含了大量的 if 语句,以检查浏览器特性,解决不同浏览器的兼容问题.例如,我们最常见的为 dom 节点添加事件的函数 ...

  9. oracle汉字占用字节长度

    1.        今天调查一个oracle数据库问题的时候,发如今11g中一个汉字占2个字节,在10g中占3个字节.导致将11g数据库中的数据导入到10g的时候总是出错.開始的时候还以为是11g和1 ...

  10. 通过select下拉框里的value控制div显示与隐藏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...