这是我参与【第五届青训营】笔记创作活动的第二天
一、重点内容
- 了解CSS代码构成
- 掌握CSS 使用方法
二、知识点介绍
1.1 什么是CSS
- CSS：Cascading Sytle Sheets
- 用来定义页面元素的样式(字体、颜色、大小、位置)
1.2 CSS的组成
- 选择器 {
- 属性:属性值;
- }
1.3 CSS的使用办法
1.3.1 外链
<link rel="stylesheet" href="/css/mystyle.css">
1.3.2 嵌入
body {
background-color: blue;
}
1.3.3 内联
<p style="color:red;">这是一个段落。</p>
1.4 CSS工作流程
- HTML加载 - HTML解析 - 加载CSS - 解析CSS - 根据DOM树 - 展示页面
1.5 选择器Selector
1.5.1 通配选择器
* {
color: red;
}
1.5.2 标签选择器
- 根据元素名称来选择 HTML 元素
p {
font-size: 20px;
}
1.5.3 id选择器
- 使用 HTML 元素的 id 属性来选择特定元素
- 例如：对于 id = "para"的标签
#para {
color: red;
}
1.5.4 类选择器
- 选择有特定 class 属性的 HTML 元素
- 例如：对于 class = "center"的标签
.center {
text-align: center;
}
1.5.5 属性选择器
- 可以根据元素的属性及属性值来选择元素
- 例如：对于有title属性的标签
[title]{
color:red;
}
1.6 伪类
1.6.1 状态伪类
- 根据某种不同的状态进行选择
- 例如：对于链接的不同状态
/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}
1.6.2 结构伪类
- 例如：选择p标签中的第一个子元素
p:first-child {
color: blue;
}
1.7 组合器
1.7.1 直接组合
input:focus
1.7.2 后代组合(空格)
- 匹配属于指定元素后代的所有元素
div p {
background-color: blue;
}
1.7.3 亲子组合(>)
- 匹配属于指定元素子元素的所有元素
div > p {
background-color: blue;
}
1.7.4 兄弟选择器(~)
- 属于指定元素的同级元素的所有元素
div ~ p {
background-color: blue;
}
1.7.5 相邻选择器(+)
- 匹配所有作为指定元素的相邻同级的元素
div + p {
background-color: blue;
}
1.8 选择器组
- 给多个选择器进行css设置
h1, h2, p {
color: red;
}
1.9 颜色-RGB
- RGB：Red Green Blue
- 颜色根据这三种颜色进行组合的
- #00000白色，即rgb(0,0,0)
1.10 颜色-HSL
- HSL：Hue(色相，颜色的基本属性) Saturation(饱和度) Lightness(亮度)
- 例如：hsl(211,60%,80%) 蓝色
1.11 alpha透明度
- 范围：0-1
- 例如：rgba(255,0,0,1)
1.12 字体font-family
- 指定多个字体，浏览器会根据兼容性进行使用，一般把通用字体组写到最后
.p1 {
font-family: "Times New Roman", Times, serif;
}
1.13 字体大小font-size
- 设置文本的大小，单位：px(像素)、em(尺寸)
- 默认大小 1em 为 16px
h1 {
font-size: 40px;
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
1.14 字重font-weight
.w1 {
font-weight: 100
}
1.15 行高line-height
- 没有大小的时候，表示字体大小的多少倍
h1 {
font-size: 30px;
line-height: 45px;
}
1.16 文本对齐方式text-align
- 设置文本的水平对齐方式
- 文本可以左对齐，右对齐，居中对齐
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
1.17 文本缩进text-index
- 用于指定文本第一行的缩进
p {
text-indent: 50px;
}
1.18 文本装饰text-decoration
- 用于设置或删除文本装饰
a {
text-decoration: none; /*删除文本装饰*/
}
h1 {
text-decoration: overline; /*加下划线*/
}
1.19 white-space
- 规定段落中的文本不进行换行
p {
white-space: nowrap;
}
三、具体案例
- 文本综合使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本综合使用</title>
<style>
h1 {
text-align: center;
text-transform: uppercase;
color: #A7C942;
}
p {
text-indent: 50px;
text-align:justify;
letter-spacing:3px;
}
a {
text-decoration:none;
}
</style>
</head>
<body>
<h1>text formatting</h1>
<p>The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the
<a target="_blank" href="#">"点我试试看~"</a> link.</p>
</body>
</html>
四、个人总结
通过这次学习，我学习到了CSS代码构成，以及CSS的使用方法。在这些知识中，容易混淆的是对于选择器的使用，会借助实例进行巩固加强。
