前端基础（二）----- CSS初识

最新推荐文章于 2024-05-20 22:08:52 发布

零度℃192

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量166

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_70761095/article/details/127500770

版权

1. CSS介绍

CSS全称为： Cascading Style Sheets ，意为层叠样式表，与HTML相辅相成，它是网页的装饰者，用来修饰各标签排版（大小、边距、背景、位置等）、改变字体的样式（字体大小、字体颜色、对齐方式等）、设置图片（宽高、位置等）等。

2. 引入方式

引入方式：就是我们的css要写在什么地方

2.1 行内样式

借助了所有标签都有的属性style，为当前的元素添加样式声明。

<标签名 style="样式声明">

CSS样式声明: 由CSS属性和值组成

CSS属性：你希望给HTML标签设置的样式名字
值：使用值来控制某个属性显示的效果
- 设置文本的颜色：color:red;
- 设置字体的大小：font-size：字体的像素;

style="css属性名:值;css属性名:值;"

2.2 内嵌样式

借助于style标签，在HTML文档中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配元素并应用样式

<style>
   	选择器{
   	 	css属性名:值;
        css属性名:值;
   	}
</style>

选择器：在HTML页面当中找到元素

2.3 外链样式

创建外部样式表文件后缀使用.css，在HTML文件中使用<link>标签引入外部样式表

<link rel="stylesheet" href="外部样式表的地址">

2.4 三种方式的总结

样式表	优点	缺点	使用情况	使用场景
行内样式表	书写方便	没有实现结构与样式分离，不便于维护，不可以重复利用	极少	某个标签需要单独的样式设置时使用
内嵌样式	部分结构与样式分离，较便于维护	没有彻底实现结构与样式分离，不可以重复利用	一般	css代码量不多，且和当前页面联系紧密不需要复用时使用
外链样式表	完全实现结构与样式分离，可重复利用	如果代码量较少情况下，引入法更麻烦	最多，推荐	css代码量大时，或者需要重复利用时使用

3、css选择器

3.1 标签选择器

一个完整的 HTML 文档由各式各样的标签组成，而标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签，如下所示：

/* 找到页面当中所有的p标签 */
p {
    color: blue;
}

3.2 类选择器

类选择器可以根据标签的class属性，找到具体的HTML标签。类选择器的定义需要用到一个英文的句号.，后面紧跟 class 属性的值

所有的标签都会有一个class的属性 class的属性值我们叫类名

.black {
    color: black;
}

3.3 ID选择器

ID 选择器用来找到HTML文档中具有指定ID属性的标签，ID 选择器的定义需要用到井号#，后面紧跟ID属性的值。结合js用于确定页面上的唯一元素

配合js使用的

#nav {
    color: red;
}

3.4 通配符选择器

通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML文档中的每个元素。在开发中，我们通常使用通用选择器来清除 HTML元素中默认的内外边距

* {
    margin: 0;
    padding: 0;
}

3.5 交集选择器

结构：选择器1选择器2{css属性名:属性值;}
找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
交集选择器中的选择器之间是紧挨着的，没有东西分隔

p.box {
    color: red;
}

3.6 分组选择器

结构：选择器1 ，选择器2 {css属性名:属性值;}
同时选择多组标签，设置相同的样式
并集选择器中的每组选择器之间通过 , 分隔
并集选择器中的每组选择器通常一行写一个，提高代码的可读性

<style>
    p, 
    div, 
    span, 
    h1 {
        color: red;
    }
</style>

默认样式的清除：浏览器会给我们的元素默认添加一些样式，默认样式会影响到我们页面的布局

清除默认样式通用代码：https://static.zzhitong.com/lesson-files/html/code/reset.css

3.7 元素关系选择器

子代选择器

结构：选择器1 > 选择器2 {css属性名:属性值;}
在选择器1所找到标签的子代（子代只包括：儿子）中，找到满足选择器2的标签，设置样式

div>a {
    color: red;
}

后代选择器

结构：选择器1 选择器2 {css属性名:属性值;}
在选择器1所找到标签的后代（后代包括：儿子、孙子、重孙子……）中，找到满足选择器2的标签，设置样式

div a {
    color: red;
}

相邻兄弟选择器

相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素，这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到加号+，加号两边为相邻的两个元素，选择器会匹配加号后面的元素

div + p {
    color: red;
}

通用兄弟选择器

选中后面所有的兄弟，除了自己

p ~ p {
    color: pink;
}

4、CSS特性

4.1 继承性

某些属性我们只需要给父元素加子元素也会生效。有这样的特点的存在好处就是可以减少代码。给父元素加子元素就有了。如果元素有默认样式，此时继承性依然存在，但是优先显示默认样式

4.2 层叠性

所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖

给同一个标签设置不同的样式：会共同作用在标签上
给同一个标签设置相同的样式：最终写在最后的样式会生效
只有当选择器优先级相同时，才能通过层叠性判断结果

4.3 优先级

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式

权重叠加计算

如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
第一级：行内样式的个数
第二级：id选择器的个数
第三级别：类选择器的个数
第四级别：标签选择器的个数
比较规则
- 先比较第一级数字，如果比较出来了，之后的统统不看
- 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
- 如果最终所有数字都相同，表示优先级相同，则比较层叠性

5、作业

大致做出一模一样的网站

https://static.zzhitong.com/lesson-files/html/code/3-3.html

6、作业解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一天 作业</title>
    <style>
        h3{
            font-size: 25px;
        }
        h2{
            color: orange;

        }
        ul{
            color: pink;
        }
    </style>


</head>
<body>
       <h3>秋季赛快讯：Fly马超长驱直入拆掉水晶，重庆QG零封上海EDG.M锁定季后赛</h3>
       <p>王者荣耀电竞 时间：2020-11-15 22:41:31</p>
       <h2><strong>11月15日2020KPL秋季赛常规赛第九周第五日第三场比赛，由上海EDG.M vs 重庆QGhappy，以下是本场比赛快讯。</strong></h2>

       <ul>
            <li>第一局</li>
            <li>蓝色方：上海EDG.M</li>
            <li>红色方：重庆QGhappy</li>
       </ul>
       <ol>
            <li>上海EDG.M禁用：公孙离 盾山 沈梦溪 猪八戒</li>
            <li>上海EDG.M选用：吕布 镜 姜子牙 孙尚香 太乙真人</li>
            <li>重庆QGhappy禁用：鲁班大师 马可波罗 张良 上官婉儿</li>
            <li>重庆QGhappy选用：廉颇 橘右京 干将莫邪 虞姬 张飞</li>
       </ol>
       <p>
           <img src="https://static.zzhitong.com/lesson-files/html/img/3-1.jpg" alt="" width="876" height="493">
       </p>
</body>
</html>

零度℃192

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础（二）----- CSS初识

样式表优点缺点使用情况使用场景行内样式表书写方便没有实现结构与样式分离，不便于维护，不可以重复利用极少某个标签需要单独的样式设置时使用内嵌样式部分结构与样式分离，较便于维护没有彻底实现结构与样式分离，不可以重复利用一般css代码量不多，且和当前页面联系紧密不需要复用时使用外链样式表完全实现结构与样式分离，可重复利用如果代码量较少情况下，引入法更麻烦最多，推荐css代码量大时，或者需要重复利用时使用。
复制链接

扫一扫