CSS基础（简介+使用理由+三种使用方式+基本语法+注释+样式级联+样式继承）

最新推荐文章于 2022-11-30 21:37:28 发布

北溟南风起

最新推荐文章于 2022-11-30 21:37:28 发布

阅读量278

点赞数

本文链接：https://blog.csdn.net/QQQZSJ/article/details/104677904

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

2.内部样式表（头部style，body起作用）

3.外部引用CSS（ link rel="stylesheet" href="index.css" ）在网站优化方面最有作用

CSS的三点简介

CSS，Cascading Style Sheets意为：层叠样式表
样式定义如何显示HTML元素
样式通常存储在样式表中

使用CSS的三点理由

CSS允许开发者针对HTML元素应用特定的样式。
CSS运行开发者将样式与页面内容分离，便于维护。
CSS可以将web页面的所有样式从HTML中抽离出来，建立成为一个单独的CSS文件进行引用。

HTML使用CSS样式的三种方式

1.内联CSS（样式直接作用于单个元素）

使用方法:将CSS属性直接添加到相关标签中。

<h2 style="color:green;">这是一个使用了内联方式的2号标题<h2>

2.内部样式表（头部style，body起作用）

<head>
<style>
 p_ {
    color:green;
    background-color:pink;
   }
</style>
</head>
<body>
<p_>这是一个使用了内部样式表的段落</p_>
</body>

3.外部引用CSS（ link rel="stylesheet" href="index.css" ）在网站优化方面最有作用

CSS基本语法

CSS是由浏览器解释的样式规则，应用于相应的元素。

样式规则由三部分：选择器；属性；值；

p { color: green; ...; ...; }

/*
1.声明块包含一个或者多个用分号分隔的声明；
2.每一个声明都包含一个由冒号分隔的属性名和值；
3.CSS声明总是以分号结束，声明组则是由大括号包围。
*/


/*
1. p: 选择器 Selector 用于指向需要设置样式的HTML元素
2. Color: 属性 Property 
3. greeen: 值 Value
*/

CSS注释

/*  ...   */

CSS样式的级联

我们通常看到的网页布局，是由不同的样式结合的结果。

通常样式的三个主要来源形成一个级联：

由页面的作者创建的CSS样式
浏览器默认的CSS样式
浏览页面的用户自定义CSS样式

CSS样式的继承

继承是指属性在页面中流动的方式。除非另外定义，否则子元素等一般采用父元素的特征。

<div style="color:red;">
	<p>hello world</p>
</div>

结果分析：

p元素定义在div元素之内，p元素是div元素的子元素，且p元素没有另外定义，所以，p元素将继承div元素的样式特性，文本应当显示红色。

结果展示：

北溟南风起

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基础（简介+使用理由+三种使用方式+基本语法+注释+样式级联+样式继承）

CSS的三点简介CSS，Cascading Style Sheets意为：层叠样式表样式定义如何显示HTML元素样式通常存储在样式表中使用CSS的三点理由CSS允许开发者针对HTML元素应用特定的样式。 CSS运行开发者将样式与页面内容分离，便于维护。 CSS可以将web页面的所有样式从HTML中抽离出来，建立成为一个单独的CSS文件进行引用。HTML使用CSS样式的三种方...
复制链接

扫一扫