初识CSS

初识CSS

网页三层结构

结构层：html

样式层：css

行为层：js

什么是css？

HTML： HyperText Markup Language

层叠样式表：Cascading Style Sheet 层叠样式表

css作用：美化标签、布局

写css的三个地方

1. 外部引入（引入到head标签中）-----用link引入-----工作中常用
2. 内部引入-----在head中创建style标签，吧样式写到style标签中
3. 行内样式------把样式写在开始标签的style属性中

css的基本语法

css=选择器+属性（样式）

选择器

四种基本选择器

1. ID选择器 100
2. class选择器 10
3. 标签选择器------选中所有的标签 1
4. 通配符选择器–*选中页面所有 标签--------0### 复合选择器

复合选择器

• 交集选择器，前后位置不能变
• 并集选择器（分组选择器），同时选中多个选择器
• 后代选择器

伪类选择器

• ：hover：鼠标放上去的状态
• ：visited：浏览过的
• ：active：被点击的状态
• ：focus：获取焦点
• ：selection：选中状态

关于文字和文本属性

    font-size 
    font-weight 
    font-family 
    font-style
    color
    text-decoration 
    text-indent
    text-align
    line-height

标签的分类

块级标签：独占一行

行内标签：并排显示

行内块标签：并排显示

	想让块级标签可以并排显示。就可以使用浮动，使用浮动就可以让块级标签并排显示了。
	浮动的作用：让块级元素可以并排显示。

	标准文档流：默认情况下块级标签独占一行，行内标签并排显示，满一行自动换行，这种模式叫标准文档流。当有了浮动，浮动就脱离了标准文档流，也就是说标准文档流中的有一些规则就不再适用。
	 浮动元素并没有完全脱离标准文档流，仅仅半脱离。

浮动

    标准文档流是指：块级标签独占一行，行级标签并排显示，满一行自动换行。
    好处：让块给元素并排。

    flex布局，在flex布局中不需要浮动。webapp用的最多的是flex布局。

    浮动的块级元素具有包裹性：宽度尽可能小，最终仅仅是内容的宽度。
        前提是：
            块级元素
            没有指定宽度和高度
            浮动了 
 浮动可以让行内标签变成块级标签，说白了，一个行内标签浮动了，那么它就成了块级标签，也就是可以设置宽度和高度了。

在一个父元素中，如果这个父元素没有设置高度，它里面的子元素都浮动了，那么这个父元素的高度和塌陷的，也就是说高度变成了0.

    也是浮动造成影响，它影响的是父元素的高度。

    如何解决高度塌陷（如何清除浮动元素对父元素造成影响）：
        1，给父元素加高度，加高法
        2，给父元素加上一个overlflow:hidden

    overflow: hidden;本职不是用来清除浮动的，本职工作是用来处理溢出。

    浮动的元素是半脱离标准文档流，如果前面的元素浮动了，后面的元素就是向上移动，如果后面的元素中有文字，文字会围绕着浮动的元素，也叫字围效果。

    如果完全脱离，是不会有字围效果的，也就是说，浮动仅仅是半脱离标准文档流。

注意：

display: block可以 把行内变成块

float也可以把行内变成块

CSS继承性和层叠性

继承性：font- text- color line-height
层叠性：
行内>内部=外部（就近原则）
ID>CLASS>P
自已有的>继承的
权重 ID 100 CLASS 10 P 1
书写顺序 后面的>前面的

边框

边框分四个方向
        border-top 
        border-right
        border-bottom
        border-left
    边框分边框粗细，样式，颜色
        border-top-style  border-top-color  border-top-xxx 

        solid 实线  dashed 虚线  dotted 点画线

垂直外边距的重叠

在网页中垂直方向相邻的外边距会发生重叠
所谓的外边距重叠是指兄弟元素之间的相邻外边距会取编剧的最大值，而不是求和
 如果父子元素的垂直外边距相邻，则子元素的外边距会设置给父元素
	解决办法
		使用一个方法，把父子想用的上边距划分开
1. father{
    padding-top:1px
}
2.father{
   border-top:1px red solid
}
		

padding内边距

  padding表示内边距，也叫补白，是指内容与边框之间的距离。

    padding: 10px; padding后面跟一个值，表示上，下，左，右都是10px.
    二个值
    三个值
    四个值
    和margin一样。

    padding的应用场景：
        1，一行文字下面有一个边框，文字与边框之间的距离就可以使用padding

盒子模型

    什么是盒子模型？
        只要是一个标签，这个标签就是盒子。通常对于一个盒子可以通过6大属性来设置

    6大属性：
        内容的宽高：width 和 height 
        内边距（补白） padding  分四个方向  指内容与边框之间的距离 
        边框: border   border:1px solid red;   border-top:1px solid red; 
        外边距：margin 分四个方向  水平居中