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

为什么会有 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. python3中sum

    摘自https://blog.csdn.net/ikerpeng/article/details/17026011 其实python中sum有两种 一种是python自己的sum 另一种是python ...

  2. LA 3026 - Period KMP

    看题传送门:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show ...

  3. ITFriend开发日志20140611

    原文链接:http://www.itfriend.cn/user/ITFriend/article/details/100274 1.调整登录页. 把大背景图,改为通用的banner图,节省流量. 登 ...

  4. 126邮件POP3，SMTP服务器与端口设置

  5. zeros() 函数——MATLAB

    zeros函数——生成零矩阵 ones函数——生成全1阵 [zeros的使用方法] B=zeros(n):生成n×n全零阵. B=zeros(m,n):生成m×n全零阵. B=zeros([m n]) ...

  6. idea+springboot+freemarker热部署（转）

    今天在学习springboot集成freemarker模板引擎修改代码时,发现每次修改一次freemarker文件时,都必须重启下应用,浏览器刷新才能显示修改后的内容,这样效率太低,每次启动一次应用都 ...

  7. java异常中Exception捕获不到的异常

    一 概念 众所周知java提供了丰富的异常类,这些异常类之间有严格的集成关系,分类为 父类Throwable Throwable的两个子类Error和Exception Exception的两个子类C ...

  8. Mac下Android studio 之NDK配置教程(一)

    Mac下Android studio 之NDK配置教程(一) 1.概述 近期项目全线转移到Mac下使用使用Android studio开发. 遇到关键代码封装到 ***native***层,此时在wi ...

  9. 栈溢出笔记1.9 认识SEH

    从本节開始,我们就要研究一些略微高级点的话题了,如同在1.2节中看到的,Windows中为抵抗栈溢出做了非常多保护性的检查工作,编译的程序默认开启了这些保护. 假设我们不能绕过这些保护.那么我们的Sh ...

  10. 前端工具WebStorm好在哪里？（带详细破解教程）

    前端工具WebStorm好在哪里?(带详细破解教程) 一.总结 1.WebStorm对html特别是HTML5和JS的智能提示简直堪称大神. 2.WebStorm足够的轻量级. 3.WebStorm对 ...