2019-09-01

CSS简介与基本语法

文章目录

1. CSS简介
1. 1.1. CSS概述
2. 1.2. CSS基本内容

CSS简介

　　层叠样式表(Cascading Style Sheets)，缩写：CSS；又称串样式列表、级联样式表、串接样式表、阶层式样式表。是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。

CSS概述

　　CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。CSS不能单独使用，必须与HTML或XML一起协同工作，为HTML或XML起装饰作用。本文主要介绍用于装饰HTML网页的CSS技术。其中HTML负责确定网页中有哪些内容，CSS确定以何种外观展现这些元素。CSS可以用于设定页面布局、设定页面元素样式、设定适用于所有网页的全局样式。CSS可以零散地直接添加在要应用样式的网页元素上，也可以集中化内置于网页、链接式引入网页以及导入式引入网页。
　　CSS最重要的目标是将文件的内容与它的显示分隔开来。在CSS出现前，几乎所有的HTML文件内都包含文件显示的信息，比如字体的颜色、背景应该是怎样的、如何排列、边缘、连线等等都必须一一在HTML文件内列出，有时重复列出。CSS使作者可以将这些信息中的大部分隔离出来，简化HTML文件，这些信息被放在一个辅助的，用CSS语言写的文件中。HTML文件中只包含结构和内容的信息，CSS文件中只包含样式的信息。
　　简而言之，CSS是一种用于装饰HTML的标记集合，是对HTML的标记扩展，可以进一步美化HTML页面以统一网页风格。

CSS基本内容

CSS样式表语法

1 2	RuleSelector {property: value;property:value;...} <!-- 规则选择器 {属性:值;属性:值...} -->

CSS样式信息存储位置

①存储在HTML文件内部，即存放在区内，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静夜思</title>
    <style>
        p {
            font-size: large;
            font-weight: bold;
            color: pink;
            text-decoration-line: underline;
        }

        .one {
            color: blue;
            font-weight: 800;
        }

        .two {
            color: green;
            font-weight: 800;
        }
    </style>
</head>

<body>
    <p>静夜思</p>
    <span class="one">床前明月光，</span><br>
    <span class="two">疑是地上霜。</span><br>
    <span class="one">举头望明月，</span><br>
    <span class="two">低头思故乡。</span>

</body>

</html>

②存储在独立文件中，即存放在例如扩展名为my.css的文件中，可在需要美化的HTML文件中使用<link rel="stylesheet" href="./css/my.css" />引用。如下：

<!-- my.css -->
#two .foolish{
    font-size: 28px;
}
#two > p{
    color: red;
}
#one > span,#two .foolish{
    border: 6px solid blue;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS练习</title>
    <link rel="stylesheet" href="./css/my.css" />

  </head>
  <body>
    <div id="one">
      <p id="China" class="foolish">中国</p>
      <span>新加坡</span>
    </div>

    <div id="two">
      <span>中国</span>
      <div>美国</div>
      <p>韩国</p>
      <br />
      <div>日本</div>
      <span>
        <p class="foolish">俄罗斯</p>
      </span>
    </div>
  </body>
</html>

规则选择器

规则选择器用于指定需要美化的HTML元素位置,包括:标签选择器、ID选择器、类别选择器、万用选择器、通配符选择器。

●标签选择器：使当前网页中所有相同的标签共享一个样式

1
2
3

标签名{
	属性名:值;
}

●ID选择器：使当前网页指定ID的标签使用一个样式

1
2
3

#id{
	属性名:值;
}

●类别选择器：使当前网页指定的class标签为同一类以共享一个样式

1
2
3

.class{
	属性名:值;
}

●后代选择器：从父标签与后代标签的关系以定位到后代确定样式

1
2
3

父标签 后代标签(要定位的标签){
	属性名:值;
}

●父子选择器：从父标签定位到子标签确定样式

1
2
3

父标签 > 子标签{
	属性名:值;
}

●并列选择器：同时选择多个无关系的标签确定样式

1
2
3

标签1,标签2,标签3{
	属性名:值;
}

●通用选择器：使当前网页所有标签添加指定样式

1
2
3

*{
	属性名:值;
}

Scholar’s Blog by scholargeek is licensed under a Creative Commons BY-NC-ND 4.0 International License.
由董仕麟创作并维护的scholargeek博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。

本文永久链接：https://scholargeek.github.io/2019/09/01/CSS/

Scholar's Blog

DO WHAT WE WANT