CSS-day01

最新推荐文章于 2024-07-20 18:30:00 发布

2201_75449897

最新推荐文章于 2024-07-20 18:30:00 发布

阅读量133

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/2201_75449897/article/details/140570208

版权

01-css使用方法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        @import url("01-css使用方法.css");
        /* 会在html加载完成之后才开始使用  必须在style标签最上方才会生效*/
        
        p {
            color: skyblue;
        }
    </style>
    <!-- <link rel="stylesheet" href="./01-css使用方法.css"> -->
    <!-- link标签 会在html被加载的时候同时使用 -->
</head>

<body>
    <div style="color: aqua;">今天天气真好阿.真热</div>
    <!-- 1.行内样式  直接在html标签的里面添加style属性  不推荐使用 
     优先级是最高的 影响代码可读性 -->
    <!-- 测试的情况下使用 -->
    <p>刚刚想办法解决了一下，试一试吧</p>
    <!-- 2.内部样式表 在文件内部添加的样式 在head标签里面添加style标签来书写样式  
     推荐使用-->
    <span>没关系，反正我有风扇</span>
    <!-- 3.外部样式表  单独的css文件，通过link标签引入  强烈推荐-->

    <!-- 4.外部样式表   @import url(./01-css使用方法.css); 导入css文件 
     必须写在style标签里面-->
</body>

</html>

02-css语法使用

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: violet;
        }
        
        span {
            color: aqua;
        }
        /* 选择器 {
            样式名称: 样式值;
            样式名称: 样式值;
            样式名称: 样式值;
        } */
    </style>
</head>

<body>
    <div>123</div>
    <span>456</span>
</body>

</html>

03-字体样式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* font-size: 56px; */
            /* 文字大小  默认16px  字体大小不允许是负数  最小是0  字体大小最小是10px */
            /* font-family: '站酷小薇LOGO体', '方正舒体'; */
            /* 字体主题  默认字体微软雅黑 必须是当前主机中有的字体 可以同时设置多个字体 一个一个查找是否拥有*/
            /* font-weight: 900; */
            /* 字体粗细   100 - 900 只允许设置整百位数字 100最细 900最粗 400 - 500正常 */
            /* font-style: oblique; */
            /* 控制字体风格  倾斜  em i  */
            font: 89px '华文新魏';
            /* {font: font-style  font-weight  font-size  font-family;} */
        }
    </style>
</head>

<body>
    <div>10.5吨问题鸭肠产品被召回</div>

</body>

</html>

04-选择器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*  *通配符选择器 当前文件中的全部标签都使用   */
        
        * {
            /* color: hotpink; */
            /* 清除页面的默认样式的 */
        }
        /* div {
            color: red;
        } */
        /* 标签名称选择器 */
        /* .box {
            color: darkorchid;
        }
        
        .box1 {
            font-size: 88px;
        } */
        /* class选择器 类选择器  使用.来表示class  可以重复的*/
        /*         
        #obox {
            color: yellow;
        } */
        /* id选择器 使用#来表示id  理论上是不允许重复的*/
    </style>
</head>

<body>
    <!-- <div id="obox">震惊！！！！1</div> -->
    <div class="box">震惊！！！！2</div>
    <div id="obox" class="obox">震惊！！！！3</div>
    <div class="box box1">震惊！！！！4</div>
</body>

</html>

05-伪类选择器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* a:link {
            color: brown;
        } */
        /* 未访问的链接 */
        /* a:visited {
            color: pink;
        } */
        /* 访问过的链接 */
        /* a:hover {
            color: rgb(255, 122, 107)
        } */
        /* 鼠标停留在链接上 */
        /* a:active {
            color: yellowgreen;
        } */
        /* 选定的链接  鼠标按压不放 */
        /* .box:hover {
            color: aqua;
        } */
        /* .box:active {
            color: blueviolet;
        } */
        /* hover和active可以对所有的盒子标签使用 hover必须在active上面才会生效 */
    </style>
</head>

<body>
    <a href="###">听说日本地震了</a>

    <div class="box">听说日本地震了</div>
</body>

</html>

06-css外观样式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            color: rgba(10, 10, 10, 0.5);
            /* 字体颜色 */
            /* color: red; */
            /* 1.  表示颜色的预先定义的单词 */
            /* color: #44cc12; */
            /* 2.  16进制颜色代码  0 1 2 3 4 5 6 7 8 9 a b c d e f*/
            /* 最少是6位#000000 黑色  #FFFFFF 白色 */
            /* 可以简写  a  b  c  00 00 00  44cc12 */
            /* color: #185ABD; */
            /* 3.  r(red红)g(green绿)b(blue蓝) 三原色 */
            /* 0 - 255 */
            /* 4.css3 透明色  rgba a 0 - 1  0透明  1不透明 */
            line-height: 20px;
            /* 行高  文本垂直居中 */
            text-align: left;
            /* 文本水平对齐方式   left  right  center  justify*/
            text-indent: 2em;
            /* 首行缩进 相对单位 1em = 1个字     */
            text-decoration: none;
            /* 文本修饰  去除下划线的none */
            /* overline  上划线 */
            /* underline 下划线 */
            /* line-through 删除线 */
            letter-spacing: 15px;
            /* 字符间距  可以为负数 */
        }
        /* a {
            text-decoration: none;
        }
        
        a:hover {
            text-decoration: underline;
        } */
        
        .box1 {
            text-transform: capitalize;
            /* 字母转换  */
        }
    </style>
</head>

<body>
    <a href="">line-through</a>
    <div class="box">震惊!美国警察拦下UFO震惊!美国警察拦下UFO!?</div>
    <div class="box1">Sometimes I'm reserved and enjoy staying and thinking all by myself. I think this may be my weakness.</div>
    <div class="box1">nihaowojiaowuyanzuwoshiyigedashuaige</div>
    <!-- <div class="box1">Sometimes I'm reserved and enjoy staying and thinking all by myself. I think this may be my weakness.</div> -->
    <div class="box2">震惊！美国警察拦下UFO震惊！美国警察拦下UFO!?</div>
    <div class="box2">震惊！美国警察拦下UFO震惊！美国警察拦下UFO!?</div>
</body>

</html>

07-文本阴影

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            text-shadow: -5px 0px cyan, 5px 0px red;
            /* text-shadow: ; */
            /* 水平方向的位置   垂直方向的位置  模糊程度  颜色 */
        }
    </style>
</head>

<body>
    <div class="box">热爱美好生活</div>
</body>

</html>