CSS学习笔记

2年前•随笔

947 0

1.我的第一个CSS程序

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>1.我的第一个CSS程序</title>
    <!-- 规范，style 可以编写CSS代码
    语法 ：
        选择器{
            声明1;
            声明2;
            声明3;
        }
    -->
    <style>
        h1{
            color: blue;
        }
    </style>
</head>
<body>
    <h1>我是标题</h1>
</body>
</html>

2.CSS的四种导入方式

style.css 文件内容

h3{
    color: aqua;
}

html 文件内容

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>2.四种CSS导入方式</title>
    
    <!-- 内部样式表  使用 style 标签开始 然后选择选择器-->
    <style>
        h2{
            color: red;
        }
    </style>
    
    <!-- 外部样式表 引入外部 style.css 文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 行内样式表，在标签中直接使用 style 属性 -->
    <h1 style="color: blue;">行内样式表</h1>
    
    <!-- 内部样式表 -->
    <h2>内部样式表</h2>
    
    <!-- 外部样式表 -->
    <h3>外部样式表</h3>
</body>
</html>

扩展：外部样式两种写法

链接式

<!-- 外部样式表 引入外部 style.css 文件 -->
<link rel="stylesheet" href="style.css">

导入式（已过时）

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

3.三种基本选择器

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>3.三种基本选择器</title>
    <style>
        /* 标签选择器 会选择该标签的所有内容*/
        p{
            color: blue;
        }
        
        /* 类选择器的格式 .class 的名称 
        好处： 可以多个标签复用
        */
        .lei{
            color: red;
        }
        
        /* ID选择器  : ID必须保证全局唯一
             #ID名称{}
             不遵循就近原则
             优先级：
             ID > 类选择器 > 标签选择器
        */
        #xin{
            color: green;
        }
    </style>
</head>
<body>
    <p>标签选择器</p>
    <p class="lei">类选择器</p>
    <p id="xin">ID选择器</p>
</body>
</html>

总结：

标签选择器：选择一类标签例如：p{}
类选择器 class ：选择所有class属性一致的标签，跨标签例如：.lei{}
ID选择器：全局唯一 #id名{}

优先级：ID > 类选择器 > 标签选择器

4.层次选择器

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>4.层次选择器</title>
    <style>
        /* 后代选择器 : 在某个元素的后面*/
        body p{
            background: red;
        }
        
        /* 子选择器 :只有一代*/
        body>p{
            background: green;
        }
        
        /* 相邻兄弟选择器 只有一个向下,相邻(向下)*/
        .active + p{
            background: blue;
        }
        
        /* 通用选择器,当前选择元素向下的所有兄弟元素 */
        .active~p{
            font-size: 24px;
        }
    </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>p7</p>
</body>
</html>

5.结构伪类选择器

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>5.结构伪类选择器</title>
    <style>
        /* ul 的第一个子元素 */
        ul li:first-child{
            background: red;
        }
        
        /* ul 的最后一个子元素 */
        ul li:last-child{
            background: green;
        }
        
        /* 选中 p1 : 定位到父元素,选择当前的第一个元素 
        选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效
        */
        p:nth-child(1){
            background: blue;
        }
        
        /* 选中p2 */
        p:nth-child(2){
            background: blueviolet;
        }
        
        /* 选中父元素,下的p元素的第三个类型,此处以p3举例 */
        p:nth-of-type(3){
            background: yellowgreen;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>
</html>

6.属性选择器（重要）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>6.属性选择器(重要)</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: aqua;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        
        /* 属性名, 属性名 = 属性值(正则)
         = 绝对等于
         *= 包含
         ^= 以这个开头
         $= 以这个结尾
         */
        /* 存在ID属性的元素 ,a[]{} */
        a[id]{
            background: red;
        }
        
        /* a 标签下,ID = two 的元素 */
        a[id=two]{
            background: yellow;
        }
        
        /* class 中有 links 的元素 */
        a[class*="links"]{
            background: blueviolet;
        }
        
        /* 选中herf中以http开头的元素 */
        a[href^="http"]{
            background: green;
        }
    </style>
</head>
<body>
    <p class="demo">
        <a href="https://www.5iv.top" class="links team">1</a>
        <a href="" class="links">2</a>
        <a href="dasa" class="links team">3</a>
        <a href="fsf.jh" id="one" class="links team">4</a>
        <a href="dasas">5</a>
        <a href="fsad" id="two">6</a>
        <a href="ryt">7</a>
        <a href="bgf" class="links">8</a>
        <a href="jhgjgh">9</a>
        <a href="hjg">10</a>
    </p>
</body>
</html>

7.字体样式

span标签：重点要突出的字，使用span套起来，本身无样式

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>7.字体样式</title>
    <style>
        #code{
            color: red;
        }
    </style>
</head>
<body>
    <span id="code">
        Python
    </span>
</body>
</html>

字体样式：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>7.字体样式</title>
    <style>
        /* 
         color : 颜色
         font-family : 字体
         font-size : 字体大小
         font-weight : 字体粗细
         */
        body{
            font-family: 楷体;
            font-size: 20px;
            font-weight: bolder;
            
        }
    </style>
</head>
<body>
    <h3>《咏柳》</h3>
    <h4>唐·贺知章</h4>
    <p>碧玉妆成一树高，</p>
    <p>万条垂下绿丝绦。</p>
    <p>不知细叶谁裁出，</p>
    <p>二月春风似剪刀。</p>
</body>
</html>

8.文本样式

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>8.文本样式</title>
    <style>
        /* 
         text-align : 排版
         text-indent : 首行缩进
         line-height : 行高，如果行高和块高一致，就可以上下居中
         text-decoration : 装饰
         */
        h3{
            color: green;
            text-align: center;
        }
        .copy{
            text-indent: 2em;
        }
        .p4{
            background: blueviolet;
            height: 100px;
            line-height: 100px;
        }
        .p1{
            text-decoration: underline;
        }
        .p2{
            text-decoration: line-through;
        }
        .p3{
            text-decoration: overline;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h3>《咏柳》</h3>
    <h4 class="copy">唐·贺知章</h4>
    <!-- 下划线 -->
    <p class="p1">碧玉妆成一树高，</p>
    <!-- 中划线 -->
    <p class="p2">万条垂下绿丝绦。</p>
    <!-- 上划线 -->
    <p class="p3">不知细叶谁裁出，</p>
    <p class="p4">二月春风似剪刀。</p>
    
    <!-- a 链接去下划线 -->
    <a href="">996</a>
</body>
</html>

9.文本阴影和超链接伪类

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>9.文本阴影和超链接伪类</title>
    <style>
        /* 默认的颜色 */
        a{
            text-decoration: none;
            color: #000000;
        }
        /* 鼠标悬浮的颜色 */
        a:hover{
            color: yellow;
        }
        鼠标按住未释放的状态
        a:active{
            color: green;
        }
        
        /* 
         text-shadow : 阴影颜色，水平偏移，垂直偏移，阴影半径
         */
        #address{
            text-shadow: #41c8c4 10px 10px 5px;
        }
    </style>
</head>
<body>
    
    <p>
        <a href="">知枝百货店</a>
    </p>
    <p id="address">
        原阳县
    </p>
</body>
</html>

10.列表样式

style.css文件：

#nav{
    width: 300px;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background: red;
}
ul{
    background: #c1c6c8;
}
/* list-style: 
none : 去掉圆点
circle : 空心圆
decimal : 数字
square : 正方形
*/
ul li{
    height: 30px;
    list-style: none;
}

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

html文件：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>10.列表样式</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="nav">
        <h2 class="title">全部商品分类</h2>
        <ul>
            <li>
                <a href="">图书</a>
                <a href="">音像</a>
                <a href="">数字商品</a>
            </li>
            <li>
                <a href="">家用电器</a>
                <a href="">手机</a>
                <a href="">数码</a>
            </li>
            <li>
                <a href="">电脑</a>
                <a href="">办公</a>
            </li>
            <li>
                <a href="">家具</a>
                <a href="">家装</a>
                <a href="">厨具</a>
            </li>
            <li>
                <a href="">服饰鞋帽</a>
                <a href="">个护化妆</a>
            </li>
            <li>
                <a href="">礼品箱包</a>
                <a href="">钟表</a>
                <a href="">珠宝</a>
            </li>
            <li>
                <a href="">食品饮料</a>
                <a href="">保健食品</a>
            </li>
            <li>
                <a href="">彩票</a>
                <a href="">旅行</a>
                <a href="">充值</a>
                <a href="">票务</a>
            </li>
        </ul>
    </div>
</body>
</html>

11.背景图像应用及渐变

设置背景图片

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>11.背景图像应用及渐变</title>
    <style>
        /* background-image: url()  设置背景图片 
        默认是全部平铺的 repeat
        */
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-10bc77ee-2875-4114-959a-9c030e8bc059/d8263126-f854-4173-861d-74c5a0ee8950.png);
        }
        
        /* 以 x 轴方向平铺 */
        .div1{
            background-repeat: repeat-x;
        }
        /* 以 y 轴方向平铺 */
        .div2{
            background-repeat: repeat-y;
        }
        /* 不平铺 */
        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

style.css文件：

#nav{
    width: 300px;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    /* 颜色,图片,图片位置,平铺方式 */
    background: red url("https://cos.maopis.com/Lksy/2022/11/14/637211ae540d7.png") 275px 7px no-repeat;
}
ul{
    background: #c1c6c8;
}
/* list-style: 
none : 去掉圆点
circle : 空心圆
decimal : 数字
square : 正方形
*/
ul li{
    height: 30px;
    list-style: none;
    /* 设置背景图 */
    background-image: url("https://cos.maopis.com/Lksy/2022/11/14/637211ae540d7.png");
    /* 设置平铺方式 */
    background-repeat: no-repeat;
    /* 设置图片位置 */
    background-position: 235px 4px;
}

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

html文件：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>10.列表样式</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="nav">
        <h2 class="title">全部商品分类</h2>
        <ul>
            <li>
                <a href="">图书</a>
                <a href="">音像</a>
                <a href="">数字商品</a>
            </li>
            <li>
                <a href="">家用电器</a>
                <a href="">手机</a>
                <a href="">数码</a>
            </li>
            <li>
                <a href="">电脑</a>
                <a href="">办公</a>
            </li>
            <li>
                <a href="">家具</a>
                <a href="">家装</a>
                <a href="">厨具</a>
            </li>
            <li>
                <a href="">服饰鞋帽</a>
                <a href="">个护化妆</a>
            </li>
            <li>
                <a href="">礼品箱包</a>
                <a href="">钟表</a>
                <a href="">珠宝</a>
            </li>
            <li>
                <a href="">食品饮料</a>
                <a href="">保健食品</a>
            </li>
            <li>
                <a href="">彩票</a>
                <a href="">旅行</a>
                <a href="">充值</a>
                <a href="">票务</a>
            </li>
        </ul>
    </div>
</body>
</html>

渐变还是用谷歌吧😁

11.边框使用

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>11.边框使用</title>
    <style>
        /* 常见初始化操作 
        margin : 外边距
        padding : 内边距
        text-decoration : 装饰线
        */
        body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        /* boder : 粗细，样式，颜色 */
        #box{
            width: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="box">
        <h2>会员登陆</h2>
        <form action="get">
            <div>
                <span>用户名：</span>
                <input type="text">
            </div>
            <div>
                <span>密码：</span>
                <input type="text">
            </div>
            <div>
                <span>邮箱：</span>
                <input type="text">
            </div>
        </form>
    </div>
</body>
</html>

12.内外边距及居中

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>12.内外边距及居中</title>
    <style>
        /* 常见初始化操作 
        margin : 外边距
        padding : 内边距
        text-decoration : 装饰线
        magrin : 0 auto;   居中，要求：块元素，有固定的宽度
        */
        body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        /* boder : 粗细，样式，颜色 */
        margin : 外边距,单行写法可以为,margin : 0 0 0 0;依次为上,右,下,左,也可简写为上下,左右
        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="box">
        <h2>会员登陆</h2>
        <form action="get">
            <div>
                <span>用户名：</span>
                <input type="text">
            </div>
            <div>
                <span>密码：</span>
                <input type="text">
            </div>
            <div>
                <span>邮箱：</span>
                <input type="text">
            </div>
        </form>
    </div>
</body>
</html>

13.圆角边框

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>12.内外边距及居中</title>
    <style>
        /* 
        boder-radius : 设置圆角,顺时针旋转
        圆圈 ：圆角=半径
        
        */
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 50px 20px 10px 5px;
            
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

14.圆角阴影

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>圆角阴影</title>
    <style>
        
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

15.display

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        /* display:
         block : 块元素
         inline : 行内元素
         inline-block : 块元素，保持行内
         none : 不显示
         
         */
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: block;
        }
    </style>
</head>
<body>
    <div>块元素</div>
    <span>行内元素</span>
</body>
</html>

16.float

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        /* float:
         left : 左浮动
         right : 右浮动
         
         clear:
         left : 禁止左浮动
         right : 禁止右浮动
         both : 禁止两侧浮动
         */
        div{
            margin: 10px;
            padding: 5px;
        }
        .father{
            border: 1px solid red;
        }
        .layer01{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
            float: left;
        }
        .layer02{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
            float: left;
        }
        .layer03{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
            float: right;
        }
        .layer04{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
            float: right;
            clear: both;
        }
        
    </style>
</head>
<body>
    <div class="father">
        <div class="layer01">
            layer01
        </div>
        <div class="layer02">
            layer02
        </div>
        <div class="layer03">
            layer03
        </div>
        <div class="layer04">
            layer04
        </div>
    </div>
</body>
</html>

17.解决父元素塌陷

增加父元素高度

        .father{
            border: 1px solid red;
            height: 800px;
        }

增加一个空的div标签，清楚滑动

    <div id="clear"> </div>
    #clear{
            clear: both;
            padding: 0;
            margin: 0;
        }

在父级元素增加一个overflow

overflow: hidden;

父类添加一个伪类

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

18.定位

18.1相对定位

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* position: relative;
         相对定位
         相对于原来的位置，进行指定偏移，原来的地址会被保留
         */
        div{
            margin: 10px;
            padding: 5;
            font-size: 15px;
            line-height: 25px;
        }
        #father{
            border: 1px solid red;
            padding: 0;
        }
        #first{
            border: 1px solid red;
            background-color: blue;
            position: relative;
            top: -20px;
            left: 20px;
        }
        #second{
            border: 1px solid red;
            background: fuchsia;
            position: relative;
            bottom: 10px;
            right: 20px;
        }
        #third{
            border: 1px solid red;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>
</body>
</html>

练习

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            border: 1px solid red;
            padding: 10px;
            width: 300px;
            height: 300px;
        }
        a{
            text-decoration: none;
            width: 100px;
            height: 100px;
            background-color: deeppink;
            display: block;
            color: aliceblue;
            line-height: 100px;
            text-align: center;
            display: block;
        }
        a:hover{
            background-color: blue;
        }
        
        #two,#four{
            position: relative;
            bottom: 100px;
            left: 200px;
        }
        #five{
            position: relative;
            bottom: 300px;
            left: 100px;
        }
        
    </style>
</head>
<body>
    <div id="father">
        <a href="" id="one">链接1</a>
        <a href="" id="two">链接2</a>
        <a href="" id="three">链接3</a>
        <a href="" id="four">链接4</a>
        <a href="" id="five">链接5</a>
    </div>
</body>
</html>

18.2 绝对定位

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

position: absolute;

没有父级元素定位的前提，相对于浏览器定位
假设父级元素存在定位，我们通常会相对于父级元素进行定位

相对于浏览器或父级的位置，进行指定偏移，不会保留原来的位置

18.3 固定定位

position: fixed;

18.4 z-index和透明度

z-index: 999;

类似于PS里面的图层，数字越高排序越前，默认为0

opacity: 0.5;

设置透明度

最后更新 2022-11-20