CSS基础笔记-01CSS概述

文章目录

前言

CSS是什么?有什么作用?怎么编写CSS?怎样添加CSS?本文对CSS的四个方面作了学习并形成学习笔记。

CSS是什么

CSS (Cascading Style Sheets,层叠样式表)是用来控制网页在浏览器中的显示外观的声明式语言。

CSS的作用

我们知道HTML 是最常见的标记语言,html文档是由该语言组织起来的文本文件。

CSS就是配合html,用于设计文档的风格和布局等。

例如:

  1. 添加样式 , 比如改变标题和链接的颜色大小
  2. 创建布局, 比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局。
  3. 特效,比如动画。

CSS语法

CSS 是一门基于规则(rule)的语言,你能定义用于你的网页中特定元素样式的一组规则。

css 复制代码
/* syntax */
selector{
	property: value;
}

语法由一个 选择器(selector)起头,它选择 了我们将要用来添加样式的 HTML 元素。在这个例子中我们为一级标题(主标题<h1>)添加样式。

接着输入一对大括号 { }。在大括号内部定义一个或多个形式为属性property )---value )对的声明 。每个声明都指定了我们所选择元素的一个属性,后面再跟一个我们想赋给这个属性的值。

冒号之前是属性,冒号之后是值。不同的 CSS 属性对应不同的合法值。

比如"我希望页面中的主标题是红色的大字"。

css 复制代码
h1 {
  color: red;
  font-size: 5em;
}

在这个例子中,我们指定了 color 属性,它可以接受许多颜色值;还有 font-size 属性,它可以接收许多 size unit 值。

一个 CSS 样式表可以包含很多个规则。

css 复制代码
h1 {
  color: red;
  font-size: 5em;
}

p {
  color: black;
}

添加CSS的方法

最通用的在html文档中加入CSS样式的方法是在html的head标签中链接css文件。

通常在 HTML 文档中,<head> 语句模块里面加上下面的代码:

html 复制代码
<link rel="stylesheet" href="styles.css" />
html 复制代码
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Tao Te Ching</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <h1>第一章(论道)</h1>

    <p style="white-space: pre-line;">
      道可道,非常道;名可名,非常名。 
      无,名天地之始;有,名万物之母; 
      故常无,欲以观其妙;常有,欲以观其徼。 
      此两者,同出而异名,同谓之玄。玄之又玄,众妙之门。
    </p>

    <ul>
      <li>第二章</li>
      <li>第三章</li>
      <li>第四章</li>
      <li>第五章</li>
    </ul>

  </body>
</html>
css 复制代码
/* 元素选择器,即直接匹配 HTML 元素的选择器。 */
h1 {
  color: red;
}

/* 用逗号将不同选择器隔开,即可一次使用多个选择器 */
p,li {
  color: green;
}

/* 去除list bullets */
li {
  list-style-type: "\1F44D";
}
相关推荐
袁煦丞3 分钟前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆4 分钟前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
彤银浦11 分钟前
Web学习笔记2
笔记·学习
好奇心笔记14 分钟前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆14 分钟前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户214118326360215 分钟前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军16 分钟前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句18 分钟前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜19 分钟前
CommonJS与ESM
前端·javascript
LaoZhangAI19 分钟前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端