5.前端基础之CSS基础2024-03-19

一、什么是css

CSS(Cascading Style Sheets的缩写)，翻译为“层叠样式表”或者“级联样式表”，简称样式表。

主要用来给HTML网页设置外观或者样式(HTML网页中的文字大小、颜色、字体、网页的背景颜色、背景图片等)。

通俗来说就是给HTML标签添加样式的，让它变得更加好看

二、注释语法

 /*单行注释*/
/*
多行注释
多行注释
*/

例如：
通常我们在写css样式的时候也回用注释来划定样式区域(因为HTML代码多，所以对应的css代码也会很多

 /*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...

三、css的语法结构

CSS的定义是由三部分组成的，包括选择符( selector)、属性( properties)、属性值（value）语法如下：
 选择器{
    属性1:属性值1;
    属性2:属性值2;
    ……
    }
注意：每个属性有一个值，属性和值用冒号隔开。如果要定义不止一一个“属性:属性值”的声明时，需要用分号将每个声明分开，最后一条声明规则可以不加分号（建议每条声明的末尾都加上分号，会减少出错的可能。）

例如：
 h1{              /*标记选择器h1选中网页的所有<h1>标记*/
color :red;      /*设置文字的颜色属性为红色*/
font-size:14px;  /*设置文字的大小属性为14像素*/
}
注意：css中/* */是注释。

如果属性值由多个单词组成是需要用引号括起来，例如：
 h2{
    font-family: 'New Century Schoolbook' ;
}
注意：

包含空格不会影响CSS在浏览器中的工作效果

CSS对大小写是不敏感的

如果涉及与HTML文档一起工作， class类选择器和id选择器对名称的大小写是敏感的。

需要使用几个属性值进行定义，每个属性值之间用逗号隔开，例如：
 h2{
    font-family: Times, ' New Century Schoolbook' ，Georgia;
}

四、css的四种引入方式

主要有四种方法：内嵌样式、内部样式、使用标记链接外部样式表、使用CSS的@import标记导入外部样式文件。

内嵌样式：标签内部通过style属性直接编写

内部样式：style标签内部直接书写

使用标记链接外部样式表：引入外部CSS文件(最正规的方式，解耦合)

使用CSS的@import标记导入外部样式文件：

（1）style标签内部直接书写

head内style标签内部直接编写css代码
建议在小白学习阶段可以使用方便查看

   <style>
    <!-- 方式一 -- >
    h1 {
      color: blue;
    }
  </style>

（2）引入外部CSS文件(最正规的方式，解耦合)

head内link标签引入外部css文件
作中一般使用的都是link形式符合标准

 /*css文件*/
h1 {
    color: blue;
}

 <!--HTML文件-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="01.css">
</head>
<body>
<h1>
    这是一级标题
</h1>
</body>
</html>

（3）行内式(一般不用)

标签内部通过style属性直接编写
因为它会将HTML和CSS柔和到一起
增加了耦合度

 <h1 style="color: yellow">老板好，要上课吗</h1>

（4）使用@import引入外部样式文件

格式：

 @import url(样式表源文件地址)

注意：@import只能放在<style>标记内使用，而且必须放在其他CSS样式之前。其中，urI为关键字，不能随便更改。

例如：

 <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>样式使用</title>
	<style type="text/css">
		@import url("css3-3.css")
	</style>
</head>
<body>
<a href="http://www.taobao.com" id="p">淘宝</a> <br>
	<a href="http://www.taobao.com" >淘宝</a>
</body>
</html>

外部样式文件：

 #p{
     color:red;
     font-size:20px;
}

五、叠层样式优先级

CSS层叠样式表中的层叠指样式的优先级，当内嵌样式、内部样式、外部样式都对某个HTML标记进行了样式定义，即当样式定义发生冲突时，以优先级高的为最终显示效果。

浏览器会按照不同的方式来确定样式的优先级，其原则如下。
(1)按照样式来源不同，其优先级: 内嵌样式>内部样式>外部样式>浏览器默认样式

(2)按照选择器不同，其优先级:id选择器>class类选择器>元素选择器

(3)当样式定义的优先级相同时，取后面定义的样式。

总结：如何学css

先学查找标签
- css查找标签的方式一定要学会，因为后面所有的框架封装的查找语句都是基于css来的
之后再学如何添加样式

posted @ 2024-03-19 16:25 Xiao0101 阅读(21) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端基础之JavaScript引入

· 前端基础之HTML基础

· 前端CSS基础

· 【4.0】前端基础之CSS

· 前端技术对css的学习

公告

一个不像技术博客的博客

-------------------------------

时钟canvas

昵称： Xiao0101
园龄： 1年3个月
粉丝： 6
关注： 9

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. 爬虫之requests模块请求方式(1)

xiao

前端基础之CSS基础