首页 > 其他分享 >CSS

CSS

时间：2022-12-18 12:56:03浏览次数：65  
标签：text 元素 100px height background 选择器 CSS

CSS

  1. css是什么

  2. css怎么用（快速入门）

  3. css选择器（重点+难点）

  4. 美化网页（文字、阴影、超链接、列表、渐变.....）

  5. 盒子模型

  6. 浮动

  7. 定位

  8. 网页动画（特效效果）

1.1、什么是css

Cascading Style Sheet 层叠样式表

CSS：表现（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动....

image-20221106231040204

1.2、发展史

CSS1.0

CSS2.0 DIV( 块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO565·

CSS2.1 浮动，定位

CSS3.0

image-20221107110146407

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    规范，<style> 可以编写css代码，每一个声明，最好使用分号结尾
    语法：
        选择器{
           声明1;
           声明2;
           声明3;
        
        }
​
​
​
-->
    
    <style>
        h1{
            color: darkred;
        }
    </style>
</head>
<body>
​
​
<h1>我是标题</h1>
</body>
</html>

 

css的优势：

  1. 内容和表现分离

  2. 网页结构表现统一，可以实现复用

  3. 样式十分丰富

  4. 建议使用独立于html的css文件

  5. 利用SEO，容易被搜索引擎收录

1.4、css的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
    <style>
        h1{
            color: green;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="index.html">
</head>
<body>
​
<!--优先级:就近原则-->
​
<!--行内样式:在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>
​
</body>
</html>

拓展：外部样式两种写法

  • 链接式：

    html

    <!--外部样式-->
    <link rel="stylesheet" href="index.html">

  • 导入式：

    @import CSS2.1 特有的！

    <!--导入式-->
        <style>
            @import url("style.css");
        </style>

    2、选择器

    作用：选择页面上的某一个元素或者一类元素

    1. 标签选择器 选择一类标签 标签{}

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    ​
        <style>
            h1 {
                color: #5e1919;
                background: #3cbda6;
                border-radius: 24px;
            }
            p{
                font-size: 80px;
            }
        </style>
    </head>
    <body>
    ​
    <h1>学Java</h1>
    <p>听狂神说</p>
    ​
    </body>
    </html>

    1. 类选择器 class 选中所有class属性一致的标签 .类名{}

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*类选择器的格式  .class的名称{}
            好处:可以多个标签归类，是同一个class，可以复用
    ​
            */
            .qinjiang{
                color: #3748ff;
            }
            .kuangshen{
                color: #a24fff;
            }
        </style>
    </head>
    <body>
    ​
    <h1 class="qinjiang">标题1</h1>
    <h1 class="kuangshen">标题2</h1>
    <h1 class="qinjiang">标题3</h1>
    ​
    <p class="qinjiang">P标签</p>
    </body>
    </html>

    1. id选择器 全局唯一！ #id名 {}

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    ​
        <style>
            /*
              id选择器  :id必须保证全局唯一！
              #id名称{}
              不遵循就近原则，固定的
              id选择器》class 选择器 》 标签选择器
            */
            #qinjiang{
                color: #de28db;
            }
        </style>
    </head>
    <body>
    ​
    <h1 id="qinjiang">标题1</h1>
    <h1 class="style1">标题2</h1>
    <h1 class="style1">标题3</h1>
    <h1>标题4</h1>
    <h1>标题5</h1>
    ​
    ​
    </body>
    </html>

    优先级： id >class >标签

2.2、层次选择器

  1. 后代选择器 ：在某个元素的后面 祖爷爷 爷爷 爸爸 你

 /* 后代选择器*/
​
        body p{
            background: red;
        }

  1. 子选择器，一代，儿子（全部）

  /* 子选择器*/
       body>p{
            background: blue;
        }

  1. 兄弟相邻选择器 同辈

/*相邻兄弟选择器: 只有一个 相邻（向下）*/
        .active+p{
            background: #5e1919;
        }

  1. 通用选择器

/* 通用兄弟选择器 当前选中元素的向下所有兄弟*/
        .active~p{
            background: green;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        /* 后代选择器*/

        body p{
            background: red;
        }

        /* 子选择器  一代*/
        body>p{
            background: blue;
        }

        /*相邻兄弟选择器: 只有一个 相邻（向下）*/
        .active+p{
            background: #5e1919;
        }

        /* 通用兄弟选择器 当前选中元素的向下所有兄弟*/
        .active~p{
            background: green;
        }
    </style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>

</ul>
<p class="active">p7</p>
<p>p8</p>

</body>
</html>

2.2、结构伪类选择器

伪类： 条件

p：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


<!--    避免使用，class，id选择器-->
    <style>
        /* ul的第一个子元素*/
        ul li:first-child{
            background: greenyellow;
        }


        /* ul的最后一个子元素*/

        ul li:last-child{
            background: #912b47;
        }

        /*选中p1 : 定位到父元素，选择当前的第一个元素
        选择当前p元素的父级元素，选中父级元素的第一个元素，并且是当前元素才生效！，顺序
        */
        p:nth-child(1){
            background: #2700ff;
        }

        /*选中父元素，下的p元素的第二个*/
        p:nth-of-type(2){
            background: #179110;
        }
        a:hover{
            background: #5e1919;
        }
    </style>
</head>
<body>
<!--<a href="">1213</a>-->
<!--<h1>h1</h1>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        li1
    </li>
    <li>
       li2
    </li>
    <li>
       li3
    </li>

</ul>
<p class="active">p7</p>
<p>p8</p>

</body>
</html>

image-20221108122011922

image-20221108122332258

2.4、属性选择器(常用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #2700ff;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;//
        }

        /*属性名  ，  属性名=属性值（正则）
        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾

        */
        /*存在id属性的元素       a[]{}  */
        /*a[id]{
            background: yellow;
        }*/
        /*a[id=first]{
            background: yellow;
        }*/
        /*class中有links元素*/
        /*a[class*=links]{*/
        /*    background: yellow;*/
        /*}*/

        /*选中href属性中 以http开头*/
        /*a[href^=http]{
            background: yellow;
        }*/
        /*以pdf结尾的*/
        a[href$=pdf]{
            background: yellow;
        }

    </style>


</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links items first" id="first">1</a>
    <a href="" class="links items active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg"class="links item">5</a>
    <a href="abc"class="links item">6</a>
    <a href="/a.pdf"class="links item">7</a>
    <a href="/abc.pdf"class="links item">8</a>
    <a href="abc.doc"class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
=
*=
^=
$=

 

CSS,JS,JQuery,vue

3、美化网页元素

  1. 有效的传递页面信息

  2. 美化网页，页面漂亮才能吸引用户

  3. 凸显页面的主题

  4. 提高用户的体验

 

span标签：重点要突出的字，使用span标签套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎学习<span id="title1">Java</span>
</body>
</html>

3.2、字体样式

<!--
font-family:字体
font-size:字体大小
font-weight:字体粗细
color:字体颜色
-->

<style>
    body{

        font-family: "Arial Black", 楷体;
        color: #5e1919;
    }
    h1{
        font-size: 50px;
    }
    .p1{
        font-weight: bolder;
    }
</style>

 

3.3文本样式

  1. 颜色 color ： rgb rgba

  2. 文本对齐方式 text-align=center 左右居中

  3. 首行缩进 text -indent：2em

  4. 行高 line-height： 单行文字上下居中！ line-height=height

  5. 装饰 text-decoration

  6. 文字图片水平对齐： vertical-align：middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--
     RGB:0~F
     RGBA: A 0~1
     text-align : 排版，居中 左右居中
     text-indent: 段落首行缩进
     行高，和 块的高度一样，就可以上下居中 
  -->
  <style>
    h1{
      color: rgba(0,255,255,0.9);
      text-align: center;
    }
    .p1{
      text-indent: 2em;
    }


    .p3{
      background: #0000FF;
      height: 300px;
      line-height: 300px;
    }

    /*上划线*/
    .l1{
      text-decoration: overline;
    }
    /*中划线*/
    .l2{
      text-decoration: line-through;
    }
    /*下划线*/
    .l3{
      text-decoration: underline;
    }
    /*超链接去下划线*/
    a{
      text-decoration: none;
    }

    /* 水平对齐~ 参照物。 a.b*/
    img,span{
      vertical-align: middle;
    }

  </style>
</head>
<body>

<a href="">123</a>

<p class="l1">1231231</p>
<p class="l2">1231231</p>
<p class="l3">1231231</p>

<h1>故事简介</h1>
<p class="p1">《魁拔》系列书籍影片的核心人物</p>
<p>魁拔是《魁拔》系列书籍影片中的的人物。是一种333年一遇的可怕生物 [2]  。对世界有毁灭之能力，难以战胜。其灵魂不死不灭，肉身死后仍会复活 [4]  。</p>
<p class="p3">
  Few people come into our lives

  　　and make everything shine,

  　　but you're one of those

  　　rare and splendid jewels

  　　who makes the whole world bright.

  　　When I was sad, you made me smile.

  　　When I was alone and blue,

  　　you were there for me,

  　　and you made me feel strong enough
</p>
<p>
  <img src="images/2.png" alt="图片">
  <span>sdasfasfascafafsd</span>
</p>
</body>
</html>

3.6、列表

/*ul li*/
/*
list-style:
   none:去掉圆点
   circle: 空心圆
   decimal: 数字
   square: 正方形

*/

 

#nav{
    width: 500px;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 5em;
    /*上下有点间距*/
    line-height: 35px;
    

}
/*ul li*/
/*
list-style:
   none:去掉圆点
   circle: 空心圆
   decimal: 数字
   square: 正方形

*/
ul li{
    height: 30px;
    list-style: none ;
    background: rgba(157,162,131,0.51);
    line-height: 30px;
    text-indent: 3em;
}

a{
    text-decoration: none;
    font-size: 14px;
    color: #000;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

image-20221114175721116

 

3.7、背景

(1)背景颜色

(2)背景图片 background-image: url("images/1.png");

<style>
    div{
        width: 1000px;
        height: 700px;
        border: 1px solid red;
        background-image: url("images/1.png");
        /*默认是全部平铺的*/
    }
    .div1{
        background-repeat: repeat-x;
    }
    .div2{
        background-repeat: repeat-y;
    }
    .div3{
        background-repeat: no-repeat;
    }
</style>

3.8、渐变

/*background-color: #4158D0;*/
background: linear-gradient(299deg, #4158D0 0%, #C850C0 46%, #e3dccf 100%);

推荐网站：https://www.grabient.com/

image-20221114192002006

 

 

4、盒子模型

4.1、盒子模型

margin:外边距

padding：内边距

border：边框

 

4.2、边框 border 1px red solid

  1. 边框的粗细width

  2. 边框的样式style

  3. 边框的颜色color

 

5、浮动

5.1、标准文档流

image-20221118162805714

块级元素：独占一行

h1~h6  p  div  列表

行内元素：不独占一行

span  a  img  strong

行内元素 可以被包含在 块级元素，反之，则不可以~

5.2、display 

<!--

block 块元素
inline  行内元素
inline-block  是块元素，但是可以内联，在一行
-->
<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: none;
    }
    span{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display:inline-block;
    }
</style>

1、这个也是一种行内元素排列方式，但是我们很多情况都使用float

5.3、float

  1. 左右浮动 float

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;

}
.layer01{
    border: 1px dashed black;
    display: inline-block;
    float: right;
}
.layer02{
    border: 1px dashed black;
    display: inline-block;
    float: right;
}
.layer03{
    border: 1px dashed red;
    display: inline-block;

}
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    
}

image-20221118171549278

5.4、父级边框塌陷问题（笔试必考问题）

clear

/*
clear:right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧都不允许有浮动元素
clear: none;
*/

解决方案；

  1. 增加父级元素高度~

#father{
    border: 1px #000 solid;
    height: 800px;

}

  1. 增加一个空的div标签，清除浮动

<div class="clear"></div>

.clear{
    clear: both;
    margin: 0;/*好像没什么影响*//*标准的写法*/
    padding: 0;/*好像没什么影响*//*标准的写法*/
}

  1. overflow

在父级元素中增加一个overflow：hidden
                           auto
                           scroll

  1. 父类添加一个伪类 ：after

#father:after{
    content: '';
    display: block;
    clear: both;
}

 

小结：

  1. 浮动元素后面增加空div

简单，代码中尽量避免空的div

  1. 设置父元素的高度

简单，元素假设有了固定高度，就会被限制

  1. overflow

简单，假设用了hidden，假设超出去，宁愿被切掉，也不愿意设置滚动条（下拉的场景避免使用）

  1. 父类添加一个伪类 ：after（推荐使用）

写法稍微复杂一点，但是没有副作用，推荐使用

5.5、对比

  • display ：inline-block

方向不可以控制

  • float

    浮动起来的话会脱离标准文档，所以要解决父级边框塌陷问题

div{
    margin: 10px;
    padding: 5px;
}
/*#father{
    border: 1px #000 solid;
    !* 1111 *!
    !*height: 800px;*!
}*/
#father{
    border: 1px #000 solid;
    /* 3333 */
    /*overflow: scroll;*/
}
/*
clear:right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧都不允许有浮动元素
clear: none;
*/
/* 4444 */
/*#father:after{
    content: '';
    display: block;
    clear: both;
}*/
.layer01{
    border: 1px dashed black;
    display: inline-block;
    float: right;
}
.layer02{
    border: 1px dashed black;
    display: inline-block;
    float: right;
}

.layer03{
    border: 1px dashed red;
    display: inline-block;

}
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
}

.layer05{
    display: inline-block;
}
/* 2222 */
/*.clear{
    clear: both;
    margin: 0;
    padding: 0;
}*/

image-20221118194200349

 

6、定位

真的是 反人类设计啊~~

position : relative
left:-100 /*向左偏移*/
left:100  /*向右偏移*/

/*总之负数就同方向偏移*/

 

6.1、相对定位

相对定位：position：relative

相对于原来的位置，进行指定的偏移，相对定位的话，它人让在标准文档流，原来的位置会被保留

联系题：链接卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
​
        .nav-a{
            width: 300px;
            height: 300px;
            border: 1px red solid;
            padding: 5px;
​
        }
        .nav-a1{
            width: 100px;
            height: 100px;
            background: #C850C0;
            line-height: 100px;
            color: white;
            text-align: center;
            display: inline-block;
        }
        .nav-a2{
            width: 100px;
            height: 100px;
            background: #C850C0;
            display: inline-block;
            position: relative;
            right: -100px;
            line-height: 100px;
            color: white;
            text-align: center;
        }
        .nav-a3{
            width: 100px;
            height: 100px;
            background: #C850C0;
            display: inline-block;
            position: relative;
            right: -100px;
            line-height: 100px;
            color: white;
            text-align: center;
        }
        .nav-a4{
            width: 100px;
            height: 100px;
            background: #C850C0;
            display: inline-block;
            position: relative;
            left: -100px;
            bottom: -100px;
            line-height: 100px;
            color: white;
            text-align: center;
        }
        .nav-a5{
            width: 100px;
            height: 100px;
            background: #e398dd;
            display: inline-block;
            position: relative;
            left: 200px;
            line-height: 100px;
            color: white;
            text-align: center;
        }
​
        .nav-a div:hover{
            background-color: blue;
        }
​
    </style>
</head>
<body>
​
<div class="nav-a">
    <div class="nav-a1"><a href="">链接1</a></div>
    <div class="nav-a2"><a href="">链接2</a></div>
    <div class="nav-a3"><a href="">链接3</a></div>
    <div class="nav-a4"><a href="">链接4</a></div>
    <div class="nav-a5"><a href="">链接5</a></div>
​
</div>
</body>
</html>

6.2、绝对定位

定位：基于xxx定位，上下左右

  1. 没有父级元素定位的前提下，相对于浏览器定位

  2. 假设父级元素存在定位，我们通常会相对于父级元素进行偏移~~（子绝父相）

  3. 在父级元素范围内移动

    相对于父级或者浏览器的位置移动，进行指定偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

6.4、z-index

image-20221120104517359

图层~

z-index：默认是0，最高无限~999

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
​
<div id="content">
    <ul>
        <li><img src="images/5.jpg" alt=""></li>
        <li class="tipText">学习微服务，找火龙</li>
        <li class="tipBg"></li>
        <li>时间: 2099-1-1</li>
        <li>地点: 月球一号基地</li>
    </ul>
</div>
</body>
</html>

opacity:0.5 /背景透明度/

#content{
    width: 900px;
    padding: 0px;
    margin: 0px;/*可以让它置顶*/
    overflow: hidden;
​
    font-size: 28px;
    line-height: 31px;
​
    border: 1px solid #000;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;/*去圆点*/
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 910px;
    height: 31px;
    top: 558px;
}
.tipText{
    color: white;
    z-index: 999;
}
.tipBg{
    background: #000;
    opacity: 0.5;
    /*IE8以及更早的版本支持替代，建议上面下面 都写上！*/
    filter: alpha(opacity=50);
}

标签：text,元素,100px,height,background,选择器,CSS
From： https://www.cnblogs.com/yqstudy8/p/16990200.html

相关文章

  • 现代 CSS 高阶技巧，不规则边框解决方案
    本文是CSSHoudini之CSSPaintingAPI系列第四篇。现代CSS之高阶图片渐隐消失术现代CSS高阶技巧，像Canvas一样自由绘图构建样式！现代CSS高阶技巧，完美的波浪......
  • js 和 css 是如何影响DOM树构建的？
    大家好，我是coderBinjs和css是如何影响DOM树构建的？先做个总结，然后再进行具体的分析：CSS不会阻塞DOM的解析，但是会影响JAVAScript的运行，javaSscript会阻止DOM树的解析，最终......
  • css2
    用了次html写笔记很让我emo我还是用回md吧有出错的「地方」，我会即使改正的emmetCSS的复合选择器CSS的元素显示模式CSS的背景1.Emmet语法简介Emmet插......
  • Vue 中实现全局引入 scss 变量
    导读最终实现的效果是：在vue文件的style标签中以及其它scss文件中都可以直接使用全局配置的scss变量，不需要再导入对应的scss文件。目录结构src│App.vue│......
  • css样式补充，项目前置认知，精灵图，背景图片大小，阴影，过渡，SEO简介
    1、css样式补充，项目前置认知，字体图标学习目标：u能够在网页中使用精灵图u能够使用背景大小属性，设置背景图片的大小u能够认识CSS书写顺序，提高代码专业性和浏览器渲......
  • HTML内嵌CSS让三个DIV并列在一行中
    DIV内嵌CSS：<divstyle="width:98%;margin:auto;"><divstyle="width:30%;height:300px;background-color:rgb(145,176,145);float:left;">111</div><divsty......
  • CSS3 上传图片虚线边框
    .upload-area{margin-top:1.25rem;border:none;background-image:url("data:image/svg+xml,%3csvgwidth='100%25'height='100%25'xmlns='http://www.w3.o......
  • CSS单行／多行文本溢出隐藏
    前言在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号对于文本的溢......
  • HTML5&CSS3.0基础部分目录-xyphf
    [置顶]​​CSS3.0入门笔记​​[置顶]​​animate.css动画库使用方法介绍​​[置顶]​​聊一聊HTML5的表单，话说这些表单你都用过吗？​​[置顶]​​聊一聊HTML5存储......
  • reset.css 2022
    /***ThenewCSSreset-version1.7.3(lastupdated7.8.2022)GitHubpage:https://github.com/elad2412/the-new-css-reset***//*Removeallthe......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99