前端学习笔记—CSS

最新推荐文章于 2024-01-22 21:50:59 发布

ostracod_lvj

最新推荐文章于 2024-01-22 21:50:59 发布

阅读量793

点赞数

分类专栏： Web前端学习之路

本文链接：https://blog.csdn.net/liji_xc/article/details/48022293

版权

Web前端学习之路专栏收录该内容

6 篇文章 0 订阅

订阅专栏

笔记内容来源于：慕课网

前端学习笔记—CSS

定义

CSS全称为“层叠样式表(Cascading Style Sheets)”，它主要用于定义HTML内容在浏览器中的显示样式，如字体的大小、颜色、加粗等样式。

使用CSS样式的一个好处就是通过定义某个样式可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

CSS的代码语法

CSS样式由选择符和申明组成，而申明又由属性和值组成，如下图所示：

选择符：又称为选择器，指明网页中要应用样式规则的元素。

申明：在英文大括号“｛｝”中得就是申明，属性和值之间用“：”分隔。

注释：CSS中代码注释用 /* 注释语句*/ 来标明，区别于HTML得注释：<!-- 注释语句-- >

分类

内联式
嵌入式
外部式

内联式：CSS样式表就是把CSS代码直接写在现有得HTML标签中，如：

<p style="color:red">这里文字是红色。</p>

嵌入式：嵌入式CSS样式就是把CSS样式代码写在<style type="text/css"></style>标签中间，如：

<style type="text/css">
<span style="white-space:pre">	</span>span{
<span style="white-space:pre">		</span>color:red;
<span style="white-space:pre">	</span>     }
</style>

注：嵌入式CSS样式必须写在<style></style>之间，并且一般情况下嵌入式CSS样式写在<head></head>之间。

外部式：就是把CSS代码写在一个单独得外部文件中，这个CSS样式文件以“.CSS”为扩展名，在<head>内（不是<style>标签内）使用<link>标签将CSS样式文件链接到HTML文件内，如：

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

注：

1、CSS样式文件名称一般以有意义的英文字母命名；

2、rel=“stylesheet” type="text/css"是固定写法不可修改；

3、<link>标签位置一般写在<head>标签内。

优先级

如果有一种情况：对于同一个元素，我们同时使用三种CSS样式，那么最终哪种方法有效呢？如：

1、使用内联式CSS设置“超酷得互联网”为粉色；

2、使用嵌入式设置为红色；

3、使用外部样式设置为蓝色。（在style.css）文件中设置。

HTML代码为：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
span{
   color:red;
}
</style>
</head>
<body>
    <p>慕课网，<span style="color:pink">超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>
</body>
</html>

style.css代码为：

span{
   color:blue;
}

最终的效果为：

我们可以发现，最终的字体颜色为粉色，因为它们级的，它们的优先级为：

内联式 > 嵌入式 > 外部式

注意：嵌入式>外部式有一个前提：嵌入式CSS样式的位置一定是在外部式的后面，如上面的HTML代码：

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

就是在

<style type="text/css">
span{
   color:red;
}
</style>

的前面。

总的一句话就是就近原则（离被设置元素越近优先级越高）

元素分类

HTML中的标签元素大体被分为三种不同的类型：块状元素、内联元素（行内元素）和内联块元素。

常见的块状元素：

常见的内联元素：

常见的内联块元素

ostracod_lvj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记—CSS

笔记内容来源于：慕课网前端学习笔记—CSS定义CSS全称为“层叠样式表(Cascading Style Sheets)”，它主要用于定义HTML内容在浏览器中的显示样式，如字体的大小、颜色、加粗等样式。使用CSS样式的一个好处就是通过定义某个样式可以让不同网页位置的文字有着统一的字体、字号或者颜色等。CSS的代码语法CSS样式由选择符和申明组成，而申
复制链接

扫一扫