CSS 网页的表现

最新推荐文章于 2024-11-11 17:37:15 发布

星云lucky

最新推荐文章于 2024-11-11 17:37:15 发布

阅读量181

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_59505590/article/details/121681542

版权

一、CSS基础

可以编写的地方：

1.在head标签的最后写一对style标签，这对标签内写的就是CSS样式

2.标签/元素的属性style内写CSS样式的声明

3.引入CSS文件,在head标签的最后写一个link标签，例：<link rel="stylesheet" href="./摆弄形状.css">

语法：style="样式声明"；（样式声明也是键值对，样式可以有多个声明，多个声明之间可以用“；”分隔）

样式声明语法：key：vlialue，例：width：100px

优点：精准。

缺点：如果相同样式的元素较多，代码非常冗余。

二、选择器

作用：选择页面上的元素

语法：被选择元素{

样式声明(和在标签内写样式的方法一致)

}

1、基础选择器

优先级：越精准，优先级越高，针对重复声明的样式。

1.标签选择器/元素选择器：

选择器就是标签的关键字

语法：标签的关键字{

样式声明

}

2.class选择器/类选择器：

标签上可以有一个属性class，它的作用就是给页面元素分组；可以重复给不同的元素设置。

语法：.class属性值{

样式声明

}

3.多类选择器：

CSS内，可以通过任意一个class值选中元素；元素的class属性可以设多个值，多个class值之间用空格分隔。

语法：class{样式声明样式声明}

好处：可以抽出共同的样式进行统一声明，同时可以进行个性化声明

4.id选择器：

标签上可以有一个属性id，它的作用是确定页面元素的唯一性；不可以重复给不同的元素设置。

语法：#id属性值{

样式声明

}

5.通配选择器：

作用于整个页面

语法：*{

样式声明

}

2、复合选择器:通过标签选择其选中class、id

1.后代选择器：

选中某个元素的后代

语法：祖先元素后代元素{

样式声明

}

特点：祖先元素选择器和后代元素选择器之间必须有一个空格；只会选中后代元素，祖先元素不受样式声明的影响。

2.子代选择器：

选中某个元素的子元素

语法：父元素>子元素{

样式声明

}

特点：必须使用“>”来分隔父元素和子元素；只会选中直接后代，不会隔代选中。

3.并集选择器：

选中所有声明的元素

语法：选择器1，选择器2，……选择器n{

样式声明

}

特点：选择器之间必须使用“，”分隔；会选中页面上满足任意一个选择器的元素。

4.交集选择器：

选择同时满足所有选择器声明的元素

语法：选择器1选择器2……选择器n{

样式声明

}

特点：选择器之间不可以有任何分隔；选中同时满足所有选择器声明的元素。

三、常用样式

文本样式：

语法：font: normal 100 1em '宋体';

顺序：font-style font-weight font-size font-family

font-size font-family必须有，其他样式不设置可以省略

字体：font-family: '宋体';

字号：font-size: 1em;（1em=16px）

粗细：font-weight: 100;

可选值：数值；normal：不加粗（400）；bold：加粗（700）；bolder：更粗

倾斜：font-style: normal;

可选值：normal：不倾斜;italic：倾斜

颜色：color: rgb(255, 0, 128);

可选值：red，green，blue，rgb（）16进制颜色

对齐方式：text-align: justify;

可选值：left：左对齐；center：居中；right：右对齐；

段落缩进：text-indent: 32px;

文本修饰：text-decoration: line-through;

可选值：underline：下划线；overline：上划线；line-through：删除线

行间距：line-height: 20px;

四、元素的显示模式

1、会独占一行的元素：块元素

div p h1~h6 ul li ol tr

可以设置宽高

默认高度被内容撑开，默认元素就是父元素的宽度

可以包含块元素和行内元素

2、不会独占一行的元素：行内元素

span strong ins em del i b

按照声明的顺序，从左到右依次排列

不可以设置宽高

宽高会被内容撑开

不可以包含块元素

3、介于两者之间：行内块元素

input img td

一行可以显示多个，单元素之间有空隙（行内元素的特点）

默认高度就是内容高度（即是行内元素的特点也是块元素的特点）

可以设置宽高（块元素的特点）

4、display（样式声明）可以切换元素的显示模式

可选值：block：块元素；inline：行内元素；inline-block：行内块元素

练习：多彩诗句

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

<head>
    <meta charset="UTF-8">
    <title>多彩诗句</title>
    <style>
        p {
            font-weight: 525;
        }
        
        .box3 {
            font-size: 30px;
        }
        
        .box2 {
            font-size: 20px;
        }
        
        .box1 {
            font-size: 10px;
        }
        
        .boxb {
            color: rgb(47, 12, 243);
        }
        
        .boxr {
            color: rgb(243, 12, 12);
        }
        
        .boxg {
            color: rgb(61, 189, 50);
        }
        
        .boxp {
            color: rgb(240, 130, 181);
        }
    </style>
</head>

<body>
    <bin align="center">
        <p><strong class="box3">沁园春·长沙</strong>
            <span class="box1 boxb">【毛泽东】</span></p>
        <p class="box2 boxb">独立寒秋，
            <span class="box1 boxg">湘江北去</span>，橘子洲头。</p>
        <p class="box2 boxr">看万山红遍，层林尽染；
            <span class="box1 boxp">漫江碧透</span>，百舸争流。</p>
        <p class="box2 boxb">鹰击长空，
            <span class="box1">鱼翔浅底</span>，万类霜天竞自由。</p>
        <p class="box3 boxg">
            <span class="box2 boxr">怅寥廓，</span>问苍茫大地，谁主沉浮？</p>
        <p class="box2 boxb">携来百侣曾游，忆往昔峥嵘岁月稠。</p>
        <p class="box3 boxg">恰同学少年，风华正茂；书生意气，挥斥方遒。</p>
        <p class="box2 boxb">指点江山，激扬文字，粪土当年万户侯。</p>
        <p class="box2 boxr">曾记否，到中流击水，浪遏
            <span class="box3">飞&nbsp&nbsp舟&nbsp&nbsp？</span></p>
    </bin>
</body>

</html>