CSS(网页样式语言)基础

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

为什么会有 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 worldh1>
        body>
    html>
  • style.css

    h1 {
        color: red
    }

1. 设置标签样式

  • CSS 样式通常写在下的 下:

    <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,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)

"bt"> ....

...>

这时如何定位

你可能感兴趣的:(全栈工程师)