CSS (为网页添加样式)

ゝ一世哀愁。 2022-06-14 00:36 309阅读 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 条评论，309人围观）

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

相关阅读

相关 CSS之为网页添加样式

文章目录为网页添加样式术语解释选择器声明块 CSS代码书写位置为网页添加样式

Dear 丶/ 2023年02月14日 02:24/ 0 赞/ 25 阅读

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

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

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

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

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

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

相关 CSS控制网页样式

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

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

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

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

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

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

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

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

相关为网页添加 ico图标

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

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

相关 JavaScript为字符串添加样式

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

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

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

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

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

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

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

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