html5

css概念

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简
称样式表
CSS文件后缀名为 .css
CSS用于HTML文档中元素样式的定义

CSS和HTML之间的关系
1.HTML用于构建网页的结构
2.CSS用于构建HTML元素的样式
3.HTML是页面的内容组成，CSS是页面的表现

语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

<style>
    h1{
        color: blue;
        font-size: 12px;
    }
</style>

选择器通常是您需要改变样式的 HTML 元素
每条声明由一个属性和一个值组成
属性（property）是您希望设置的样式属性（style attribute）。每
个属性有一个值。属性和值被冒号分开

CSS的引入方式

内联样式（行内样式）
要使用内联样式，你需要在相关的标签内使用样式（style）属性。
Style 属性可以包含任何 CSS 属性

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

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

 

CSS样式表特征

CSS样式表特征
继承性
指被包含在内部的标签可以拥有外部标签的样式，比如：text-、
font-、line-height，但有些属性不能继承，比如：border、
padding、margin

层叠性
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最
后一次设置的属性值。例如对一个站点中的多个页面使用了同一套
CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针
对这些样式单独定义一个样式表应用到页面中。这些后来定义的样
式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设
置的样式效果

优先级
样式定义冲突时，按照不同样式规则的优先级来应用样式
行内样式>内部样式（外部样式）

CSS注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它
CSS注释以 /* 开始, 以 */ 结束,

基础选择器

*{
    margin: 0;
    padding: 0;
}

全局选择器
可以与任何元素匹配，优先级最低，不推荐使用

元素选择器
HTML文档中的元素， p、b、div、a、img、body 等。
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述
“共性”，无法描述某一个元素的“个性”

p{
    font-size:14px;
}

类选择器
规定用圆点 . 来定义，针对你想要的所有标签使用

<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
        width:800px;
}

 ID选择器
针对某一个特定的标签来使用，只能使用一次。 css 中的 ID选择器 以 #
来定义

合并选择器

语法： 选择器1,选择器2,...{ }
作用：提取共同的样式，减少重复代码

选择器的优先级
CSS中,权重用数字衡量
元素选择器的权重为: 1
class选择器的权重为: 10
id选择器的权重为: 100
内联样式的权重为: 1000
优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器

DIV+CSS布局

 

上中下布局