CSS基础知识(一)-IT技术-益华网络-网站建设_小程序开发|网页设计

CSS基础知识(一)

发布时间：2025-09-01 00:20:24 作者：益华网络来源：undefined 浏览量（0）点赞（0）

摘要：一、什么是CSS CSS全称为层叠样式表(Cascading Style Sheets)，通常又称为风格样式表(Style Sheets)，它是用来进行网页设计的；在网页制作时采用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”； <styletype="text/css"> p{ font-size:12px; color:#fff;}</style><body></body>

五、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属性引用类样式，如下所示； <style>.class1{ font-size:18px; color:#f00;}</style><body><pclass="class1">hello world！</p><p>hello world!</p></body>

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

ID选择器：

ID选择器的使用方法和类选择器相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此它的针对性更强；比如说有一个类选择器.class1，那么它可以在页面的多个标签中应用，有一个ID选择器class1，那么它只能在页面中用一次； <style>.class1{ font-size:18px; color:#f00;}#id1{ font-size:26px; color:#0A00F3;}</style><body><pclass="class1">这是第一行哟</p><pclass="class1">这是第二行哟</p><pclass="class1">这是第三行哟</p><pid="id1">这是第二行哟</p><p>这是第二行哟</p></body>

效果图