CSS1

博主： Xherlock
发布时间：2021 年 09 月 18 日
529 次浏览
暂无评论
2479字数
分类： Web前端

# CSS （一）

## 学习CSS首先需要了解元素的显示效果

## 块级元素

所有块级元素的父元素都是body，其默认宽度与浏览器窗口一样宽，故所有块级元素都与浏览器窗口一样宽

### 特点

- 块级元素会独占一行
- 高度，行高，外边距和内边距都可以单独设置
- 宽度默认是容器的100%
- 可以容纳内联元素和其他的块级元素

### 常见块级元素

~~~html
<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>
~~~

## 行内元素

不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度，高度以及对齐等属性。

### 特点

- 和相邻的行内元素在一行上
- 高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效
- 默认的宽度就是它本身的宽度
- 行内元素只能容纳纯文本或者是其他的行内元素（a标签除外）

### 常见行内元素

~~~html
<input>,<img>,<td>
~~~

## 块级与行内元素的转换

### display 属性

* inline:	值为 inline 将变成行内元素，比如 div不能设置宽高，和行内元素并排
* block:     值为 block 的，比如 span ,能设置宽高（填充父级），独占一行。
* inline-block :     值为 inline-block 也就是变成行内块元素

## 添加CSS的方法

### 行内样式

写在特定HTML标签的style属性中，最好是较为简单的设置属性，它也会覆盖嵌入样式和链接样式

~~~html
<p style="font-size:12px; font-weight:bold; font-style:italic; color:red;">
    My name is Xherlock! My profession is Cyber security!
</p>
~~~

### 嵌入样式

写在HTML文档的head元素中

~~~html
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Homepage</title>
    <style type="text/css">	/* 写入css */
        a:link {
            color: blue;
        }  
        a:visited {
            color: gray;
        }
        a:active {
            color: orange;
        }
		table {
			text-align: center;
			width: 90%;
			margin: 10px auto;
			border: 1px solid #000;
		}
		th {
			background: #ccc;
		}
		td {
			height: 25px;
			width: 25px;
			border: 1px solid #000;
		}
    </style>
</head>
~~~

### 链接样式

把样式集中在一个单独的文件中，称其为样式表，后缀为.css

~~~html
<link rel="stylesheet" href="css/style.css">
~~~

或者

~~~html
@import url(css/style.css)
~~~

但必须出现在其他样式表之前，否则不会被加载

## CSS规则命名惯例

![image-20210918221744136.png][1]

多个选择符组合减少重复输入

~~~html
h1,h2,h3 {
	color: blue;
}
~~~

多条规则外额外为其写一条

~~~html
h1,h2,h3 {
	color: blue;
}
h3 {
	font-size: 12px;
}
~~~

## 选择符

### 上下文选择符

~~~
标签1 标签2{声明}
~~~

标签2是我们选择的目标，只有在标签1是祖先元素的情况下才会被选中

#### 特殊上下文选择符

* 子选择符

标签1**>**标签2：标签1为标签2的父元素
* 紧邻同胞选择符

标签1**+**标签2：标签2必须紧跟在同胞标签1的后面
* 一般同胞选择符

标签1**~**标签2：标签2必须跟在同胞标签1后面（不必紧跟）
* 通用选择符

\*:匹配任何元素

### ID和类选择符

#### 类属性

HTML元素的class属性

* 类选择符：	.类名{}
* 标签带类选择符：    标签.类名{}
* 多类选择符：    类1.类2{}

#### ID属性

\#:    \#style{}或者p#style{}

这里可以联想到链接a中的\#,表示链接的目标在当前页面

~~~html
<a href="#hello">Xherlock's blog</a>
~~~

在《CSS权威指南（第三版）》中特别提及，我们应该合理使用css

![image-20210918232215219.png][2]

#### 小结

ID在页面标记中唯一地标识一个特定元素

类可以应用于任意页面中多个HTML元素的公共标识符

### 属性选择符

~~~html
标签名[属性名] {
	~~~:~~~;
}
~~~

也可

~~~html
标签名[属性名="属性值"] {
	~~~:~~~;
}
~~~

[1]: http://120.78.215.15/usr/uploads/2021/09/929565908.png
[2]: http://120.78.215.15/usr/uploads/2021/09/2907304158.png

最后修改：2021 年 11 月 13 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

Reverse（十一）
浏览次数: 2629
Win11新机鼓捣记录
浏览次数: 2382
栈~数制转换
浏览次数: 1604
C++学习
浏览次数: 1603
Python实现文件管理系统（重命名和删除）
浏览次数: 1575

顶点软件
你写得非常清晰明了，让我很容易理解你的观点。
mars
博主你好，请问怎么知道的alloc函数属于Buffer下的方法...
lj
该评论仅登录用户及评论双方可见
Mr.Guan
:@(赞一个)
Typecho
欢迎加入 Typecho 大家族

CSS1

Xherlock • 2021 年 09 月 18 日

# CSS （一）

## 学习CSS首先需要了解元素的显示效果

## 块级元素

所有块级元素的父元素都是body，其默认宽度与浏览器窗口一样宽，故所有块级元素都与浏览器窗口一样宽

### 特点

- 块级元素会独占一行
- 高度，行高，外边距和内边距都可以单独设置
- 宽度默认是容器的100%
- 可以容纳内联元素和其他的块级元素

### 常见块级元素

~~~html
<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>
~~~

## 行内元素

不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度，高度以及对齐等属性。

### 特点

### 常见行内元素

~~~html
<input>,<img>,<td>
~~~

## 块级与行内元素的转换

### display 属性

## 添加CSS的方法

### 行内样式

写在特定HTML标签的style属性中，最好是较为简单的设置属性，它也会覆盖嵌入样式和链接样式

~~~html
<p style="font-size:12px; font-weight:bold; font-style:italic; color:red;">
    My name is Xherlock! My profession is Cyber security!
</p>
~~~

### 嵌入样式

写在HTML文档的head元素中

### 链接样式

把样式集中在一个单独的文件中，称其为样式表，后缀为.css

~~~html
<link rel="stylesheet" href="css/style.css">
~~~

或者

~~~html
@import url(css/style.css)
~~~

但必须出现在其他样式表之前，否则不会被加载

## CSS规则命名惯例

![image-20210918221744136.png][1]

多个选择符组合减少重复输入

~~~html
h1,h2,h3 {
	color: blue;
}
~~~

多条规则外额外为其写一条

~~~html
h1,h2,h3 {
	color: blue;
}
h3 {
	font-size: 12px;
}
~~~

## 选择符

### 上下文选择符

~~~
标签1 标签2{声明}
~~~

标签2是我们选择的目标，只有在标签1是祖先元素的情况下才会被选中

#### 特殊上下文选择符

* 子选择符

标签1**>**标签2：标签1为标签2的父元素
* 紧邻同胞选择符

标签1**+**标签2：标签2必须紧跟在同胞标签1的后面
* 一般同胞选择符

标签1**~**标签2：标签2必须跟在同胞标签1后面（不必紧跟）
* 通用选择符

\*:匹配任何元素

### ID和类选择符

#### 类属性

HTML元素的class属性

* 类选择符：	.类名{}
* 标签带类选择符：    标签.类名{}
* 多类选择符：    类1.类2{}

#### ID属性

\#:    \#style{}或者p#style{}

这里可以联想到链接a中的\#,表示链接的目标在当前页面

~~~html
<a href="#hello">Xherlock's blog</a>
~~~

在《CSS权威指南（第三版）》中特别提及，我们应该合理使用css

![image-20210918232215219.png][2]

#### 小结

ID在页面标记中唯一地标识一个特定元素

类可以应用于任意页面中多个HTML元素的公共标识符

### 属性选择符

~~~html
标签名[属性名] {
	~~~:~~~;
}
~~~

也可

~~~html
标签名[属性名="属性值"] {
	~~~:~~~;
}
~~~

[1]: http://120.78.215.15/usr/uploads/2021/09/929565908.png
[2]: http://120.78.215.15/usr/uploads/2021/09/2907304158.png

CSS1

发表评论取消回复

Reverse（十一）

Win11新机鼓捣记录

栈~数制转换

C++学习

Python实现文件管理系统（重命名和删除）

汇编语言学习（二）~基础知识补充

汇编语言学习（七）顺序、分支、循环程序设计

数据结构和算法思维导图

CSS1

虚拟内存

CSS1

发表评论 取消回复

CSS1

发表评论取消回复