CSS的样式设置

最新推荐文章于 2024-06-24 20:56:17 发布

Ann1223

最新推荐文章于 2024-06-24 20:56:17 发布

阅读量213

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/Ann1223/article/details/107674130

版权

CSS设置样式学习

1.如何选择元素？
选择器
2.如何设置样式？
1.继承/不继承

  height: inherit;/*强制继承父类高度*/
     color: initial; /*不继承父类的color属性*/

2.颜色单位：
1.关键字
blue
lightblue
2.rgb（r,g,b）:0-255之间
在这里插入图片描述

3.rgba(r,g,b,a) rgb:0-255 a:0-1 透明度
4.16进制的颜色值
拾色器/取色器
3.尺度单位
px：绝对单位
width：100px；
em：相对单位
与当前元素的字体大小相同（默认情况下16px）
4.字体样式
1）font-size 字号
2）font-family 字体
3）font-style 样式(normal/italic/oblique))
4）font-weight 加粗(normal/bold/bolder/lighter/100-900)
5）line-height 行高(px/数字/em)
6）color 文字颜色
7）text-decoration 文字修饰
8）text-align 文本对齐方式
9）text-transform 字母大小写
10）text-indent 文本缩进

<!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>
        span{
            font-style: italic;
        }

        i{
            font-style: normal;
            font-weight:bold/*700*/
        }

        b{
            font-weight: normal;/*400*/
            font-size: 20px;
        }
        div{
             width: 100px;
             height: 100px;
             border: 1px solid red;
             /* text-align: center; */
             text-transform: full-width;
             text-indent: 2em;
            
        }
        a,del{
            text-decoration: none;
            /*text-shadow:h-shadow v-shadow blur color*/
            text-shadow: -10px -10px 1px red;
        }
        span{
            text-decoration: line-through;
        }
        


    </style>




</head>
<body>
    <a  href="#">百度一下</a>
    <del>hello</del>
    <span>hello</span>
    <div>hello HELLO
        鸡蛋糕和你嘴角味道
    </div>
    <span>hello</span>
    <i>hello</i>
    <b>hello</b>
    <strong>hello</strong>
</body>
</html>

#网络字体：（下载测试）
   1.下载对应字体
   2.设置字体
   3.引用字体

字体图标库：
fontawesome iconfont

span class=“fa fa-xxxx”
i class=‘iconfont xxxxx’
补充学习 img:特殊的行内元素有私有属性 width height

再次复习的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0729复习</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        /* div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            color: red;
        }
        div p{
            width: 50px;
            height: inherit; 
            继承父类的高度
            border: 1px solid royalblue;
            color: initial;
            不继承父类颜色，按默认颜色显示
        } */

        div:first-child{
            background-color: rgba(157,78, 45,0.3);
        }
        div:nth-child(2){
            color: red;
            font-size: 20px;
            font-weight: 700;
            font-style: italic;
            text-decoration: overline;
            
        }
        div:nth-child(3){
            color: springgreen;
            font-size: 25px;
            text-transform: lowercase;
            font-family: 'Times New Roman', Times, serif;
        }
        div:nth-child(4){
            color: yellow;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            text-decoration: underline;
        }
        del{
            text-decoration: none;
        }
        span{
            text-shadow: 3px 4px 2px red;
        }
        #outer{
            
            list-style-type:decimal-leading-zero;
            list-style-position: inside;
            list-style-image: url(./1.png);
            line-height: 1em;
            text-align: center;
        }
        #outer li{
            border: 1px solid red;
        }
        a{
            cursor: pointer;
            outline: rebeccapurple;
            text-decoration: overline;
            text-align: center;
        }
        i:hover{
            color: red;
            size: 50px;

        }
    </style>
</head>
<body>
    <i class='iconfont icon-cry'></i>
    <i class='iconfont icon-ashbin'></i>
    <i class='iconfont icon-atm'></i>

    <ol start="5" reversed>
        <li>hi siri</li>
        <li>hi siri</li>
        <li>hi siri</li>
        <li>hi siri</li>
        <li>hi siri</li>
    </ol>


    <!-- <div>hello
        <p>world</p>
    </div> -->
    <div>HI SIRI</div>
    <div>HI SIRIbb</div>
    <div>HI SIRI</div>
    <div>HI SIRI</div>
    <del>hi siri</del>
    <span>百度一二三四五六七八下</span>

    <ul id="outer">
        <li>\\\
            <ul>
                <li>inner1</li>
            </ul>
        </li>
        <li>outer
            <ul>
                <li>inner2</li>
            </ul>
        </li>
    </ul>
    <a href="#">百度一下</a>
    <a href="#">百度二下</a>
    <a href="#">百度三下</a>
    <a href="#">百度四下</a>

    
</body>
</html>