前端基础之css

css 层叠样式表 它是用来美化页面的一种语言（可以给一个标签添加多个样式，多层累加）

1.css初识

1. css 有两个部分构成： 选择器 和 一条或多条样式规则，（样式规则需要放在{ }中）
2. css 的作用
   1. 美化界面： 比如：设置标签的文字大小，颜色，字体加粗等
   2. 控制页面布局： 比如： 设置浮动，定位等样式
3. css 基本语法
   1. 选择器（用来选择标签的，选出来以后给标签加样式）{
      样式规则
      }
   2. 样式规则：
      1. 属性名1：属性值1
      2. 属性名2：属性值2
      3. 。。。
   3. css 样式表可以由一个或多个选择器组成

2.css样式表的三种使用方式

1. css 的三种引入方式
   1. 行内式
      1. 直接在标签的style 属性 中添加 css 样式
      2. 优点： 方便、直观、
      3. 缺点： 缺乏可重用性
   2. 内嵌式（内部样式）
      1. 在head 标签内 加入 《style》标签，在《style》标签里面编写 css 代码
      2. 优点：在同一个页面内部使用便于复用与维护
      3. 缺点：在多个页面之间的可重性不高
   3. 外链式
      1. 将css 代码写在一个单独的css文件中，在《head》标签中使用《link》标签直接引入该文件到页面中
      
      3. 优点：使得css样式与html 页面分离，便于整个页面系统的规划和维护，可重用性高。
      4. 缺点：css 代码由于分离到单独的css 文件，容易出现css 代码过于集中，若维护不当则极易造成混乱
2. css 的引入方式心选择
   1. 行内式几乎不用
   2. 内嵌式在学习css样式阶段使用
   3. 外链式在公司开发的阶段使用，可以对css 样式和 html 页面分别进行开发

3.css选择器

1. 定义：css选择器是用来选择标签的，选出来以后给标签加样式
2. css 选择器的种类
   1. 标签选择器
   2. 类选择器
   3. 层级选择器（后代选择器）
   4. id 选择器
   5. 组选择器
   6. 伪类选择器
3. 标签选择器
   1. 根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置
   2. 如 p h a div 等标签
   3. 会覆盖一些其他的设置
4. 类选择器
   1. 根据类名来选择标签，以 . 开头，一个类选择器可应用于多个标签上，一个标签也可以使用多个类选择器，多个类选择器需要使用空格分隔，应用灵活，可复用，是css 中应用最多的一种选择器
   2. . 类名
5. 层级选择器（后代选择器）
   1. 根据层级关系选择后代标签，以选择器1 选择器2 开头，主要应用在标签嵌套的结构中，减少命名。
   2. div p { }
6. id 选择器
   1. 根据id 选择标签 ，以# 开头，元素的id 名称不能重复，所以id 选择器只能对应于页面上的一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器
   2. 注意：虽然给其他标签设置id=’ ’ 也可以设置样式，但不推荐这样做，因为id 是唯一的，以后js通过id只能获取一个唯一的标签对象
7. 组选择器
   1. 根据组合的选择器选择不同的标签，以 ， 分割，如有公共的样式设置，可以使用组选择器
   2. .类名1，.类名2，.类名3{ } .类名1{} .类名2{ } .类名3{ }
8. 伪类选择器
   1. 用于向选择器添加特殊的效果，以 ： 分割开，当用户和网站交互的时候改变显示效果可以使用伪类选择器
   2. .类名1:hover{ }

4.css布局常用样式属性

1. width 设置元素的宽度 with:100px
2. height 设置元素的高度 height:100px
3. background 设置元素的背景颜或者图片，background :gold 设置元素的背景色 background:url（img）no-repeat 不重复显示，拉伸当前显示这个图片
4. botder 设置元素的四周的边框 border:1px soild black 设置元素四周边框是1像素的黑色实线
   1. border_top 设置顶点边框
   2. border_left 设置左边边框
   3. border_right 设置右边框 border_bottom 设置底边框
   4. padding 设置元素包含的内容相关元素边框的距离 也叫内边框 也可以分为四部分
   5. margin 设置元素和外界的的距离，也叫外边距 可为根四部分
   6. float 设置元素浮动 浮动可以让元素排列在一起 浮动分为左浮动 右浮动 float:right

 .d {
             /* background-color:cadetblue;  */
            width: 200px;
            height: 100px;
            background-image: url('image/1.png') ;
           border-top: 5px solid red;
           border-bottom: 5px solid cadetblue;
           border-left:5px solid cyan;
           border-right:5px solid darkslateblue;
            /* 设置浮动 只能设置左浮动和右浮动  设置div在一行可以用浮动*/         
         } 
        .box{
            width:400px;
            height:100px;
            background-color:darkviolet;
            border-top: 4px solid red;
            border-buttom:4px solid red;
            border-lift:4px solid red;
            border-right:4px solid red;
        }
        .box1{float:left; background-color: red;}
        .box2{float:right;background-color:forestgreen}
        .box3{float:left; background-color: rgb(22, 56, 167);}

5.常用文本样式属性

1. color : 设置文字颜色 color: red
2. font-size: 设置文字的大小 font-size:12px
3. font-family:设置文字的字体， font-family:'宋体‘;为避免中文字不兼容，一般写成 英文形式
4. font-weight:设置文字是否加粗 font-weight:bold 设置加粗 font-weight:normal 设置不加粗
5. line-height:设置文字的行高 line-height:23px 表示文字高度加上文字上下的间距是 23 px ,也就是每一行占有的高度为 23px
6. text-decoration:设置文字的下划线 text-decoration:none 将文字下划线去掉
7. text-align: 设置文字的水平对齐方式， text-align:center 设置文字水平居中
8. text-indent :设置文字首字缩进 text-indent;23px 设置文字首行缩进23px

 p{
            /* 设置文字颜色 */
            color:hotpink;
            /* 设置文字大小 */
            font-size:30px;
            /* 设置文字加粗 */
            font-weight:bold;
            /* 设置文字字体 */
            font-family:'Microsoft Yahei';
            /* 给文字设置背景色 */
            background:mediumpurple;
            /* 给文字设置下划线 */
            text-decoration:underline;
            /* 给文字中间加下划线 */
            text-decoration:line-through;
            /* 设置行高 可以让文字垂直居中 */
            line-height:100px;
            /* 设置文字水平布局方式 左对齐 右对齐 居中 */
            text-align:center；
            /* 文字缩进 一个字节30px */
            text-indent:30px;
        

        }
        h3{
            color:lightsalmon;
            /* 文本缩进 */
            text-indent:30px;
        }
        a{
            color:lime;
            /* 去掉下划线 */
            text-decoration:none;
        }

6.css 元素溢出

1. 什么是css 溢出
   1. 当子元素（标签）的尺寸超过父元素（标签）的尺寸时，此时需要设置父元素显示溢出的子元素的方式，设置的法式是通过overflow 属性来完成
2. overflow 的设置项
   1. visible 默认值，显示子标签溢出的部分
   2. hidden 隐藏子标签的溢出的部分
   3. auto 如果子标签溢出，则可以滚动查看其余内容
   4. 进行元素溢出需在父标签选择器上进行

    .b1{
            width:100px;
            height:100px;
            background:red;
            /* 设置元素溢出需要在父标签选择器上进行 */
            /* 超出部分隐藏 */
            overflow: hidden;
            /* 元素显示 默认为超出部分显示 */
            overflow: visible;
            /* 超出部分滚动显示 */
            overflow: auto;
        }
        .b2{
            width:120px;
            height:10px;
            background:green;
        }

7.css 显示特性

display 属性是用来设置元素的类型及隐藏的 ，常用的属性有：

1. none 元素隐藏且不占位置
2. inline 元素以行内元素显示(与其他元素在同一行显示)
3. block 元素以块元素显示（独占一行，不与其他元素同行）

8.盒子模型

所谓盒子模型就是把HTML页面的元素看做一个矩形盒子，矩形盒子是由内容，边框，内边框，内边距，外边框，外边距 四部分

1. 盒子模型的5种主要样式属性：

   1. width:内容的宽度（不是盒子宽度）
   2. height:内容的高度，（不是盒子的高低）
   3. padding:内边距
   4. border:边框
   5. margin:外边距

2. 盒子的真实尺寸会受到宽度，高度，边框，内边距四个属性的影响，不会受到外边距属性的影响

3. 盒子的真实尺寸

   1. 盒子宽度：width+paddding上下+border左右
   2. 盒子高度：height+padding上下+border上下

---

• 我是世界上眼光最好的人，因为我看上了你