HTML入门第四课（css）

最新推荐文章于 2024-10-04 06:11:34 发布

二白程序员

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量792

点赞数 18

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_63511098/article/details/136456367

版权

前面三篇文章咱们学习了一些简单的html知识，包括格式、常用标签、超链接，接下来咱们再说一下关于css的知识。

一、css简介

咱们知道，网页分成三个部分：

html—— 结构

css—— 表现外在显示的样子

js——行为

css：层叠样式表

网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式

而最终我们看到的只有最上边的一层

是设置网页中元素的样式

关于css，我们将学习：

css书写位置：3种

css选择器:30种左右

css样式：字体，文本，盒子模型，浮动，定位，背景

二、css语法

首先说一下css的注释，作用和HTML注释类似，只不过它必须编写在style标签或者是css文件中

快捷键：ctrl+/

CSS的语法：

选择器声明块

选择器：选中需要设置样式的部分

声明块：具体样式，是一组组名值对结构

css样式

color 设置字体的颜色 red,green,blue,black,pink

background-color 设置背景色 red,green,blue,black,pink

font-size 设置字体的大小默认是16px

width 设置元素的宽度单位：px

height 设置元素的高度单位：px

css样式的语法：样式名：样式值;

color：red;

三、css书写位置

第一种方式：内联方式/行内样式

书写位置：

在开始标签或者自结束标签内，写一个style属性，将css样式写在style属性值里

可以写多组样式，样式与样式之间要用;隔开

缺点：

1、html结构和表现耦合了，导致代码宽度变大，不方便查看

2、不易修改

3、权重很高，后期很难通过js或者其他框架修改

故不推荐使用

第二种方式：内部样式表

书写位置：

在head标签内，写一个style子标签，通过选择器选中对应的内容，

在{}内书写css样式，可以写多组样式，样式与样式之间用;隔开

缺点：

1、css样式还是写在html文件内，如果css样式过多，会导致html文件很长，不方便查看 html结构

2、不方便复用

第三种方式：外部样式表

书写位置：

在html文件外新建一个.css文件内，通过选择器选中对应的内容

在{}内书写样式，然后通过link标签，将css文件和html文件联系在一起

如果代码较多，代码可能被复用，推荐外部样式表

四、常用选择器

1、标签选择器：

语法：标签名{}

作用：选中对应标签包裹的内容

注意：常用的标签就那么多，如果用标签选择器，很可能会选中其他不需要设置样式的内容

2、id选择器：

作用：选中对应id属性值的内容

语法：#id属性值{}

注意：

id属性值不能以数字开头，最好不要是汉字

id属性值不能复用（id取值后，其他不可再取）

3、class选择器：

作用：跟id选择器很像,选中对应class属性值的内容，但它的class属性值可以复用

语法：.class属性值{}

注意：也是我们用的最多的选择器

4、通配选择器：

语法：*{}

作用：选中所有的标签

五、css复合选择器

交集选择器

作用:选中同时满足多个选择器对应的内容

语法：选择器1选择器2{}

注意：如果选择器中有标签选择器，那么标签选择器必须放在首位

并集选择器（群组选择器）

作用：同时选中多个选择器的内容

语法：选择器1，选择器2{}

六、关系选择器

1、子元素选择器：

作用：通过指定的父元素找到指定的子元素

语法：父元素>子元素{}

2、后代选择器：

作用：通过指定的祖先元素找到指定的后代元素

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

3、下一个兄弟选择器：

作用：通过指定的兄找到指定的弟

语法：兄＋弟{}

4、所有兄弟选择器：

作用：通过指定的兄找到下面所有的弟

语法：兄~弟{}

老样子，分享个小练习，写的有点乱，还能继续优化，二白在这里就不改了

<!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>
        h1 {
            font-size: 25px;
        }

        .blue {
            color: blue;
        }

        .red {
            color: red;
        }

        .orange {
            color: orange;
        }

        .green {
            color: green;
        }
    </style>
</head>

<body>
    <div>
    <h1 class="blue">花千骨</h1>
    &nbsp;《花千骨》是由<a class="red" href="javascript:;">慈文传媒集团</a>制作并发行，<span class="blue">林玉芬、高林豹、梁胜权联合执导，霍建华、赵丽颖</span>领衔主
    演，<span class="orange">蒋欣、杨烁</span>特别出演，<span class="green">张丹峰、李纯、马可、鲍天琦、安悦溪、徐海乔</span>等主演的古装玄幻仙侠剧。
    该剧改编自fresh果果同名小说，讲述少女花千骨与长留上仙白子画之间关于责任、成长、取舍的纯爱虐
    恋[1]。该剧于2014年5月6日开机，9月15日关青，8月12日发布中文及英文版的预告片[2]。该剧于
    2015年6月9日起每周二、周三晚10点在<span class="orange">湖南卫视</span>的钻石独播剧场播出。[3] 2015年7月5日起，该剧播放
    时间已经改为每周日、周一晚10点。当天零点在爱奇艺同步更新。[4]
    <br>
    <img src="./1.jpg" width="150px" alt="花千骨"><br>
    <h1>主要演员</h1>
    <img src="./2.jpg" alt="霍建华"> <img src="./3.jpg" alt="赵丽颖"><br>
    </div>
</body>

</html>