Css基础

最新推荐文章于 2025-05-23 14:10:47 发布

Z_cx

最新推荐文章于 2025-05-23 14:10:47 发布

阅读量123

点赞数

分类专栏： web前端文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/Python1One/article/details/120353693

版权

web前端专栏收录该内容

17 篇文章

订阅专栏

Css基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  -->
    
    <style>
        p {
            /* 字体颜色 */
            color: red;
            /* 字体大小 */
            font-size: 12px;
            /* 字体对其 */
            text-align: center;
        }

    </style>
</head>
<body>
    <p>有点意思</p>
</body>
</html>

CSS选择器

<!DOCTYPE html>


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #d2 {
            color: yellow;
        }
        div {
            color: red;
            font-size: 25px;

        }
        p {
            color: green;
            font-size: 20px;
        }
        ul {
            color: pink;
        }
        .l1 {
            color: red;
        }
        .fontsize {
            font-size: 50px;
        }

        
    </style>
</head>
<body>
    <div id="d1">第一个div</div>
    <div id="d2">第二个div</div>
    <p>第一个段落</p>
    <ul>
        <!-- 多类选择器 -->
        <li class="l1 fontsize">1.</li>
        <li class="l2">1.</li>
        <li>1.</li>
    </ul>
    <ol>
        <li>123123</li>
        <li>1.</li>
    </ol>
</body>
</html>

选择器Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* 标签选择器 */
        div {
            width: 50px;
        }

        /* id选择器 */
        #d1 {
            width: 50px;
            height: 150px;
            
        }
        /* 类选择器 */
        .dd {
            width: 50px;
            height: 50px;
            background-color: red;
        }
        #green {
            background-color: green;
        }
        /* 统配符选择器 给所有标签（html body head）都改变*/

        * {
            color: red;
        }
        
    </style>
</head>
<body>
    <div id="d1">
        <div id="dd1" class="dd"></div>        
        <div id="green" class="dd"></div>
        <div id="dd3" class="dd"></div>
    </div>
</body>
</html>

字体属性demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 更改字体 第一个没有自动向后*/
        h2 {
            font-family: '微软雅黑', 'Times New Roman', Times, serif;
        }
        /* 更改字体大小  px像素 默认16px */
        div {
            font-size: 25px;
        }
        /* 字体粗细 bold 粗体   bolder 特粗  lighter细体 normal 默认
        700相当于加粗
        */
        p {
            font-weight: 700;  
            /* font-weight: lighter; */
        }

        /* 文字风格 斜体  */
        p {
            font-style: italic;
        }
        /* 让倾斜字体不倾斜 */
        em {
            font-style: normal;
        }

        /* 符合属性 */

        .d1 {
            /* font: font-style font-weight font-size/font-height font family  顺序不能颠倒  最少保留 font-size font-family; */
            font: normal 700 25px '黑体';
        }
        .d2 {
            font: 50px '宋体';
        }
        
    </style>
</head>
<body>
    <h2>正则表达式是用于匹配字符串中字符组合的模式。</h2>
    <div>在 JavaScript中,</div>
    <div>正则表达式也是对象。</div>
    <p> 这些模式被用于 RegExp 的 exec 和 test 方法,</p>
    <p>以及 String 的 match、mat...</p>
    <em>水水水水抖抖抖丶寻寻寻寻寻所寻所所寻所寻所寻</em>
    <div class="d1">卧室小聪明</div>
    <div class="d2">卧室大聪明</div>
</body>
</html>

文本属性

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /* 文字颜色 */
            color: red;
            /* color: #fff00f; 最常用 */
            /* color: rgb(255, 215, 0); */


            /* 文字水平对其 center 居中 left 左对齐默认 right 右对齐*/
            /* 实质是div中的文字对其 */
            text-align: center;

            /* 装饰文本 none 默认无 underline下划线   overline 上划线 line-through删除线 */
            text-decoration: line-through;
        }
        
        /* 删除下划线 将超连接变色 */
        a {
            text-decoration: none;
            color: black;
        }


        /* 文本缩进 text-indent 首行缩进 可正可负    或*em 表示缩进*个字符 */
        p {
            text-indent: 2em;
        }

        /* 行间距（上间距+文字高度+下间距） */
        p {
            line-height: 16px;
        }
    </style>
</head>
<body>
    <div>会变色的文字</div>
    <a href="#">取消下划线</a>
    
    <p>首先 MDN 肯定不是国家的缩写 因为国家缩写是两个字母MDN,Madison,<麦迪逊>,IN,INDIANA,<印第安纳州>,Madison Municipal Airport,USA[美国],北美洲</p>
    <a>首先 MDN 肯定不是国家的缩写 因为国家缩写是两个字母MDN,Madison,<麦迪逊>,IN,INDIANA,<印第安纳州>,Madison Municipal Airport,USA[美国],北美洲</p>
    <p>首先 MDN 肯定不是国家的缩写 因为国家缩写是两个字母MDN,Madison,<麦迪逊>,IN,INDIANA,<印第安纳州>,Madison Municipal Airport,USA[美国],北美洲</p>
    
</body>
</html>

引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 内部样式表（内嵌式） -->
    <style>
        div {
            color: red;
        }
    </style>
    <!-- 外部样式表 相对路径 -->
    <link rel="stylesheet" href="./css/demo.css">
</head>
<body>
    <!-- 行内样式表 -->
    <div style="color: red;">内嵌式样式表</div>
    <p>外部样式表</p>
</body>
</html>

Emmet语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .one {
            /* tac  + tab */
            text-align: center;
            /* w200  */
            width: 200px;
            /* ti200  tab */
            text-indent: 200px;

            /* lh26px tab */
            line-height: 26px;
        }
    </style>
</head>

<body>
    <!-- div*10 10个div    -->
    <!-- ul>li  生成一个ul中嵌套li -->
    <!-- div+p 生成一个div一个p -->
    <!-- .nav -->
    <div class="nav"></div>
    <!-- #banner -->
    <div id="banner"></div>
    <!-- p.one -->
    <p class="one"></p>

    <!-- span#two -->
    <span id="two"></span>

    <!-- ul>li#id -->
    <ul>
        <li id="i1"></li>
    </ul>

    <div class="demo"></div>

    <!-- .demo&*5 $是自增 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>

    <!-- div{自动生成文字} -->
    <div>自动生成文字</div>
    <!-- div{自动生成5个div}*5 -->
    <div>自动生成5个div</div>
    <div>自动生成5个div</div>
    <div>自动生成5个div</div>
    <div>自动生成5个div</div>
    <div>自动生成5个div</div>

    <!-- div{$}*5 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

    <!-- 快捷对奇  shift+alt+f  或者右键 -->
    <div>123</div>
    <div>123123</div>


</body>

</html>

CSS复合选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 后代选择器 元素1 元素2 {样式}  元素2是元素1的后代 只改变ol中的li标签 */
        ol li {
            color: yellow;
        }

        /* 不会改变孙子  需要指定 */
        ol li a {
            color: yellow;
        }

        /* 子元素选择器  只改变亲儿子 div中的第一个a就是亲儿子 */

        .nav>a {
            color: yellow;
        }

        /* 并集选择器 用逗号分割 */
        div,
        p {
            color: red;
        }

        /* 伪类选择器 用：表示 */
        /* 1.a:link 是所有未被访问的连接 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /* 2. a:visited 选择所有已经访问的链接 */
        a:visited {
            color: red;
            text-decoration: none;
        }

        /* 3. a:hover 鼠标位于其上的链接 */
        a:hover {
            color: yellow;
            text-decoration: none;
        }

        /* 4. a:active 选择活动链接（按下未弹起） */
        a:active {
            color: blue;
            text-decoration: none;
        }

        /* 伪类选择器由顺序 LVHA */


        /* 工作开发 */
        a {
            color: gray;
        }

        a:hover {
            color: red;
        }


        /* :focus选择器（把获得聚焦的用框框出来） */
        input:focus {
            background-color: yellow;
        }


        /* 符合选择器总结
            1. 后代选择器 符号是空格
            2. 子代选择器 符号是> 只选择元素1中的子元素2
            3. 并集选择器 符号是，相当于and
            4. 链接伪类选择器 a{}和a: hover;
            5. :focus选择器 input:focus

        
        */
    </style>
</head>

<body>
    <ol>
        <li>123123</li>
        <li>222222</li>
        <li>3333333</li>
        <li><a href="#">我是孙子</a></li>
    </ol>
    <ul>
        <li>0001</li>
        <li>0002</li>
        <li>0003</li>
    </ul>

    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>

    <a href="#">链接</a>

    <input type="text" name="" id=" ">
    <input type="text" name="" id=" ">
    <input type="text" name="" id=" ">
</body>

</html>

元素的选择模式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        元素显示模式就是元素以什么方式进行显示 如div独占一行  一行可以有多个span
        HTML分为块元素和行内元素
        1. 块元素
            <h1>~<h6> <p> <div> <ul> <ol> <li>等  其中div是最典型的块元素
           特点：
                独占一行
                高度、宽度、外边距、内边距都可以控制
                宽度默认是容器(父级宽度)的100%
                是一个容器及盒子，里面可以放行内或者块级元素     
            注意：
                <p> 中不可以放块元素 <p>中不能放div

        2. 行内元素
            <a> <strong> <b> <em> <i> <del> <span>等 span是最典型的行内元素（内联元素）
            特点：
                相邻行内元素在一行，一行可以放多个
                高宽的设置是无效的
                默认宽度就是它本身内容的宽度
                行内元素只能容纳文本或其他行内元素
            注意：
                链接里不能放链接
                a里可以放块级元素，给a转换成块级元素最安全
        3. 行内块元素
            <img /> <input /> <td> 他们同时具有块元素和行内元素的特点
            特点：
                和相邻的行内元素(行内块)在一行，他们之间有空白间隙，一行可以显示多个(行内元素特点)
                默认宽度是他内容的宽度(行内元素特点)
                高度、行高、外边距以及内边距都可以控制(块元素特点)
                
     -->
    <!-- 
        转换显示模式
        例如将a链接增大触发范围

        转换为块元素：display:block
        转换为行内元素： display:inline
        转换为行内块元素：display:inline-block

      -->
    <style>
        a {
            width: 500px;
            height: 200px;
            display: block;
            background-color: red;
            text-align: center;

        }
    </style>

</body>

<a href="#">一个链接 </a>

</html>

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:hover {
            background-color: red;
        }

        .d1 a {
            color: white;
            text-decoration: none;
            line-height: 100px;
            display: block;
            height: 100px;
            width: 500px;
            text-indent: 5em;
        }

        .d1 {
            background-color: saddlebrown;
            width: 500px;
            height: 500px;
        }
    </style>
</head>

<body>
    <div class="d1">
        <a href="#">手机 电话卡</a>
        <a href="#">电视盒子</a>
        <a href="#">笔记本 平板</a>
        <a href="#">出行穿戴</a>
        <a href="#">出行穿戴</a>
    </div>
</body>

</html>

Css背景

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 背景颜色  transparent是透明*/
        #d1 {
            width: 600px;
            height: 200px;
            background-color: transparent;
        }


        /* 背景图片 */
        #d2 {
            width: 1000px;
            height: 1000px;
            background-image: url(./images/1.png);
            /* 背景平铺 no-repeat不平铺 默认是平铺的 repeat-x 延x周平铺 repeat-y延y周平铺 */
            background-repeat: no-repeat;
            /* 背景图片位置 background-position: x y; 横向位置是怎么样 y轴方向是怎么样
                只有一个方位，另一个默认center
            */
            background-position: center top;
            /* 背景图片精确位置 background-position: 距左侧边距 距上侧距离;*/
            background-position: 20px 50px;

            /* 也可以混合 background-position: 20px center; */

            /* 背景固定 background-attachment:fixed固定/scroll滚动 */
            background-attachment: fixed;


            /* 背景复合写法 */
            /* background: 背景颜色 背景图片地址 背景平铺 背景滚动 北京位置; */
        }

        #d3 {
            width: 200px;
            height: 300px;
            /* 背景色半透明 rgb对应三色 a是透明度在0~1 1是不透明 小数直接.5 */
            background: rgba(0, 0, 0, 0.5);
        }
    </style>


    <!-- 
        总结：
            1. background-color背景颜色
            2. background-image背景图片
            3. background-repeat是否平铺
            4. background-positing背景位置
            5. background-attachment背景附着 scroll滚动 fixed固定
            6. 简写 background: 颜色 图片url 平铺 滚动位置
            7. 背景半透明：bacnground:rgpa(0,0,0,.5)
        
    -->
</head>

<body>
    <div id="d1">
        卧室一个div
    </div>
    <div id="d2">
        卧室两个div
    </div>
    <div id="d3">
        卧室三个div
    </div>
</body>

</html>

案例圆角框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .nav {
        margin: 0 auto;
        width: 620px;
        background-color: red;
        /* 设置圆角 boder-top-left-radius:20px 30px ; 设置左上角的水平20px 垂直30px的一个椭圆的四分之一的角 */
        /* 这样是设置成两边圆角 */
        border-radius: 300px;
        /* 设置阴影 box-shdow: 阴影的水平大小 垂直打小 模糊宽度 颜色 */
        box-shadow: 20px 10px 10px blue;
    }

    .nav a {
        width: 120px;
        height: 58px;
        display: inline-block;
        text-align: center;
        line-height: 58px;
        color: white;
        text-decoration: none;
        font-weight: 800;
        /* 设置字体的隐形 这种事浮雕效果 */
        text-shadow: 3px 2px 2px green;

    }

    .nav a:hover {
        color: black;
        background-color: pink;
        border-radius: 60px;

    }
</style>

<body>
    <div class="nav">
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>


    </div>
</body>

</html>