初识CSS（自己的学习分享）

hzx229

已于 2022-03-22 10:11:51 修改

阅读量100

点赞数

文章标签：学习经验分享 css

于 2022-03-18 09:37:32 首次发布

本文链接：https://blog.csdn.net/hzx229/article/details/123566410

版权

本文详细介绍了前端开发中的CSS3，包括层叠样式表的概念、div与span的区别以及三种CSS引入方式：行内样式、内部样式表和外部样式表。此外，还探讨了CSS样式的优先级和选择器，如基本选择器、高级选择器、伪类选择器以及属性选择器，为理解前端样式规则提供了全面的知识框架。

摘要由CSDN通过智能技术生成

前端三驾马车：

一、什么是css3

Cascading Style Sheet 层叠样式表

层叠：多层，说明可以通过多个样式去表现

样式：具体的各种修改展示形式表现

表：表格

二、 div

div属于块级元素，每次出现新的div标签会进行换行操作

span属于行内元素，他在出现新的span时不会进行换行

三、三种引入CSS的方式

1. 行内样式

<h2 style="font-size: 20px; color: blue;">你好CSS3</h2>

2. 内部样式表

<head>
    <style>
        h1{
            font-size:22px;
            color:red;
        }
    </style>
</head>
<body>
    <h1>
        你好CSS
    </h1>
</body>

在同一个html页面中，对于观察比较方便。

3. 外部样式表

3.1 <link>引入

<link rel="stylesheet" href="cssHtml1.css" type="text/css">

href引入路径，rel=“stylesheet”，type=“text/css”需写死。

3.2 import引入

@import url("importCss.css");

四、 css样式优先级

行内样式>内部样式>外部样式表

就近原则

五、css选择器

1. 基本选择器

类选择器：'.'+'class的名称'

id选择器：‘#’+‘id的名称’

标签选择器：当我们一个标签被多个选择器选中时，判断逻辑强弱为：

ID选择器>类选择器>标签选择器

2. 高级选择器

后代选择器：E F(只需要被包裹)

子类选择器：E>F(必须要上一级的标签指定的第一个元素)

相邻兄弟选择器：E+F(后面第一个元素)

通用兄弟选择器：E~F(后面所有元素)

3. 伪类选择器

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

4. 属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配