CSS基础知识（一）

最新推荐文章于 2023-02-08 09:54:47 发布

猿知了

最新推荐文章于 2023-02-08 09:54:47 发布

阅读量368

点赞数

分类专栏：前端 Css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_43702977/article/details/112743648

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Css

3 篇文章 0 订阅

订阅专栏

CSS

定义

层得样式表
- 用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。
- CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
网页三要素
1. HTML标签决定页面上元素的基本结构
2. CSS 用于设置HTML元素的样式
3. JavaScript 用于控制页面上的行为

语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
- ```
ector {declaration; declaration; ... declarationN}
```
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和值组成。
属性（property）是您希望设置的样式属性（style property）。每个属性有一个值。属性和值被冒号分开
- ```
ector { property; value;}
```
- ```
{color:red; font-size:14px;}
```
h1 是选择器，color 和 font-size 是属性，red 和 14px 是值
- 作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素

用法

内联样式

直接通过元素的 style 属性（attribute）来指定的样式被称作内部样式(也有人称作行内样式 )
- ```
<1div style=" border : 1px solid blue ; width : 50% ; height : 100px ; " >
<2/div>
```
说的更直接些，就是在开始标签中通过标签的 style 属性(attribute)来指定元素的样式。
必须注意，这里的 style 属性(attribute)是属于当前元素的 (即当前标签的)。

内部样式

所谓内部样式，就是在HTML文档中，通过style元素来嵌入CSS样式
- ```
<style type="text/css">
</style>
```
style是一个HTML标签，属于HTML范畴，不属于CSS代码

而在之间书写的内容才属于CSS代码。
建议将

外部样式表

单独的 CSS (后缀是.css )文件，当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部
- ```
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
```
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
- ```
{color: sienna;}
{margin-left:20px;}
{backgroud-color:#ccc;}
```

@import

import用于从其他样式表导入样式规则

```
imoprt ur l;
```

import; custom.css;
import ur l("fineprint.css") print;

样式优先级

内联样式>内部样式>外部样式
可以在属性值的后面添加 !important提升样式的优先级

选择器

选择器是用来决定要改变谁的样式，选择器可以分为四类十七种，我们将其简化。我们接下来要介绍几种，标签选择器、ID选择器、class选择器、子元素选择器、后代选择器、伪类、通配选择器、组合选择器。

标记(标签)选择器

网页标签名与选择器同名标记选择器也称作标签选择器，英文中写作 tag selector，其基本用法为:
- ```
Name{
propertyName:propertyValue;
}
```

Class选择器

网页哪个标签使用Class选择器,就在标签添加** **class属性，值就是Class选择器名称 class 选择器也称作 class 选择符，英文中称作class selector
其作用是选择页面上的元素，class属性，（attribute）中包含指定（className）元素
因为同在一个HTML元素的class属性中能够可以包含（0-n）个className
注意：将这里的 class selector 翻译成类选择器，将 className 翻译成类名是及其不合适的。

属性选择器

属性选择器也称作属性选择符，英文中称作attribute selector、
其作用是根据 HTML 元素的属性来选择相应的元素。
属性选择器的用法比较多，以下表格中列举了部分属性选择的用法和作用。
*
我们仅学习较为常用的三种[attributeName],[attributeName=value],[attributeNaame=value]

[attributeName]

[attributeName] 形式的属性选择器用于选择拥有attributeName属性的 HTML 元素。
type可以选择两个 input元素，因为他们都拥有了type属性。
type无法选择form元素，因为form元素不拥有type属性
使用【attributeName】形式的属性选择器选择元素时需注意
- 仅关注元素是否拥有指定attributeName对应的属性
- 与属性的属性值无关（即不考虑该属性的属性值）

[attributeName=value]

[attributeName=value] 形式的属性选择器用于选择拥有指定属性且该属性值仅等于指定值的 HTML 元素。

比如对于以HTML元素来说：

class=“wrapper first odd”></div>
class="wrapper second even"></div>
class="wrapper"></div>

[attributeName~=value]

[attributeName~=value] 形式的属性选择器用于选择拥有指定属性且该属性值包含指定值的 HTML 元素。
比如对于以HTML元素来说：
- ```
class=“wrapper first odd”></div>
class="wrapper second even"></div>
class="wrapper"></div>
```
使用[attributeName~=value] 选择以上三个div，此时的[attributeName~=value] 作用与.wrapper是相同的

猿知了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识（一）

CSS定义层得样式表用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。网页三要素HTML标签决定页面上元素的基本结构CSS 用于设置HTML元素的样式JavaScript 用于控制页面上的行为语法CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明ector {declaration; declaration; ... d
复制链接

扫一扫