**CSS语法**

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素。
```
selector {declaration1; declaration2; ... declarationN }
```
每条声明由一个属性和一个值组成。
属性（property）是样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
```
selector {property: value}
```
例如下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
```
h1 {color:red; font-size:14px;}
```
![](http://upload-images.jianshu.io/upload_images/8373224-3d8a41d3eef71d41.gif?imageMogr2/auto-orient/strip)
 
 
**引入CSS样式**

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

1.外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
```
<head><link rel="stylesheet" type="text/css" href="site.css" /></head>
```
 
2.内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

```
<head>
<style type="text/css">
p {margin-left: 20px;}
body {background-image: url("images/test.gif");}
</style>
</head>
（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）
```
 
3.内联样式由于要将表现和内容混杂在一起，即HTML代码和CSS代码混编，这样会不利于文档结构，并且不容易维护，所以一般不要使用这种方式引入样式。例如改变段落的颜色和左外边距：

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

CSS基础：基础和语法的更多相关文章

  1. 第二部分----CSS的基础语法

    PART-1 CSS的基础常识 一.什么是CSS? W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说 ...

  2. 精通CSS+DIV基础总结(一)

    这段时间学习了玩了DIV+CSS的视频,感觉效率不高.前边的Javascript总结的不好,但是看了后边的JQuery,觉得学习的再多一点,再进行Javascript的总结.DIV+CSS总结,估计会 ...

  3. 【CSS入门基础，有需要的看过来哦】心境，心静，不轻言放弃！---致CSS

    整理一下近一周学习的有关CSS的基础知识笔记: CSS语法必须写在<style>标签中哦~/*注释*/ [CSS常用背景属性]background background-color:背景色 ...

  4. CSS 入门基础

    一.CSS 介绍什么是CSS CSS 指的是层叠样式表(Cascading StyleSheet).在网页制作时采用层叠样式表技术, 可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控 ...

  5. 前端工程师面试问题归纳（一、问答类html/css/js基础）

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  6. .net 开源模板引擎jntemplate 教程：基础篇之语法

    一.基本概念 上一篇我们简单的介绍了jntemplate并写了一个hello world(如果没有看过的,点击查看),本文将继续介绍jntemplate的模板语法. 我们在讲解语法前,首先要了解一下标 ...

  7. 2天驾驭DIV+CSS （基础篇）（转）

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  8. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

  9. 【笔记-前端】div+css排版基础，以及错误记录

    现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...

  10. CSS 设计彻底研究（一）(X)HTML与CSS核心基础

    第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及 ...

随机推荐

  1. Akka（26）： Stream：异常处理-Exception handling

    akka-stream是基于Actor模式的,所以也继承了Actor模式的“坚韧性(resilient)”特点,在任何异常情况下都有某种整体统一的异常处理策略和具体实施方式.在akka-stream的 ...

  2. Spring定时器的使用详解

    写个最简单的demo吧,反正睡前没什么事儿,来祸害一下园子~~虽然我菜,但是我不会承认啊,哈哈哈 明天详细补充点儿吧,很晚了,不睡觉的程序员不是好程序员,我总能给自己找借口~~~ //spring开启 ...

  3. Java并发之线程中断

    前面的几篇文章主要介绍了线程的一些最基本的概念,包括线程的间的冲突及其解决办法,以及线程间的协作机制.本篇主要来学习下Java中对线程中断机制的实现.在我们的程序中经常会有一些不达到目的不会退出的线程 ...

  4. M方法

    ThinkPHP函数详解:M方法 M方法用于实例化一个基础模型类,和D方法的区别在于:1.不需要自定义模型类,减少IO加载,性能较好:2.实例化后只能调用基础模型类(默认是Model类)中的方法:3. ...

  5. js中set和get的用法

    get 语句作为函数绑定在对象的属性上,当访问该属性时调用该函数. set 语法可以将一个函数绑定在当前对象的指定属性上,当那个属性被赋值时,你所绑定的函数就会被调用. eg: var log = [ ...

  6. 通过SQL脚本导入数据到不同数据库避免重复导入三种方式

    前言 无论何种语言,一旦看见代码中有重复性的代码则想到封装来复用,在SQL同样如此,若我们没有界面来维护而且需要经常进行的操作,我们会写脚本避免下次又得重新写一遍,但是这其中就涉及到一个问题,这个问题 ...

  7. Struts2和SpringMVC的区别

    简单谈一下Struts2和SpringMVC的区别,文章有所引用知乎所对应的答案数据,和所查看的其余资料数据,进行一个简单的汇总,后续查看时使用: 知乎解释链接为:https://www.zhihu. ...

  8. 怎样清理c盘垃圾

    休眠文件清理 休眠文件(hiberfil.sys)是,当你的电脑进入休眠状态时,系统临关闭前会将所有内存内容写入hiberfil.sys文件.当你重新打开电脑时,系统在将hiberfil.sys文件内 ...

  9. Python tkinter调整元件在窗口中的位置与几何布局管理

    Tkinter中的GUI总是有一个root窗口,不管你是主动或者别动获得.主窗口就是你的程序开始运行的时候创建的,在主窗口中你通常是放置了你主要的部件.另外,Tkinter脚本可以依据需要创建很多独立 ...

  10. DataGrid 如何得到DataGridRow 和DataGridCell 对象

    第一行为不可编辑  DataGridRow row = (DataGridRow)dataGrid1.ItemContainerGenerator.ContainerFromIndex(0);     ...