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

为什么会有 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. linux 内核源代码目录结构

    /arch:目录包括了所有和体系结构相关的核心代码.它下面的每一个子目录都代表一种Linux支持的体系结构,例如i386就是Intel CPU及与之相兼容体系结构的子目录.PC机一般都基于此目录. / ...

  2. google校招在线測试题---2048

    先附代码:(简单地说就是给出一个矩阵代表2048游戏的一个状态以及一个方向,输出往这个方向移动之后的矩阵) #include<iostream> #include<fstream&g ...

  3. 小小ARC造福无数码农

    今天无意中看到非常久之前的一个项目,古老的语法规范,还有更让人战战兢兢"内存管理代码"! 在这不得不说OC中内存管理的三种分类: Mannul Reference Counting ...

  4. Apache多虚拟主机多版本PHP（5.3+5.6+N）共存运行配置全过程

    摘要: 为需要实现在同一台Linux服务器上面,同时运行多个不同版本的PHP程序,本文我们将使用FastCGI方式加载,并把过程详细记录下来方便大家参考. 常规的PHP配置方式有很多种,例如CGI.f ...

  5. sql海量数据优化

    1.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引而进行全表扫描,如: select id from t where num is null 可以在num上设 ...

  6. 一、Github博客搭建之jekyll安装

    注意:以下步骤是FQ后操作的,需要了解FQ的可以移步 -> 枫叶主机 一.安装jekyll需要Ruby-2.1.0以上版本,本人是mac pro系统版本10.12.5(macOS Sierra) ...

  7. IGeometryCollection Interface

    Come from ArcGIS Online IGeometryCollection Interface Provides access to members that can be used fo ...

  8. hadoop配置文件的加载机制 分类： A1_HADOOP 2015-01-21 11:29 839人阅读 评论(0) 收藏

    hadoop通过Configuration类来保存配置信息 1.通过Configuration.addResource()来加载配置文件 2.通过Configuration.get***()来获取配置 ...

  9. C# 软件编码规范

    一.代码注释 并不是所有的代码均需要注释. 1.类头部注释 /// <summary> /// 描述类的用途 /// 作者: 张三 /// 日期: 2015/12/1 /// </s ...

  10. 【codeforces 742A】Arpa’s hard exam and Mehrdad’s naive cheat

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...