css基础

css

• 概述：Cascading Style Sheets : 层叠样式表
• 主要用作用:

​ 用来美化我们的HTML页面的

​ HTML 决定网页的骨架 ,CSS 化妆

​ 将页面的HTML和美化进行分离

• 简单语法：

<style>
  选择器{
    属性名称:属性的值;
    属性名称2: 属性的值2;
  }
</style>

CSS选择器: 帮助我们找到我们要修饰的标签或者元素

• 元素选择:

元素的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

• ID选择器:

以#号开头  ID在整个页面中必须是唯一的s
#ID的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

• 类选择器:

以 . 开头 
.类的名称{
   属性名称:属性的值;
  	属性名称:属性的值;
}

• CSS的引入方式:

​ 外部样式: 通过link标签引入一个外部的css文件

​ 内部样式: 直接在style标签内编写CSS代码

​ 行内样式: 直接在标签中添加一个style属性, 编写CSS样式

• CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间

float属性:
left
right
				
clear属性: 清除浮动
both : 两边都不允许浮动
left: 左边不允许浮动
right : 右边不允许浮动
流式布局

CSS的优先级

按照选择器搜索精确度来编写:
行内样式 > ID选择器 > 类选择器 > 元素选择
就近原则: 哪个离得近,就选用哪个的样式

CSS: 层叠样式表

主要作用:

1. 美化页面
2. 将页面美化和HTML代码进行分离,提高代码的服用型

• 选择器:

  • 元素选择器: 标签的名称{}
  • 类选择器: 以. 开头 .类的名称
  • ID选择器: 以#开头 , #ID的名称 (ID必须是页面上面唯一)

• CSS浮动:

  • float : left, right 不再占有正常文档流中的空间 , 流式布局

  • clear : both left right

• CSS中的其它选择器

  • 选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}

  • 属性选择器:

    a[title]
    a[titile='aaa']
    a[href][title]
    a[href][title='aaa']
    

• 后代选择器: 爷爷选择器 孙子选择器 找出所有的后代

• 子元素选择器: 父选择器 > 儿子选择器

• 伪类选择器: 通常都是用在A标签

CSS的盒子模型:万物皆盒子

• 内边距:

padding-top:

padding-right:

padding-bottom:

padding-left:

padding:10px;  上下左右都是10px
padding:10px 20px;  上下是10px 左右是20px
padding: 10px 20px 30px;  上 10px 右20px  下30px  左20px
padding: 10px 20px 30px 40px;  上右下左, 顺时针的方向

• 外边距:

margin-top:

margin-right:

margin-bottom:

margin-left:

• CSS绝对定位:

​ position: absolute

​ top: 控制距离顶部的位置

​ left: 控制距离左边的位置