CSS (为网页添加样式)

ゝ一世哀愁。 2022-06-14 00:36 208阅读 0赞

## 1 认识CSS样式 ##

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

如下列代码：

p{
       font-size:12px;
       color:red;
       font-weight:bold;
    }

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

## 2 CSS样式的优势 ##

为什么使用css样式来设置网页的外观样式呢？右边编辑器是一段文字，我们想把“`超酷的互联网`”、“`服务及时贴心`”、“`有趣易学`”这三个短语的文本颜色设置为红色，这时就 可以通过设置样式来设置，而且只需要编写一条css样式语句。

第一步：把这三个短语用<span></span>括起来。

第二步：写入下列代码：

span{
        color:red;
    }

观察结果窗口文字的颜色是否变为红色了。

## 3 CSS代码语法 ##

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

[![52fde5c30001b0fe03030117.jpg][]][52fde5c30001b0fe03030117.jpg]

选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：

p{font-size:12px;color:red;}

注意：

(1) 最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。

(2) 为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：

p{
       font-size:12px;
       color:red;
    }

## 4 CSS注释代码 ##

就像在Html的注释一样，在CSS中也有注释语句：用`/*注释语句*/`来标明（Html中使用``)。就像下面代码：

[![52fd724e0001768503250108.jpg][]][52fd724e0001768503250108.jpg]

[52fde5c30001b0fe03030117.jpg]: /images/20220614/f55680c2ebdd48da9eb8a0da6812257c.png
[52fd724e0001768503250108.jpg]: /images/20220614/58bd39818bdb48fdb685d56a5a1bdc87.png

发表评论取消回复

表情：

评论列表（有 0 条评论，208人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts标题添加样式_如何使用HTML向网页添加标题和样式

echarts标题添加样式 [How To Build a Website With HTML][] [如何使用HTML构建网站][How To Build a Websit

怼烎@/ 2022年11月28日 15:26/ 0 赞/ 280 阅读

相关 CSS(网页样式语言)基础,网页CSS设计样式基础知识点小白教程

什么是CSS？ CSS由哈坤·利在1994年提出，到1996年正式完成了CSS语言，并且在1998年收录到W3C组织。 CSS(Cascading Style sheet)

深碍√TFBOYSˉ_/ 2022年09月02日 14:55/ 0 赞/ 251 阅读

相关 CSS控制网页样式

CSS（Cascading Style Sheets）层叠样式表示一种用来表示HTML或XML等的文件样式的计算机语言，能够对网页中的对象的位置排版进行像素级的精

亦凉/ 2022年08月19日 04:49/ 0 赞/ 236 阅读

相关 CSS+DIV网页样式与布局

一、什么是CSS? CSS(Cascading Style Sheets),中文译为层叠样式表，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标

傷城~/ 2022年08月05日 02:19/ 0 赞/ 205 阅读

相关 CSS (为网页添加样式)

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

ゝ一世哀愁。/ 2022年06月14日 00:36/ 0 赞/ 209 阅读

相关精通CSS+DIV网页样式与布局--初探CSS

CSS英文名Cascading Style Sheet，中文名字叫层叠样式表，是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言，D

╰半橙微兮°/ 2022年05月30日 03:47/ 0 赞/ 191 阅读

相关为网页添加 ico图标

什么是 ico图标 > ico是Icon file的缩写，是Windows的图标文件格式的一种。图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不

冷不防/ 2022年03月20日 03:52/ 0 赞/ 281 阅读

相关 JavaScript为字符串添加样式

<script type="text/javascript"> var txt="Hello World!" document.write("

柔光的暖阳◎/ 2021年12月13日 01:39/ 0 赞/ 324 阅读

相关 jquery css 添加 !important 样式无效

一、问题要用jquery中css方法覆盖css样式中的color: 998!important的样式。原来用的是： $('box').css

爱被打了一巴掌/ 2021年09月16日 05:54/ 0 赞/ 627 阅读

相关 jQuery动态添加删除CSS样式？

jQuery动态追加和移除CSS样式，有两个CSS样式操作方法，一个是追加样式addClass，一个是移除样式removeClass，下面通过一个实例讲解用法。

小灰灰/ 2020年04月21日 07:15/ 0 赞/ 952 阅读