**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. JavaScript.convertArray

    function convertArray(nodeList){     var arr = []     if(Array.prototype.slice){         arr = [].sl ...

  2. jquery的扩展，及编辑插件的书写格式

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. PHP中redis加锁和解锁的简单实现

    背景说明 在程序开发过程中,通常会遇到需要独占式的访问一些资源的情形,比如商品秒杀时扣减库存.这时就需要对资源加锁.实现锁的方式有很多,比如数据库锁.文件锁等等.本文简单介绍PHP中使用redis来实 ...

  4. fputc, fputs, putc, putchar, puts - 输出字符和字符串

    总览 (SYNOPSIS) #include <stdio.h> int fputc(int c, FILE *stream); int fputs(const char *s, FILE ...

  5. Linux ssh黄金参数

    Linux ssh黄金参数 命令: -o ConnectionAttempts= -o PasswordAuthentication=no -o StrictHostKeyChecking=no cp ...

  6. Linux 下源码安装ngnix

    版本说明: NGINX 版本1.12.0 pcre-8.40 zlib-1.2.11 openssl-1.1.0i   安装过程 # ./configure  --prefix=/usr/ngnix  ...

  7. 线程安全与非线程安全集合说一下，底层怎么实现的（hashmap，concurrenthashmap）

    Hashmap本质是数组加链表.根据key取得hash值,然后计算出数组下标,如果多个key对应到同一个下标,就用链表串起来,新插入的在前面. ConcurrentHashMap:在hashMap的基 ...

  8. MongoDB 存储引擎选择

    MongoDB存储引擎选择 MongoDB存储引擎构架 插件式存储引擎, MongoDB 3.0引入了插件式存储引擎API,为第三方的存储引擎厂商加入MongoDB提供了方便,这一变化无疑参考了MyS ...

  9. C++ KMP文本匹配

    代码如下: 环境为VC #include <iostream> #include <algorithm> #include <string> #include &l ...

  10. MinMax 容斥 学习笔记

    基本形式 \[ \max(S) = \sum_{T\subseteq S, T \neq \varnothing} (-1)^{|T|-1}\min(T) \] 证明 不提供数学证明. 简要讲一下抽象 ...