CSS学习

最新推荐文章于 2024-07-16 17:18:30 发布

makabaka___

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量79

点赞数

文章标签： css 学习前端

本文链接：https://blog.csdn.net/makabaka___/article/details/128071831

版权

CSS中可用style标签设置文本样式，还有选择器

优先级为：important > 行内 > 内部 > 外部

具体实现过程如下

<!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>
    <link rel="stylesheet" href="index.css">

    <style>
        div,h1{
            color: deepskyblue !important;;
        }
    </style>
    <!--加逗号就是一块搞-->
    
    <style>
        #box1{
            background-color: lightsalmon;
        }
    </style>
    <!--一个标签一个id-->

    <style>
        *{
            margin: 0;   /* 外边距 */
            padding: 0;    /* 内边距 */
        }
    </style>

    <style>
        h2 p{
            background-color: blueviolet;
        }
    </style>
    <!--像这种就是后代选择，得包含在里面才能做出改变-->
    <!--选择器是先匹配孩子，再挑家长-->

</head>
<body>
    <div style="color:chocolate">11111111</div>
    <div>
        22222222
        <p>
            放里面也有颜色
        </p>
    </div>
    <h1>3333333333</h1>
    <h2>
        4444444444
        <p>
            还有这种
        </p>
    </h2>
    <!--选择的时候是就近原则,除非有important-->
    <div id="box1">我喜欢吃雪糕</div>
</body>
</html>

上面代码运行结果如下图所示（仅作示范，比较难看，勿喷）

然后是各类选择器，比如标签选择器，类选择器，id选择器，后代选择器，伪类选择器等，上面的代码有稍微涉及到一部分，下面还有一些代码

<!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:link{
            background-color: black;
            color: white;
        }

        a:visited{
            background-color: black;
            color: white;
        }

        a:hover{
            background-color: red;
        }

        a:active{
            background-color: red;
        }*/

        a{
            background-color: black;
            color: white;
        }
        
        a:hover{
            background-color: red;
        }
    </style>
</head>
<body>
    <a href="">今天晚上吃什么</a>
    <a href="">烤鸭腿</a>
    <a href="">煎饼果子</a>
    <a href="">高人拉面</a>
    <a href="">香满园</a>
</body>
</html>

这段代码运行结果是这样的

对于哪个选择器优先级比较高，则是

<!--id权重大于class大于普通-->
<!--包含选择器是把全部加起来，然后很大很大-->
<!--但是行内样式才是老大(important是幕后boss，更大)-->

再接下来是CSS中的文本属性，与前面学过的html中相差不大

具体属性有

属性	描述	说明
font-size	字体大小	单位为px，默认值是16px，设计图常用是12px
font-family	字体样式	当字体是中文字体、英文字体中有空格时，需加“” 多个字体间用逗号连接，挨个匹配，没有就下一个
color	颜色	red #ff0 rgb(0-255,0,0)
font-weight	加粗	bolder更粗 bold加粗 normal常规也可以用数字表示
font-style	字体倾斜度	italic斜体 cblique倾斜文字 normal常规
text-align	对齐方式	left水平靠左 right水平靠右 center居中 justify两端对齐，只对多行起效，没多行也用不着这个，center就够了
line-height	行高	等于height时，可实现垂直居中
text-indent	首行缩进	可取负值，em为一个字符大小
letter-spacing	字间距	懂的都懂，不懂我也解释不了
text-decoration	文本修饰	none没有 underline下划线 overline上划线(这个很呆逼，正常不会用) through删除线
font	文字简写	顺序为style weight size height family

样例如下代码所示

<!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>
        .title{
            width: 200px;
            height: 50px;
            background-color: aqua;
            color: yellowgreen;
            font-weight: 900;
            font-size: larger;
            text-align: center;
            line-height: 50px;
        }

        p{
            width: 500px;
            font-size: 16px;
            text-indent: 2em;
            text-align: justify;
        }

        .sp1{
            color: blue;
            font-weight: bolder;
            letter-spacing: 10px;
        }

        .sp2{
            color: red;
            text-decoration: underline;
        }

        .sp3{
            font-style: oblique;
        }
    </style>
</head>
<body>
    <div class="title">
        历史渊源
    </div>
    <p>
        <span class="sp1">冰淇淋是冷冻食品发展而来的。</span>
        <span class="sp2">早在公元1世纪，</span>
        古罗马国王就叫奴隶们夏天从高山上<span class="sp2">采集冰雪</span>，
        用于<span class="sp3">冷冻水果、蜂蜜和果汁</span>。国王常常在夏天用
        这些冷冻食品来招待宠臣和国外使者。<sup>[7] </sup>
    </p>
</body>
</html>

运行结果如下图所示

代码中并未涉及到全部属性，如有兴趣的话可自行尝试，使用时应注意选择器优先级

再后边就是列表属性，跟html中学习过的列表其实差不多，只是对样式多了一些修改

属性描述说明
list-style-type 前面符号样式
disc实心圆

circle空心圆

square实心方块

none没有

list-style-image 将图片设置为列表样式 url()
list-style-position 标记位置
outside外面

inside里面

list-style 简写 none去除符号