css基础概述

css :cascading Style sheets 层叠样式表

　　是用于控制页面布局和样式的

css好处:功能强大,将html页面和样式进行分离

　　降低耦合度,开发效率更高

 

css和htnl使用

　　1内联样式<div  style = "color="red"></div> //不推荐

　　2内部样式 --较为常用

　　　　<style>

　　　　　　　　div{

　　　　color:red;

　　　　　　　　　　}

　　　　</style>

　　　　<div><div>

　　外部样式

　　在head标签定义link属性

　　　　<link rel="stylesheet" href="css/a.css">

　　css选择器 语法

　　　　　　　选择器 {

　　　　　　　　属性名1:属性值1

　　　　　　　　属性名2:属性值2　　

　　　　　　}

　　　　什么是选择器:是筛选具有相同特征的元素

　　选择器分类

　　　　　　基础选择器

　　　　　　　　1类选择器

　　　　　　　　　　.类名 {}

　　　　　　　　2id选择器

　　　　　　　　　　#选择器名{}

　　　　　　　　3元素选择器器

　　　　　　　　　　元素名{}

　　　　　　　　4并集选择器

　　　　　　　　选择器1,选择器2....{}

　　　　扩展选择器

　　　　　　选择所有元素

　　　　　　　　*{}

　　　　　　后代选择器

　　　　　　　　选择器1 选择器2{}

　　　　　　子选择器

　　　　　　　　选择器1>选择器2{

　　　　　　　　}

　　　　　　属性选择器

　　　　　　　　元素名称[属性名=属性值]{}

　　　　　　伪类选择器

　　　　　　　　元素:元素状态 {}

　　　　　　　　a:link{}

 

 

　　　　属性:

　　　　　　字体文本

　　　　　　　　font-size

　　　　　　　　color:文本

　　　　　　　　algin:对齐方式

　　　　　　　　line-height 行高

　　　　　　背景

　　　　　　background

　　　　　　边框

　　　　　　　　boder

　　　　　　尺寸

　　　　　　　　width 宽度

　　　　　　　　height 高度

　　　　　　盒子模型:

　　　　　　　　mangin 外边距

　　　　　　　　padding 内边距

 　　　　　　　　box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小

　　　　　　　　float 浮动

　　　　　　　　　　left 左浮动

　　　　　　　　　　right:右浮动