css基础知识

最新推荐文章于 2022-07-29 23:59:40 发布

July-Mao

最新推荐文章于 2022-07-29 23:59:40 发布

阅读量266

点赞数

分类专栏： python html 文章标签： css

本文链接：https://blog.csdn.net/mf_happying/article/details/78994627

版权

python 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

一.css的引入方式
方式一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: rebeccapurple;
            background-color:gray;
        }
    </style>
</head>
<body>
<div>hello world</div>
</body>
</html>

方式二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p style="color: rebeccapurple">hello world</p>
</body>
</html>

方式三：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="css.css">
</head>
<body>
<div>hello world</div>
</body>
</html>

新建一个css.css文件
这里写图片描述

方式四：不推荐使用–html文件全部读完才给加载css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "css.css";
    </style>
</head>
<body>
<div>hello world</div>
</body>
</html>

二.css选择器
1.通用选择器 * —匹配任何元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            color: gray;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
<div>hello div</div>
<p>hello p</p>
</body>
</html>

2.标签选择器–根据标签名加载样式，例如p{}，div{}

<style>
        p{
            color: gray;
            background-color: rebeccapurple;
        }
    </style>

3.根据id值选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            color: gray;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
<div id="div1">hello div1</div>
<p id="div2">hello p</p>
</body>
</html>

4.class选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p1{
            color: gray;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
<div id="div1">hello div1</div>
<p class="p1">hello p1</p>
</body>
</html>

5.组合选择器
1)后代选择器–空格–无论儿子辈还是孙子辈还是更深层次的样式都进行改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*空格--后代选择器，对div下的所有的p标签无论是儿子还是孙子都加样式,*/
        div p{
            color: brown;
        }
        /*后代选择器--#div3下的.p4加样式*/
        #div3 .p4{
            color: rebeccapurple;
        }
    </style>
</head>
<body>
<div id="div1">
    <div class="div2">
       <p class="p1">hello p1</p>
    </div>
    <p class="p2">hello p2</p>
    <p class="p3">hello p3</p>
</div>
<div id="div3">
    <p class="p4">hello p4</p>
</div>
<div id="div4">hello div4</div>

</body>
</html>

尽量少用标签名进行组合选择，通过id或者class标签进行组合更稳妥
2)子代选择器–>–只给儿子辈的添加样式，孙子辈的不改变

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

        #div1>p{
            color: brown;
        }
    </style>
</head>
<body>
<div id="div1">
    <div class="div2">
       <p class="p1">hello p1</p>
    </div>
    <p class="p2">hello p2</p>
    <p class="p3">hello p3</p>
</div>
<div id="div3">
    <p class="p4">hello p4</p>
</div>
<div id="div4">hello div4</div>

</body>
</html>

3)并列选择器–，–不管有没有关系，只改变选择的几个

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

        #div1,.p4{
            color: brown;
        }
    </style>
</head>
<body>
<div id="div1">
    <div class="div2">
       <p class="p1">hello p1</p>
    </div>
    <p class="p2">hello p2</p>
    <p class="p3">hello p3</p>
</div>
<div id="div3">
    <p class="p4">hello p4</p>
</div>
<div id="div4">hello div4</div>

</body>
</html>

4)毗邻选择器–+–只改变同级中紧邻的下一行的标签，上一行的不改变

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

        #div1+p{
            color: brown;
        }
    </style>
</head>
<body>
<p >hello p</p>
<div id="div1">
    <p class="p1">hello p1</p>
</div>
<p class="p2">hello p2</p>
<p class="p3">hello p3</p>
<div id="div3">
    <p class="p4">hello p4</p>
</div>
<div id="div4">hello div4</div>

</body>
</html>

只有hello p2样式改变
6.属性选择器

[id]{}---将属性为id的样式全部改变
[class="div2"]--只改变class为div2的样式
[class ~="div2"]--属性有多个空格分隔的值，其中只要有一个值为div2就将其样式改变              
<div class="div1 div2 div3">
[class ^="div2"]--属性匹配必须以指定值div2开始
[class $="div2"]--属性匹配必须以指定值div2结尾
[class *="div2"]--属性匹配包含div2的

三.伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*链接*/
        a:link{
            color: rebeccapurple;
        }
        /*悬浮*/
        a:hover{
            color: brown;
        }
        /*访问结束*/
        a:visited{
            color: gray;
        }
        /*点击那一刻*/
        a:active{
            color: aqua;
        }

    </style>
</head>
<body>
   <a href="http://www.baidu.com">百度</a>

</body>
</html>

四.before和after用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:after{
            content: "pp";
        }
        p:before{
            content: "haha";
        }

    </style>
</head>
<body>
  <p>hello</p>

</body>
</html>

五.CSS属性–渲染和布局，控制网页数据的表现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <!--颜色--（红，绿，蓝）0-255进行配色-->
  <div style="color:rgb(255,0,0)">hello1</div>
  <!--颜色--（红，绿，蓝，透明度）0-255进行配色-->
  <div style="color:rgba(255,0,0,0.5)">hello2</div>
  <div style="color: brown">hello3</div> 
  <div style="color:#ffffff">hello4</div>
  <!--字体大小-->
  <div style="font-size: 45px">hello5</div>
  <!--字体形式-->
  <div style="font-style: italic">hello6</div>
  <!--字体样式-->
  <div style="font-family: 'Arial Narrow'">hello7</div>
  <!--字体粗细-->
  <div style="font-weight: bolder">hello8</div>
  <!--背景颜色-->
  <div style="background-color: brown">hello9</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     body {
         /*插入图片     */
         /*background-image: url(123.jpg);*/
         /*图片布局repeat-平铺，no-repeat-只要一张图片，repeat-x-沿着x轴平铺，repeat-y-沿着y轴平铺     */
         /*background-repeat:no-repeat;*/
         /*简写如下*/
         background: url(123.jpg) no-repeat 100px 100px bisque;
     }
</style>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-image: url("123.jpg");
            /*图片位置*/
            background-position: center;

        }
        div{
            height:150px;
            width:150px;
            /*边框*/
            border:1px solid red;
        }

    </style>
</head>
<body>
<div>div1</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            /*字体居中，靠右，靠左等横向排列*/
            text-align: center;
            /*文字上下高度*/
            line-height: 200px;
            /*字母间距*/
            letter-spacing: 2px;
            /*单词间距*/
            word-spacing: 10px;
            /*每个单词首字母大写*/
            text-transform: capitalize;

        }

    </style>
</head>
<body>
<p>hello world</p>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-image: url("123.jpg");
            /*图片位置*/
            background-position: center;

        }
        div{
            height:150px;
            width:150px;
            /*边框*/
            border:1px solid red;
        }

    </style>
</head>
<body>
<div>div1</div>

</body>
</html>

六.boder,margin,padding
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*给body设置外边框，能够看见边框，证明body和html不是一层*/
        /*所以要设置margin：0px*/
        body{
            border: dashed 1px purple;
        }
        .div1{
            height:100px;
            width:100px;
            background-color: red;
        }
        .div2{
            height:100px;
            width:100px;
            background-color:green;
        }
        .div3{
            height:200px;
            width:200px;
            background-color:yellow;
        }
    </style>
</head>
<body>
<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>
</body>
</html>

一个元素的宽度的计算=width+2*border+2*padding
七.正常文档流和脱离文档流
display属性可以设置元素为块级标签还是内联标签
none：隐藏标签不在文档流中占位置
block：块级标签
inline：内联标签
inline-block:行内元素（保持块的宽度）
块级标签(独占一行)有哪些

<div> <p> <h1-h6> <ul> <ol>  <dl>

内联标签(只占文本长度)有哪些

<a> <img> <input> <span> <select> <textarea>

正常文档流：将元素(标签)在进行排版布局的时候按照从上到下从左到右的顺序排版的布局流
脱离文档流：将元素从文档流中取出，进行覆盖，其他元素会按照文档流中不存在该元素重新进行布局
脱离正常文档流的操作：
float:浮动（非完全脱离文档流）
position：定位（完全脱离）

例如：div块级标签，在页面中独占一行，自上而下，也就是流，无论多么复杂的布局，如何在一行显示多个div元素，浮动理解为让某个div元素脱离标准文档流，漂浮在标准流之上和标准流不在一个层次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .div1{
            height:100px;
            width:100px;
            background-color: red;

        }
        .div2{
            height:100px;
            width:100px;
            background-color:green;
            float: left;
        }
        .div3{
            height:200px;
            width:200px;
            background-color:yellow;
        }
    </style>
</head>
<body>
<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>
</body>
</html>

执行结果：

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .div1{
            height:100px;
            width:100px;
            background-color: red;
            float: left;
        }
        .div2{
            height:100px;
            width:100px;
            background-color:green;
            float: left;
        }
        .div3{
            height:200px;
            width:200px;
            background-color:yellow;
        }
    </style>
</head>
<body>
<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>
</body>
</html>

执行结果：
这里写图片描述

结论：float，会先判断前一个标签，如果是浮动标签，则跟在后面；如果不是，则保持前面不变，顶上去。假如前一个div元素222是浮动的，如果222的前一个元素111也是浮动的，那么222元素会跟随在上一个元素的后面（如果一行放不下两个元素，则222元素会被挤入下一行）如果111元素是标准文档流中的元素，那么222的相对垂直位置不会改变）也就是222的顶部会和111的底部对齐。
float的本质是文字会被挤出来环绕图形，只是覆盖了背景，所以说float是非完全脱离文档流
清除浮动clear：
none：左右均可浮动
left：元素左边不可以有浮动
right：元素右边不可以有浮动
both：元素两边都不可以有浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .div1{
            height:100px;
            width:100px;
            background-color: red;

        }
        .div2{
            height:100px;
            width:100px;
            background-color:green;
            float: left;
        }
        .div3{
            height:200px;
            width:200px;
            background-color:yellow;
            clear: left;
        }
    </style>
</head>
<body>
<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>
</body>
</html>

结果：
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .outer{
            background: darkorchid;
        }
        .m1{
            height:100px;
            width:200px;
            background-color: red;
            float: left;

        }
        .m2{
            height:100px;
            width:200px;
            background-color:green;
            float: left;
        }
        .b{
            background-color:yellow;

        }
        .clear{
             clear: both;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="m1">menu1</div>
    <div class="m2">menu2</div>
    <!--以上两个元素均浮动出现错乱，必须清除浮动，记住！！-->
    <div class="clear"></div>
</div>
<div class="b">bottom</div>
</body>
</html>

position：
static：默认值，没有特殊定位，遵循正常文档流，top，bottom，right，left均不被应用
absolute:对象脱离正常文档流，使用top，bottom,rigth,left进行绝对定位【在文档中已经不占位置了】
relative：对象遵循正常文档流，使用top，right，bottom，left等属性在正常文档流中偏移位置，层叠通过z-index【元素依然占据文档中原来的位置，只是视觉上相对原来的位置移动了】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }

        .div1{
            height:100px;
            width:100px;
            background-color: red;

        }
        .div2{
            height:100px;
            width:100px;
            background-color:green;
            position: absolute;
        }
        .div3{
            height:200px;
            width:200px;
            background-color: yellow;

        }
        .box{
            position: relative;
        }
    </style>
</head>
<body>

<div class="div1">111</div>
<div class="box">
    <div class="div2">222</div>
</div>
<div class="div3">333</div>
</body>
</html>

执行结果：
这里写图片描述

July-Mao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础知识

一.css的引入方式方式一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ color: rebeccapurple; background-color:gray;
复制链接

扫一扫