CSS学习总结（1）—

CSS介绍

CSS 指层叠样式表 (Cascading Style Sheets)；样式定义如何显示 HTML 元素；样式通常存储在样式表中；把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题；外部样式表可以极大提高工作效率；外部样式表通常存储在 CSS 文件中；多个样式定义可层叠为一个。

所有的web页面样式都可以（也应该）从HTML文档中分离出来，建立成一个单独的CSS文件再进行引用。

CSS内联

在web文档中直接插入一个CSS是内联样式的使用方法之一。使用内联样式，将CSS应用于单个元素。为了使用内联样式，将CSS属性直接添加到相关标签中。
在HTML页面的标题部分将内部样式定义在<style>元素中>。

<html>
<head>
<meta charset="utf-8">
<title>我的前端学习之路</title>
</head>
<style type="text/css">h1 {color:orange;}
</style>
<body><h1>标题</h1><p style="color:white; background-color:gray;">内联样式</p>
</body>
</html>

外部引用CSS

通过这种方法将所有的CSS样式保存在同一个后缀名为.css的拓展文件中。然后通过html标签<link>在HTML页面的<head>部分将CSS文件引入。
HTML文件

<head>
<meta charset="utf-8">
<title>我的前端学习之路</title>
<link rel="stylesheet" href="web1.css">//引入CSS
</head>
<style type="text/css">h1 {color:orange;}
</style>
<body><h1>标题</h1><p>内联样式</p>

CSS文件

p {color:white;background-color:gray;}

相对路径和绝对路径都可以用来定义CSS文件的href。这里使用的是相对路径，因为CSS文件与HTML文件位于同一目录中。

CSS语法

CSS是由浏览器解释的样式规则,然后应用于文档中相应的元素。样式规则有三个部分：选择器，属性和值。如 h1 { color: pink; }

选择器要指向需要设置样式的HTML元素。
声明块包含一个或多个用分号分隔的声明。
每个声明都包含一个由冒号分隔的属性名称和值。

h2{color: white;background: black;
}

CSS注释

注释用于解释代码，浏览器会自动忽略注释。/* 这是注释 */

h2{color: white;background: black;/*背景是黑色的*/
}

CSS级联

网页的最终外观是不同的样式结合的结果。通过样式的三个主要来源形成一个级联：

由页面的作者创建的CSS样式
浏览器的默认CSS样式
浏览页面的用户自定义CSS样式

CSS继承

继承是指属性在页面中流动的方式。 除非另有定义，子元素通常会采用父元素的特征。

<head>
<meta charset="utf-8">
<title>我的前端学习之路</title>
</head>
<style type="text/css">body {color:orange;}
</style>
<body><h1>标题</h1><p >继承了body的color</p>
</body>

CSS学习总结（1）——基本介绍相关推荐

HTML CSS学习总结
HTML & CSS学习总结本学习总结为学习了HTML与CSS所得到的总结目录 HTML & CSS学习总结 HTML HTML介绍 HTML 标签 HTML 元素 HTML 网页 ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
11个实用的CSS学习工具
为什么80%的码农都做不了架构师?>>> 1. 盒子模型的幻灯片通过3D转换效果产生的互动的幻灯片.按向左或向右箭头键切换,全屏观看会有更好的效果. 2. CSS Diner ...
HTML与CSS学习总结
HTML与CSS学习总结一.HTML总结 1 概念 HTML是HyperText Markup Language的简称,中文名称:超文本标记语言,它是一种用于创建网页的标准标记语言. 标记语言是由 ...
CSS学习教程之简单入门
层叠样式表(Cascading Style Sheet,简称:CSS)是为网页添加样式的代码.本学习教程主要介绍 CSS 的基础知识,并解答类似问题:怎样将文本设置为黑色或红色?怎样将内容显示在屏幕的 ...
HTML+CSS学习笔记(2) - 认识标签（1）转载
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 http://www.cnblogs.com/wanglongshuai/p/5204070.html@ ...
CSS学习笔记（狂神-完整版）
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...

CSS学习总结（1）——基本介绍