css知识入门：CSS基础知识一

小君 2023-02-06 03:57:54 260

css知识入门：CSS基础知识一内部样式：行内样式：ID选择器：<style> .class1{ font-size:18px; color:#f00; } #id1{ font-size:26px; color:#0A00F3; } </style> <body> <p class="class1">这是第一行哟</p> <p class="class1">这是第二行哟</p> <p class="class1">这是第三行哟</p> <p id="id1">这是第二行哟</p> <p >这是第二行哟</p> </body> 图2六、CSS样式引入方法

一、什么是css

CSS全称为层叠样式表(Cascading Style Sheets)，通常又称为风格样式表(Style Sheets)，它是用来进行网页设计的；
在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制，只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式；

二、CSS的优势

内容与表现分离，也就是使用前面学习得HTML语言制作网页，使用CSS设置网页样式、风格、并且CSS样式单独存放在一个文件中，这样只要HTML文件引用CSS文件就可以了，便于后期的CSS样式的维护；
表现的统一，可以使网页的表现非常同意，并且容易修改；
丰富的样式，使得页面布局灵活；
减少网页的代码量，增加网页的浏览速度；
运用独立页面的CSS，有利于网页被搜索引擎收录；

三、CSS的基本语法结构

CSS和HTML一样都是浏览器能解析的计算机语言，因此CSS也有自己的语法结构；
CSS规则由两部分构成，选择器和声明，声明必须放在大括号中{}，可以是一条或多条；
每条声明由一个属性和值组成，属性和值用冒号分开，每条语句以英文的分好结尾；

# h1表示选择器 # font-size和color表示属性 # 12px和#fff表示属性值 p{ font-size:12px; color:#fff; } 四、<style>标签

在HTML中通过使用<style>标签引入CSS样式，<style>标签用于为HTML文档定义样式信息；
<style>标签位于<head>标签中，它规定浏览器中如何呈现HTML文档；
在<style>标签中，type是必须属性，用于定义style元素的内容，值为“text/css”；

五、CSS选择器

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素；
所有HTML语言中的标签样式都是通过不同的CSS选择器进行控制的；
CSS的选择器分为三种，分别是：标签选择器、类选择器、ID选择器；

标签选择器：

一个HTML页面由很多的标签组成，例如<html>、<p>、<h1>、<div>、<span>等，CSS标签选择器就是用来声明这些标签的；
每种HTML标签的名称都可以作为相应的标签选择器的名称，例如<p>标签和<h1>标签，如果我们需要在它们上面定义一个标签选择器，那我们要怎么做呢；

p{ font-size:12px; } h1{ font-size:16px; }

需要注意的是，一个HTML页面会有很多的<p>标签和<h1>标签，标签选择器一旦声明，那么页面的所有该标签都会应用，这样虽然用起来很方便，但是如果想要给其中一个标签单独定义属性则不能，此时需要使用类选择器或者ID选择器了；

类选择器：

类选择器的名字可以由用户自定义，属性和值跟标签选择器一样，必须符合CSS规范，它的语法如下；

# .class1为类选择器的名字 # font-size为属性 # 12px为属性值 .class1{ font-size:12px; }

和标签选择器不同的是，设置了类选择器之后就要在HTML的标签中应用相应类样式，使用标签的class属性引用类样式，如下所示；

如下图所示，上面一行p标签是应用了类样式class1，下面一行则没有，所以上面一行样式有变化，下面一行没有变化；

css知识入门：CSS基础知识一(1)

图1

ID选择器：

ID选择器的使用方法和类选择器相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此它的针对性更强；
比如说有一个类选择器.class1，那么它可以在页面的多个标签中应用，有一个ID选择器class1，那么它只能在页面中用一次；

css知识入门：CSS基础知识一(2)

图2

六、CSS样式引入方法

在HTML页面中，引入CSS样式有三个方法，分别是：行内样式、内部样式和外部样式；

行内样式：

行内样式就是在HTML中直接使用style属性设置CSS样式，用法为：<标签名 style="样式声明;"></标签名>；
这种方法仅对当前的HTML标签起作用，并且是写在HTML标签中的，因此这种方法不能使得内容和表现相分离，没有体现出CSS的优势；

内部样式：

把CSS代码写在<head>的<style>标签中，与HTML内容位于同一个HTML文件中，这就是内部样式表；
这种方法的优势为方便在同页面中修改样式，但是不利于在多页面间共享复用代码和维护代码，对内容与样式的分离也不够彻底；

外部样式：

实际开发中我们都是使用这种方式来引入CSS样式，它是把CSS代码另存为一个单独的CSS文件，文件的扩展名为.css，然后在页面中引入这个文件；
引入外部样式的语法为：<link rel="stylesheet" type="text/css" href="css文件路径">

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="style.css" /> # 引入外部css文件style.css 所有的样式都写在这个文件中 </head> <body> <p class="class1">这是第一行哟</p> <p class="class1">这是第二行哟</p> <p class="class1">这是第三行哟</p> <p id="id1">这是第二行哟</p> <p >这是第二行哟</p> </body> </html>

七、样式优先级