美文网首页我爱编程
web开发学习日志3-CSS

web开发学习日志3-CSS

作者: 奋斗的岑爸 | 来源:发表于2018-02-07 14:33 被阅读0次

    CSS简述

    CSS (Cascading Style Sheets),即层叠样式表,是一种标记语言(markup language)。用来描述网站上各种元素的外观,例如颜色、字体、间距、排版等等。它把内容和样式分开了,内容部分用HTML来写,样式部分用CSS来写。

    CSS语句的基本结构

    选择器(selector)+声明块(declaration block)


    CSS语句基本结构(www.udacity.com)
    • 选择器告诉浏览器我们要为哪些HTML元素设计样式
    • 声明块告诉浏览器需要将哪些样式应用于该HTML

    CSS选择器

    选择器种类很多,主要包含如下四大类

    • 基本选择器
    • 组合选择器
    • 伪类
    • 伪元素

    对于初学者,首先接触到的是基本选择器里的两种:

    ID选择器

    一个HTML元素只能拥有一个ID,并且这个ID只能在网页中使用一次。

    HTML代码:

    <div id="identified">Here's a span with some text.</div>
    <div>Here's another.</div>

    CSS代码:

    #identified {
    background-color: DodgerBlue;
    }

    类(class)选择器

    如果要给多个HTML元素添加相同的属性,那就要用到类(class)。有点绕口的说法,类可以用在多个HTML元素,一个HTML元素也可以有多个类。因此类异常强大与灵活。

    HTLM代码:

    <div class="classy text">Here's a span with some text.</div>
    <div>Here's another.</div>

    CSS代码:

    .classy {
    background-color: DodgerBlue;
    }
    .text {
    font-size: 16px;
    }

    两种选择器的表达方式

    如果HTML元素应用了ID属性,先写#,后面紧跟相应ID的名字

    #description {
    color: blue;
    }

    如果应用了class属性,先写 . (圆点),后面紧跟相应class的名字

    .paragraphs {
    color: red;
    }

    CSS样式表

    如果我们要在多个网页上使用同一个 CSS 该怎么办?可以将所有 CSS 从一个文件复制到另一个文件, 但工作量明显加大,如果后期需要修改CSS代码,同时要更改这个 CSS 的每一个副本。毫无疑问工作量成倍增加,而且容易出错。那么有没有简单的方法呢?答案是肯定的,我们可以把CSS代码写到名为样式表的文件中, 然后在 HTML 中加一行代码链接到该文件。

    样式表是一个文件,它包含描述元素如何在网页上呈现的代码。这和你之前的操作没有区别,除了 CSS 存在于不同文件中而你不必再使用 <style>标签。要创建样式表,只需将新文件添加到项目, 写入某些 CSS,然后将其另存为 name-of-stylesheet.css。

    如何链接一个样式表

    在你的网页能够使用样式表之前,你需要先链接它。执行此操作,需要在 HTML 中创建一个指向样式表的 <link>。创建链接只需在 HTML 的 <head> 中键入以下内容。

    <link href="path-to-stylesheet/stylesheet.css" rel="stylesheet">

    href 属性指定所链接资源的路径,rel 属性指定资源和文档之间的 关系。这里的关系是样式表。完成之后如下所示:

    <head>
    <title>我的网页</title>
    ...
    <link href="path-to-stylesheet/stylesheet.css" rel="stylesheet">
    ...
    </head>

    CSS参考

    目前已知的CSS属性已经有上百个,而且数量还在不断增多,如此庞大的数量我们是无法全部记住的,在以下网站中搜索关键词,可以找到所需要使用的 CSS 属性:

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

    相关文章

      网友评论

        本文标题:web开发学习日志3-CSS

        本文链接:https://www.haomeiwen.com/subject/zjqozxtx.html