CSS使用基本条目

最新推荐文章于 2022-05-08 15:55:43 发布

Qzzzzm

最新推荐文章于 2022-05-08 15:55:43 发布

阅读量163

点赞数

分类专栏：小问题

本文链接：https://blog.csdn.net/qq_25408127/article/details/79292123

版权

小问题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS使用基本条目

CSS（cascading style sheets）层叠样式表能够对网页中的元素的排版进行像素级的精准控制，表现形式与文档结构的分离。

一、优势

文档体积缩小，如减少了重复代码。
信息检索快，如搜索引擎是跳过表现形式检索文档结构的。
可读性好，主要体现在表现形式与文档结构的分离。
表现形式丰富

二、引入CSS到网页中的方法

内联样式：在页面元素标签中直接使用style属性指定样式。
```
<p style="color:#FF0000;">...</p>
```

内部样式表：在页面的头部标签中使用style标签定义样式，只有在该页面中有效。

<head>
<title>...</title>
<style>
p{color:#FF0000;}-----------------------//表现形式
</style>
</head>
<body>
<p>...</p>
<p>...</p>--------------------------//文档结构
<p>...</p>
</body>

外部样式表：把声明的样式保存在样式文件中，在页面中通过<link>引用该外部样式表文件。如：
```
<link rel="stylesheet" type="text/css" href="styles.css">
```
优先级：内联>内部>link

三、语法格式

selector{property:value1;property:value2;}

Selector选择器

标记选择器（元素选择器），如
```
E{......}//E代表有效的HTML元素
```

类选择器，如

[E].classValue{......}//E表示有效的HTML元素，[]内元素可省

<div class='value1'>...</div>
<div class='value2'>...</div>
<div class='value1 value2'>...</div>//同时两种class，样式叠加

id选择器，如

[E]#idValue{......}//E表示有效的HTML元素,[]内元素可省
<div id='value1'>...</div>
<div id='value2'>...</div>
<div id='value1 value2'>...</div>//不可像类选择器一样叠加使用

选择器组合，如
```
selector1,selector2,selector3{......}
```
选择器嵌套，如
```
selector1 selector2{...}
```

2.常用属性

字体

文本

边框：合并写法 border:width style color;

背景：合并写法 background:url repeat position

Qzzzzm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS使用基本条目

CSS使用基本条目CSS（cascading style sheets）层叠样式表能够对网页中的元素的排版进行像素级的精准控制，表现形式与文档结构的分离。一、优势文档体积缩小，如减少了重复代码。信息检索快，如搜索引擎是跳过表现形式检索文档结构的。可读性好，主要体现在表现形式与文档结构的分离。表现形式丰富二、引入CSS到网页中的方法内联样式：在页面元素标签中直接使用style属性指定样式。&lt;...
复制链接

扫一扫