**CSS语法**

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素。

  1. selector {declaration1; declaration2; ... declarationN }

每条声明由一个属性和一个值组成。
属性（property）是样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

  1. selector {property: value}

例如下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

  1. h1 {color:red; font-size:14px;}

**引入CSS样式**

如何插入样式表，当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：外部样式表、内部样式表和内联样式。

1.外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：

  1. <head><link rel="stylesheet" type="text/css" href="site.css" /></head>

2.内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

  1. <head>
  2. <style type="text/css">
  3. p {margin-left: 20px;}
  4. body {background-image: url("images/test.gif");}
  5. </style>
  6. </head>

3.内联样式由于要将表现和内容混杂在一起，即HTML代码和CSS代码混编，这样会不利于文档结构，并且不容易维护，所以一般不要使用这种方式引入样式。例如改变段落的颜色和左外边距：

    1. <p style="color: red; margin-left: 20px;">
    2. This is a paragraph
    3. </p>

CSS最基础的语法和三种引入方式的更多相关文章

  1. CSS【03】：CSS 基础选择器与三种引入方式

    基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...

  2. html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  3. python全栈开发day38-css三种引入方式、基础选择器、高级选择器、补充选择器

    一.昨日内容回顾 div:分割整个网站,很多块 (1)排版标签 (2)块级标签 独占一行 可以设置高和宽,如果不设置宽高,默认是父盒子的宽 span: (1) 小区域 (2)文本标签 (3)在一行内显 ...

  4. Python 45 css三种引入方式以及优先级

    一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式   1.在标签头部的style属性内  2.属性值满足的是css语法  3.属性值用key:value形式赋值,value具 ...

  5. css三种引入方式以及其优先级的说法

    css 三种引入方式 方式一:行间式 ​ 1.在标签头部的style属性内 ​ 2.属性值满足css语法 ​ 3.属性值用key:value形式赋值,value具有单位 ​ 4.属性值之间用 分号 : ...

  6. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  7. 前端 CSS 三种引入方式

    CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...

  8. css-1,css的三种引入方式 基本选择器

    <!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...

  9. 006 CSS三种引入方式

    CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...

随机推荐

  1. U盘修复教程--使用量产工具和芯片检测工具

    U盘修复教程(金士顿DT101) 本教程使用量产工具(量产可理解为强制恢复出厂设置),量产有风险(U盘彻底报废),根据教程所造成所有损失均与本文作者无关. ·第一步:下载ChipGenius_v4_0 ...

  2. FireFox浏览器导出文件名乱码

    解决方案1 String codedFileName = "导出文件名.xls"; String agent = request.getHeader("USER-AGEN ...

  3. noip2018考后反思之爆0

    今年又被Han老师鞭尸了TAT noip普及组比齐同学考的都差,正在准备退役Orz 哎,算了,该放题解还是要放的:( 普及第一题我觉得没有放的必要还是放一下 Code: #include<ios ...

  4. [POJ3612] Telephone Wire(暴力dp+剪枝)

    [POJ3612] Telephone Wire(暴力dp+剪枝) 题面 有N根电线杆,初始高度为h[i],要给相邻的两根连线.可以选择拔高其中一部分电线杆,把一根电线杆拔高\(\Delta H\)的 ...

  5. Blocks题解(区间dp)

    Blocks题解 区间dp 阅读体验...https://zybuluo.com/Junlier/note/1289712 很好的一道区间dp的题目(别问我怎么想到的) dp状态 其实这个题最难的地方 ...

  6. python常用的时间方法

    from time import strftime setTime = strftime("%Y_%m_%d_%H_%M_%S", time.localtime()) // In ...

  7. Codeforces 770C Online Courses In BSU (DFS)

    <题目链接> 题目大意:给定$n$个任务,其中有$m$个主线任务,然后$n$个任务中,每个任务都有可能有一个list,表示完成这个任务之前必须要完成的任务,然后现在让你找出,完成这$m$个 ...

  8. [转]ORACLE优化器RBO与CBO的区别

    RBO和CBO的基本概念 Oracle数据库中的优化器又叫查询优化器(Query Optimizer).它是SQL分析和执行的优化工具,它负责生成.制定SQL的执行计划.Oracle的优化器有两种,基 ...

  9. Windows程序设计--（五）绘图基础

    5.1 GDI的结构 图形设备接口(GDI:Graphics Device Interface)是Windows的子系统,它负责在视讯显示器和打印机上显示图形. 5.2 设备环境 5.2.1 获取设备 ...

  10. 使用grunt0.4进行js代码混淆

    1.grunt是基于node,node需要>=0.8.0的稳定版本(奇数是开发版,偶数是稳定版) 2.安装grunt脚手架 (mac电脑需要权限  在前面加上 sudo) npm install ...