前端笔记2 CSS

如何学习css

css 就是给HTML添加样式的，让他变得更好看

1. 先学习如何查找标签通过选择器
2. 在学习css的相关属性

注释语法 /* 需要注释的内容 */

语法结构：

css的三种引入方式

　　1.style 内部标签直接书写

　　2.link标签引入外部css文件（最正规，HTML，css，js全部分开，解耦合）

rel="stylesheet" href="mycss.css">

　　3.行内式

在标签的内部直接书写（只是临时用）


    style="color:red">
        老板好，要洗脚吗

选择器：

1. 基本选择器（重要）

　　id选择器　　　　　　在style标签下，#起手+id值（用的多）
        class选择器　　　　 .（这是个点）起手，加类名　　　　　　　（用的多）
        元素/标签选择器　　标签名起手，加{}，
        通用选择器　　　　　*起手，基本不用


    
    Title
    


    div
        我在div里面
        我在span里面
    
    ppp
    span111
    span22




    
    Title
    


    div
        我在div里面
        我在span里面
    
    ppp
    span111
    span22




    
    Title
    


    div
        我在div里面
        我在span里面
    
    ppp
    span111
    span22




    
    Title
    


    div
        我在div里面
        我在span里面
    
    ppp
    span111
    span22

2. 属性选择器

　　　　以中括号[ ]起手的作为标志的

　　　　1.含有某个属性

　　　　2.含有某个属性并且含有某个值

　　　　3.含有某个属性并且含有某个值的某个标签




    
    Title
    


    
    
    
     杰森老师
    凯文老师

3. 伪类选择器

# 针对的是a标签




    
    Title
    


这是妹子图
这里不写就是换行

4. 伪元素选择器

befor 和 after 通常是用来清除浮动带来的影响：父标签塌陷的问题




    
    Title
    


    我是P标签

选择器优先级

1.在选择器相同的情况下，

　　就近原则，谁离的近，听谁的，行内式选择器有限期最高

2.在选择器不同的情况下

　　行内式 > id选择器 > class类选择器 > 标签选择器

　　精度越高越有效

设置长宽

块级元素内，可以设置长宽

行内元素内，不能设置长宽

eg：




    
    Title
    


块级标签
行内标签

字体属性




    
    Title
    


块级标签
行内标签

文字属性




    
    Title
    


块级标签
行内标签

背景属性

背景图片




    
    Title
    


    
        呵呵哈哈哈

边框




    
    Title
    



    啊啊啊啊啊啊啊啊


    采菊东篱下，悠然见南山

display属性




    
    Title
    


      /*既隐藏又占位置*/
        哦吼是啥是
    
    
        采菊东篱下，悠然见南山
    
    
        床前明月光，疑是地上霜
    
    
        举头望明月
    
    
        低头思故乡

盒子模型

以快递盒为例（2个盒子套一起）

　　快递盒与快递盒之间的距离（标签与标签之间的距离 margin 外边距）

　　盒子的厚度（标签的边框 border）

　　盒子里面物体到盒子的距离（内容到边框的距离 padding 内边距）

　　物体的大小（内容 content）

　　如果要调整标签与标签之间的距离，就可以直接调整margin

　　浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会线将body的margin去除（在style中，body为对象使用margin参数）

浮动

页面的最表是三位的，浮动的元素没有块级一说，浮动的元素再Z轴上，原本多大，浮动起来就占多大

设计页面时，一般先用浮动占了位置提前规划好

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #d1 {
            height: 200px;
            width: 200px;
            background-color: orange;
            float:left      /*浮动  浮动左边*/
        }
        #d2 {
            height: 200px;
            width: 200px;
            background-color: blue;
            float: right;  /*浮动  浮动右边*/
        }
    style>
head>
<body>
<div id="d1">div>
<div id="d2">div>
body>
html>

解决塌陷问题的固定模板（重要）

只需要在head标签内，提前写好一个伪类选择器.clearfix，哪个元素他先，就把他的class=clearfix 就可以解决

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #d1 {
            border: 3px solid black;
        }
        #d2 {
            height: 200px;
            width: 200px;
            background-color: blue;
            float: left;  /*浮动  浮动左边*/
        }
        #d3 {
            height: 200px;
            width: 200px;
            background-color: green;
            float: left;  /*浮动  浮动左边*/
        }
        .clearfix:after {   /*清楚浮动的固定模板的伪元素选择器*/
            content: '';
            display: block;
            clear: both;
        }
    style>
head>
<body>
<div id="d1" class="clearfix">
    <div id="d2">div>
    <div id="d3">div>
div>
body>
html>

溢出属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        p {
            height: 100px;
            width: 100px;
            background-color: green;
            border: 3px solid red;
            /*overflow: hidden; !* 溢出部分直接隐藏 *!*/
            /*overflow: visible; !* 溢出部分还是展示，太丑了不用，默认就是这样 *!*/
            overflow: scroll; /* 以滚动条的形式展出*/
            /*overflow: auto;  !* 上下左右2个滚动条 *!*/
        }
    style>

head>
<body>
<p>采菊东篱下youren jianna采菊东篱下采菊东篱下采菊东篱下采菊东篱下采菊东篱下采菊东篱下采菊东篱下采菊东篱下采菊东篱下p>
body>
html>

制作圆形头像

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        * {
            background-color: pink;
        }
        div {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 2px solid red;
            margin: 0 auto;
            overflow: hidden;
        }
        div img{
            width: 100%; /*是父标签宽度的100%*/
        }
    style>

head>
<body>
<div>
    <img src="12111.png" alt="">
div>
body>
html>

定位

静态：所有的标签都是静态static的，无法改变位置

相对定位（了解）：相对于标签原来的位置，做移动 relative

绝对定位（常用）：相对于已经定位过的父标签，做移动（如果没有父标签，那么就以body做参照）eg：相对小米网站购物车

当你不知道页面其他元素的定位和参数时，让你给予改标签做定位，这时候用绝对定位

固定定位（常用）：相对于浏览器窗口固定在某个位置 eg：右侧小广告

绝对定位
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #d1 {
            height: 50px;
            width: 50px;
            border: 2px solid blue;
            position: relative;/*设置了position，说明已经是被定位过了，可以其他标签做绝对定位*/
        }
        #d2 {
            height: 100px;
            width: 100px;
            background-color: red;
            position: absolute;/*基于已经定位过的父标签来进行绝对定位*/
            left: 50px;
            top:50px;
        }
    style>
head>
<body>
<div>
    <div id="d1">
        <div id="d2">

        div>

    div>
div>
body>
html>

绝对定位
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #d1 {
            bottom: 10px; 
            position: fixed; /*是根据浏览器，固定在浏览器的固定位置*/
        }

    style>
head>
<body>
<div id="d1">
    回到顶部
div>
body>
html>

浮动和定位是否脱离文档流（原来的位置是否保留）

不脱离文档流：相对定位

脱离文档流：浮动，绝对定位，固定定位

z-index模态框

eg：百度的登录页面，点击了登录之后，3层结构（最底部，黑色透明去，登录框）

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body {
            margin: 0;
        }
        .cover {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.1);
            z-index: 10;
        }
        .modal {
            background-color: white;
            width: 200px;
            height: 200px;
            left: 50%;
            top: 50%;
            position: fixed;
            z-index: 20;
            margin-left: -100px;
            margin-top: -100px;
        }

    style>
head>
<body>
<div>我在最底层div>
<div class="cover">div>
<div class="modal">
    <h1>登录页面h1>
    <p> username
        <input type="text">
    p>
    <p> password
        <input type="password">
    p>
div>

body>
html>