前端学习（二）CSS基础1

最新推荐文章于 2023-12-04 10:31:32 发布

赏善罚饿

最新推荐文章于 2023-12-04 10:31:32 发布

阅读量9.1k

点赞数 1

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/whitefish520/article/details/107526331

版权

本文详细介绍了CSS的基础知识，包括CSS的三种引入方式（行内式、内部样式表、外部样式表）及其优缺点，以及CSS选择器如标签选择器、类选择器、id选择器和通配符选择器的用法。接着讲解了CSS的字体样式、外观属性、盒子模型、背景属性，以及CSS的三大特性：层叠性、继承性和优先级。此外，还探讨了标签显示模式、Emmet语法和复合选择器。内容深入浅出，适合前端初学者学习。

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

什么是CSS

CSS的引入：

由于HTML只关注内容的语义，导致单纯用HTML做出的网页很丑
在HTML中设置样式非常不方便，也非常繁琐
使用CSS能让网页更加美观
CSS让HTML从样式中脱离，HTML专门做结构，CSS专门做样式

CSS的定义：层叠样式表（Cascading Style Sheets），用来做网页的样式，CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景控制以及整体排版等，而且还可以针对不同的浏览器设置不同的样式

CSS的作用：主要用于设置HTML页面中的文本内容（字体、大小、对齐等）、图片的外形（宽高、边框、边距等），以及版面的布局和外观显示样式

CSS的三种引入方式

行内式

概念：也称为内联样式、行间样式，是通过标签中的style属性来设置样式
基本语法：

<标签名 style="属性1:属性值; 属性2:属性值 ... ">显示内容</标签名>

任何HTML标签都拥有style属性，因此都可以使用行内式来设置样式，例如

<p style="color:green; font-size:24px">东边日出西边雨，我就问你行不行</p>

注意以下几点：

style只是标签的一个属性
样式属性名和属性值之间，以冒号:隔开
不同的样式属性之间，以分号;和空格隔开
只能控制当前所在的标签及嵌套在该标签下的子标签
没有实现样式和结构相分离

内部样式表

概念：也称内嵌样式表，是将CSS代码集中写在HTML文档的head标签内部，并用style标签定义样式
基本语法如下

<head>
	<style type="text/css">
		选择器 {
    
			属性1:属性值;
			属性1:属性值;
		}
	</style>
</head>

例如：

<head>
	<style type="text/css">
		p {
    
			color:red;
			font-size: 19px;
		}
	</style>
</head>
<body>
	<p>东边日出西边雨，我就问你行不行</p>
	
</body>

注意

其中的样式选择器，其实就是选择哪一些元素来做装修
一般情况下，style标签位于HTML文档的head标签内部
只能控制当前的HTML页面
没有彻底做到样式与结构相分离

外部样式表

概念：也称为外链式或链入式，是将所有的样式放在CSS文件中，通过link标签链入到HTML文档中
基本语法如下

<head>
    <link rel="stylesheet" type="text/css" href="css文件路径" /> 
</head>

注意：

link标签是单标签
link标签需要放在head头部标签中，并且指定link标签的三个属性

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为`stylesheet`，表示被链接的文档是一个样式表文件
type	定义所链接文档的类型，在这里需要指定为`text/css`，表示链接的外部文件为CSS样式表
href	定义所链接外部样式表的url，可以是相对路径，也可以是绝对路径

三种方式的对比

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

CSS基础选择器

选择器的作用：找出特定的HTML元素

标签选择器

概念：标签选择器（元素选择器）是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
语法：

标签名 {
    属性1:属性值;
	属性2:属性值;
    ...
}

作用：标签选择器可以把某一类标签全部选择出来，比如所有的div标签
优点：能快速为页面中同类型的标签统一样式
缺点：不能设计差异化样式

类选择器

类选择器使用英文点号.进行标识，后面紧跟类名，语法如下

.类名 {
	属性1:属性值;
	属性2:属性值;
    ...
}

在标签中，使用class属性调用该样式，例如

<p class="类名"></p>

优点：可以为元素单独定义样式，可以选择一个或多个标签，实现差异化样式
注意：
- 类选择器使用英文点号.来表示，后面紧跟类名，类名是自定义的
- 定义类名时，对于长名称或词组，不同的单词使用横线连接
- 不要以纯数字、中文等命名，要做到见名知义

类选择器的特殊用法

可以给标签指定多个类名，从而达到更多的选择目的，例如

<div class="pink font20"

最低0.47元/天解锁文章

赏善罚饿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录