2019独角兽企业重金招聘Python工程师标准>>>
前端学习笔记(2)-CSS 基础
标签 : 前端
[TOC]
本文主要对 CSS 相关基础知识进行介绍
基础知识
CSS 样式由选择符和声明组成,而声明又由属性和值组成。
- 选择符:又称选择器,指明网页中要应用样式规则的元素。
- 声明:在英文大括号
{}
中的的就是声明,属性和值之间用英文冒号{}
分隔。当有多条声明时,中间可以英文分号;
分隔。
选择器{
样式;
}
从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。优先级遵循就近原则,一般来说,内联式 > 嵌入式 > 外部式
。
- 内联式
例子 这里文字是红色。
- 嵌入式
- 外部式
例子:
CSS 选择器
常见的类选择器类型有如下几种:
- 标签选择器,
.标签选择器名称{css样式代码;}
- 类选择器,
.类选器名称{css样式代码;}
- ID 选择器,
#类选器名称{css样式代码;}
- 子选择器,即大于符号(
>
),用于选择指定标签元素的第一代子元素 - 包含选择器,即加入空格
,用于选择指定标签元素下的后辈元素
- 通用选择器,匹配html中所有标签元素,
* {css样式代码;}
类选择器和ID选择器都可以应用于任何元素,但 ID 选择器只能在文档中使用一次,可以使用类选择器词列表方法为一个元素同时设置多个样式,ID 选择器是不可以的。
子选择器和包含选择器区别:>
作用于元素的第一代后代,空格作用于元素的所有后代。
另外还有两种选择符:
- 伪类选择符,允许给 HTML 不存在的标签(标签的某种状态)设置样式。常用的有
a:hover{color:red;}
- 分组选择符,为 HTML 中多个标签元素设置同一个样式时,可以使用分组选择符
,
。例如h1,span{color:red;}
CSS 的继承、层叠和特殊性
- CSS 的某些样式是具有继承性的,继承是一种规则,它允许样式不仅应用于某个特定 HTML 标签元素,而且应用于其后代。
- 特殊性:不同选择器具有不同权值,标签的权值为 1,类选择符的权值为 10,ID选择符的权值最高为 100。
- 层叠 就是在 HTML 文件中对于同一个元素可以有多个 CSS 样式存在,当有相同权重的样式存在时,会根据这些 CSS 样式的前后顺序来决定,处于最后面的 CSS 样式会被应用。
CSS 格式化排版
文字排版
- 字体,
body{font-family:"Microsoft Yahei";}
- 字号、颜色,
body{font-size:12px;color:#666}
- 粗体,
body{font-weight:bold;}
- 斜体,
body{font-style:italic;}
- 下划线,
body{font-style:italic;}
- 删除线,
body{text-decoration:line-through;}
段落排版
- 缩进,
p{text-indent:2em;}
- 行间距(行高),
p{line-height:1.5em;}
- 中文字间距、字母间距,
letter-spacing:50px;
和word-spacing:50px;
- 对齐,
div{text-align:center;}
CSS 盒模型
元素分类
在 CSS 中,HTML 中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。
- 常用的块状元素有:
、、
...、、、、、、 、