css基础(部分)|青训营笔记

小熊猫1
87 阅读3分钟

这是我参与「第四届青训营」笔记创作活动的的第1天

什么是css

全称

Cascading Style Sheets,通常称为CSS样式表或层叠样式表（级联样式表）

作用

  • 为HTML标记语言提供了一种样式描述
  • 即【设置HTML页面中的元素的位置、排版、样式外观等】 如文本内容（字体、大小、对齐方式等）、图片的外形（宽、高、边框等）

css语法规范

image.png

CSS 规则由两个主要的部分构成：选择器、一条或多条声明

选择器:通常是需要改变样式的 HTML 标签。

声明组：以大括号{}括起来

每条声明由一个属性和一个值组成, 属性与属性值之间以【冒号】分隔 多个声明，用【分号】将每个声明分开

css引入

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档，插入样式表的方法有三种:外链，嵌入，内联

外链

<head>
	<link rel="stylesheet" href="style.css">
</head>

将CSS编写在扩展名为.css 的单独文件中,使用link标签引用

  • href="" 资源链接的地址
  • rel表示引入文 件与当前文 档的关系
  • stylesheet为样式表

嵌入

<style>
     div{
        width: 200px;
        height: 200px;
    }
</style>

在HTMLhead标签的内部，由style标签包含的样式

内联

<div style="width:100px;height:100px;background-color:red;">盒子</div>

通过HTML元素的style属性设置样式

复合选择器

概述：由两个或多个基础选择器通过不同的方式组合而成的选择器

常用复合选择器

后代元素选择器

  • 语法

    • E F{ 样式声明 }
    • 空格连接一个或多个选择器

  • 作用

    • 选择E元素内部包含的所有F元素

  • 代码示例

    .box a{
    color:Red;
}

子元素选择器

  • 语法

    • 示例：E>F{ 样式声明 }
    • 描述：>大于号 连接一个或多个选择器

  • 作用：选择E元素内部包含的所有直接子元素F （第一嵌套层级）

  • 代码示例

    .box > a{
    color:Red;
}
<div class="box">
    <a href="#">这个a会被应用样式</a>
    <p>
        <a href="#">这个a不会被应用样式</a>
    </p>
</div>

相邻选择器

  • 语法

    • 示例：E+F{ 样式声明 }
    • 描述：+加号 连接一个或多个选择器

  • 作用：E元素之后紧跟着的兄弟元素F

  • 代码示例

    .box + p{
    background-color:red
}
<p>这个P元素不会被应用样式</p>
<div class="box">box</div>
<p>这个P元素会被应用样式</p>

交集选择器

  • 语法

    • 示例：E.F{ 样式声明 }
    • 描述：无连接符

  • 作用: 选择同时被所有选择器交集选中的元素

  • 代码示例

    p.box{
    background-color:red
}
<p class="box">这个元素会被应用样式</p>
<div class="box">这个元素不会被应用样式</div>

并集选择器

  • 语法

    • 示例：E，F{ 样式声明 }
    • 描述：逗号 连接一个或多个选择器

  • 作用：使用逗号分隔的列表来对选择器进行分组，给列表中每一个选择器选中的元素设置样式

  • 代码演示

伪类选择器

超链接的四种状态伪类

  • 语法

    • 语法：：冒号标识

    • 代码示例：

      a:link{ css样式 }链接未被访问
a:visited{ css样式 }链接被访问过后
a:hover{ css样式 }链接被鼠标悬停
a:active{ css样式 }链接被激活（强调鼠标按下抬起）

  • 总结： （1）书写顺序 l-h-v-a （2）实际工作中最常用的是:hover （3）可以与其它选择器结合灵活使用

总结

上述内容属于css基础中的部分知识,css属性太多未做介绍,后续内容用到会做相应补充说明

avatar
文章
阅读
粉丝