CSS教程
CSS基本知识点
本文主要是介绍CSS基本知识点，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
CSS基本知识点
我们在学习HTML之后，前端三件套第二件便是CSS，但CSS内容较多，我们分几部分讲解：
（如果没有学习HTML，请参考之前文章：HTML知识点概括——一篇文章带你完全掌握HTML>）
CSS作用
如果说HTML为网页提供内容，那么CSS就是为内容进行装饰，为网页进行布局
CSS可以控制整体框架，控制文本字体，大小等诸多事宜
CSS语法
CSS基本语法只有一条：
选择器 {
声明1；
声明2；
}
CSS写入的三种方式
CSS作用HTML中一共有三种方法，我们一一介绍：
- 第一种：行内样式
- 直接在单个标签中写入style并进行书写
- 第二种：内部样式
- 在html文件的head区域写入style进行书写
- 第三种：外部样式
- 在css文件中书写，在html文件中的head区域采用link方法导入
- link语法：
上面三种语法讲究就近原则，当前标签距离谁较近，就是用哪种css
一般情况：行内元素>内部样式>外部样式
下面给出代码示例：
<!DOCTYPE html>
<html lang="en">
<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>导入方法</title>
<!-- 注意：这里遵循就近原则，当前标签离哪个近就用哪个样式 -->
<!-- 内部样式：在HTML的Head部位书写 -->
<style>
h1 {
color: aliceblue;
}
</style>
<!-- 外部样式：在CSS中书写，然后通过Link导入 -->
<link rel="stylesheet" href="css.css">
</head>
<body>
<!-- 行内样式：在body中书写标签时直接写入style -->
<h1 style="color:aqua;"></h1>
</body>
</html>
h1 {
color: black;
}
CSS的四种选择器
CSS的基本选择器分为四种：
-
通配符选择器：
- 针对所有标签进行选择
-
标签选择器：
- 针对所有对应的标签进行选择
-
类选择器（class）：
- 针对所有对应class名的所有类标签进行选择
- 一个标签可以具有多个类，一个类可以作用于多个标签
-
id选择器（id）：
- 针对对应id名的唯一标签进行选择
- 一个标签只能有一个id，一个id只能作用于一个标签
三种选择器具有明确的优先级：id选择器>类选择器>标签选择器
下面给出示例代码：
<!DOCTYPE html>
<html lang="en">
<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>三种选择器</title>
<!-- 这里选择器的样式遵循：id选择器>类选择器>标签选择器 -->
<style>
/*
1.标签选择器：
样式： 标签名{}
自动选中所有标签的代码
*/
h1 {
color: bisque;
}
p {
color: blueviolet;
font-size: 30px;
}
/*
2.类选择器：
样式：.类名{}
自动选中所有带类名的代码，可以跨标签，类名定义用class
*/
.myStyle {
color: blue;
font-size: 20px;
}
/*
3.id选择器：
样式：#id名{}
自动选择带有id名的代码，注意id具有全局唯一性
*/
#w123 {
color: aquamarine;
font-size: 40px;
}
#w333 {
color: aquamarine;
font-size: 40px;
}
/*
4.通配符选择器
样式： * {}
全部锁定，全部标签都带有以上特征
*/
</style>
</head>
<body>
<h1>标题1</h1>
<p>我是30px大小的</p>
<p class="myStyle"> 我是类选择器</p>
<p id="w123">我是id选择器</p>
<p class="myStyle" id="w333"> 我的最高权限是id选择器</p>
<p class="myStyle">我的最高权限是类选择器</p>
</body>
</html>
层次选择器
层次选择器分为四种：
-
后代选择器：
- 父 子{}
- 可以选择父类的所有子类标签以及子类标签后的所有标签
-
子选择器：
- 父>子{}
- 只能选择父类的所有子类标签
-
相邻选择器：
- .class+兄弟标签类型{}
- 只能选择.class的父类的下一个兄弟标签
-
通用选择器：
- .class~标签类型{}
- 可以选择.class的父类的下一个之后包括下一个的所有兄弟标签
下面给出代码示例：
<!DOCTYPE html> <html lang="en"> <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>层次选择器</title> <!-- 层次选择器主要用于后代，下一代，兄弟等 --> <style> /* 后代选择器： 格式：父类 父类的后代{} 用于父类的后代所有标签内 */ ul li{ color: rgb(255, 0, 0); } /* 子选择器： 格式：父类 子类{} 仅用于父类的下一代 */ body>p{ color: aqua; } /* 相邻兄弟选择器： 格式：.class名 + 同辈标签{} 选定class的标签的相邻标签 */ .active + p { color: black; } /* 通用兄弟选择器： 格式：.class名 ~ 同辈标签{} 选定class的标签的以下所有兄弟标签 */ .allover ~ p { color: rgb(243, 255, 7); } </style> </head> <body> <p> <p>孙子1</p> </p> <p class="active">儿子2</p> <p class="allover">儿子3</p> <p>儿子4</p> <p>儿子5</p> <ul> <li> <p>我是孙子辈</p> </li> <li>我是儿子辈</li> </ul> </body> </html>结构伪选择器
结构伪选择器主要负责有条件性的标签选择
下面直接给出代码示例：
<!DOCTYPE html> <html lang="en"> <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>结构伪类选择器</title> <!-- 结构伪类选择器在实际开发中并不常用，但我们仍需了解认识 结构伪类选择器具有条件性，它有条件地选择部分内容进行CSS操作 具体结构：父类：条件{} --> <style> /* 例如我们希望在ul中的第一个和最后一个li中单独进行CSS操作 */ ul li:first-child { color: brown; } ul li:last-child { color: red; } /* 这里我们以p的父元素为父类，来选择第2个孩子 */ /* 我们可以通过nth-child（n）来选择第n个元素 */ p:nth-child(2){ color: aquamarine; } /* 这里我们以p的父元素为父类，来选择第2个p类型的孩子 */ /* 我们可以通过nth-of-type（n）来选择第n个元素 */ p:nth-of-type(2){ color: antiquewhite; } /* 同时，“：”也具有其他性质；例如a的hover属性表示当鼠标放在a上时的CSS操作 */ a:hover { background-color: black; } </style> </head> <body> <a href="#">123</a> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>l1</li> <li>l2</li> <li>l3</li> </ul> </body> </html>CSS属性选择器
属性选择器是CSS3新加入的特性，极大程度方便了选择器的利用
属性选择器的格式如下：
- 标签[属性名]{}
- 标签[属性名=属性]{}
- 标签[属性名*=属性]{}
- 标签[属性名^=属性]{}
- 标签[属性名$=属性]{}
下面给出代码示例：
<!DOCTYPE html>
<html lang="en">
<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>属性选择器</title>
<!--
属性选择器
结构分有五种，分别有不同的作用：
标签[属性名]{}
标签[属性名=属性]{}
标签[属性名*=属性]{}
标签[属性名^=属性]{}
标签[属性名$=属性]{}
-->
<style>
/* 首先我们把下方连接都变成框框，以便于效果明显（这里后面会涉及，目前不需要深究） */
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: #2700ff;
text-align: center;
color: gray;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/* 以下操作为防止冲突，均以注释格式出现，请测试时去除注释 */
/*
标签[属性名]{} ：该标签内带有该属性的所有标签
.demo a[id]{
background: red;
}
*/
/*
标签[属性名=属性]{} :该标签内带有该属性，且属性值对应的所有标签（注意：需要完全匹配）
.demo a[id=w123]{
background-color: aquamarine;
}
.demo a[class="class1 class2 class3"]{
background-color: black;
}
*/
/*
标签[属性名*=属性]{}：该标签内带有该属性，且属性值对应的所有标签（注意：存在匹配即可）
.demo a[class*="class1"]{
background-color: aqua;
}
*/
/*
标签[属性名^=属性]{}:该标签内带有该属性，且以该属性开头
.demo a[href^="https"]{
background-color: red;
}
*/
/*
标签[属性名$=属性]{}:该标签内带有该属性，且以该属性结尾
.demo a[href$="https"]{
background-color: red;
}
*/
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="class1 class2 class3" id="w123">1</a>
<a href="https://www.taobao.com/" class="class1 class2 class3">2</a>
<a href="#" class="class1 class2 class3">3</a>
<a href="#" class="class1 class2 class3">4</a>
<a href="#" class="class1 class2" id="w321">5</a>
<a href="#" class="class1 class2">6</a>
<a href="#" class="class1 class2">7</a>
<a href="#" class="class1">8</a>
<a href="#" class="class1">9</a>
<a href="#" class="class1">10</a>
</p>
</body>
</html>
CSS字体样式
css的字体样式相对比较简单，相关解释均放入代码中：
<!DOCTYPE html>
<html lang="en">
<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>字体样式</title>
<!--
我们依次介绍字体样式 ：
font-family: 中文字体，英文字体；（这里设置文本字体，可以同时设置英文和中文字体，需要用逗号隔开，也可以只设置一种）
font-size: 20px;（这里设置文本大小）
font-weight: bold;（这里设置文本粗细，可以采用数字px，也可以采用bold等）
color: brown;（这里设置字体颜色）
font: 粗细 大小 字体;(这里整合所有font设置，可以一次性设置完毕)
-->
<style>
.divclass p{
/* 我们常用的字体样式就以下四种 */
font-family: 微软雅黑;
font-size: 20px;
font-weight: bold;
color: brown;
}
</style>
</head>
<body>
<!-- 这里稍微介绍一下div和span，就是简单的盒子，属于行内元素，我们常常用来规范做某些事情 -->
<div class="divclass">
<p>123</p>
<span>123</span>
</div>
</body>
</html>
CSS文本样式
css文本样式类似于字体样式，相关解释放在代码中：
<!DOCTYPE html>
<html lang="en">
<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>文本样式</title>
<!--
文本样式主要是对文本进行操作
大致包括以下五种：
颜色：
文本对齐：
首行缩进：
行高：
装饰：
-->
<style>
/*
颜色 color 有三种形式
1.直接写英文颜色 red 等
2.以#开头，写000000~ffffff之间的颜色
3.以RBG来写
4.以RBGA来写（可写透明度）
*/
.class1 {
/* 这里之间为大家举例（这样书写是不对的） */
color: red;
color: #121212;
color: rgb(0, 255, 255);
color:rgba(0, 255, 255, 0.1);
}
/*
文本对齐 text-align 有三种情况
center 居中对齐
left 靠左对齐
right 靠右对齐
*/
.class2 {
text-align: center;
}
/*
首行缩进 text-indent
通常采用em，em表示一个文字大小，常用2em
*/
.class3 {
text-indent: 2em;
}
/*
行高 text-height
行高常用来使文字位于框架垂直中心
当行高=框架高度，文字位于垂直中心
*/
.class4 {
background-color: #121212;
height: 300px;
line-height: 300px;
}
/*
修饰 text-decoration
可以跟 none underline line-through overline
因为超链接a自带下划线，我们常使用none去除下划线使其美观
*/
a {
text-decoration: none;
}
</style>
</head>
<body>
<p class="class1">123</p>
<p class="class2">123</p>
<p class="class3">123</p>
<p class="class4">123</p>
<a href="#">我是链接</a>
</body>
</html>
CSS超链接伪类
在CSS的超链接中会出现动态情况，所以css给出相关伪类来改变超链接各种状态下的形态
下面给出代码示例：
<!DOCTYPE html>
<html lang="en">
<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>超链接伪类和阴影</title>
<!-- 我们先解释一下超链接伪类 -->
<style>
/* 正常情况下超链接伪类是很丑的且带下划线 */
/* 首先我们对a进行修正 */
a {
/* 取消下划线，修改颜色 */
text-decoration: none;
color: black;
}
/* 我们来讲解一下a的一些伪类操作 */
/* 这里表示当鼠标触及到超链接的状态 */
a:hover{
color: yellow;
}
/* 这里表示当鼠标点击超链接且未松开的状态 */
a:active{
color: green;
}
/* 这里表示当鼠标未点击超链接的状态（可能与a发生冲突，尽量不要使用） */
/*
a:link{
color:blue;
}
*/
/* 这里表示鼠标已点击过的状态 （可能与a发生冲突，尽量不要使用）*/
/*
a:visited{
color:red;
}
*/
</style>
<!-- 我们稍微介绍一下阴影 -->
<style>
/* text-shadow: 阴影颜色 阴影水平移动大小 阴影垂直移动大小 阴影光晕半径 （移动大小是可以写负数的） */
#price{
text-shadow: blue 10px 10px 2px;
}
</style>
</head>
<body>
<p>
<a href="#"> <img src="../../../../Resources/picture/1.jpeg" alt="纱雾老师"></a>
</p>
<p>
<a href="#">纱雾老师</a>
</p>
<p>
<a href="#" id="price">￥99</a>
</p>
</body>
</html>
CSS列表简单美化
在css基本课程中，我们给出列表的一些简单美化步骤
下面内容稍微阅读理解即可，后面我们会给出更加美观详细的步骤
下面给出代码示例：
<!DOCTYPE html>
<html lang="en">
<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>简单列表练习</title>
<!-- 与css链接 -->
<link rel="stylesheet" href="ccs.css">
</head>
<body>
<!-- div是一个盒子，用来控制整体大小 -->
<div id="nav">
<h2>淘宝销售</h2>
<ul>
<li><a href="#">女装</a> <a href="#">男装</a> <a href="#">童装</a> </li>
<li><a href="#">女鞋</a> <a href="#">男鞋</a> <a href="#">童鞋</a> </li>
<li><a href="#">手机</a> <a href="#">电脑</a> <a href="#">数码</a> </li>
</ul>
</div>
</body>
</html>
/* 首先设置最上方标题 */
h2{
background-color: blanchedalmond;
font-size: 20px;
font-weight: bold;
text-indent: 2em;
line-height: 35px;
}
/* 然后我们设置盒子大小 */
#nav {
width: 300px;
background-color: gray;
}
/* 然后我们对li做出调整 */
ul li{
/*
首先我们去掉前方的索引号
list-style:
none 无
circle 空心圆
decimal 数字
square 方形
*/
list-style: none;
height: 30px;
text-indent: 1em;
}
/* 最后我们设置a和a：hover */
a {
text-decoration: none;
color:black;
font-size: 14px;
}
a:hover{
color: orange;
}
CSS背景
CSS背景主要分为两部分：
- 背景颜色
- 背景图片
我们的解释主要围绕这两部分展开：
<!DOCTYPE html>
<html lang="en">
<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>背景</title>
<!-- 针对背景主要采用background的属性来决定 -->
<style>
/* 背景颜色：background-color: transparent*/
/*
背景图片：background-image: none/url("图片地址")
背景图片可以选择其展示样式：
background-repeat：选择是否平铺
repeat平铺 no-repeat不平铺 repeat-x水平平铺 repeat-y垂直平铺
背景图片可以选择位置：
background-position：x y；选择x，y位置
x：top/center/bottom y：left/center/right
背景图片可以选择是否固定：
background-attachment：选择背景图片是否固定
scroll可滚动 fixed固定
背景图片具有复合写法：
background：颜色 地址 平铺 是否固定 位置
背景图片可选择透明度：
background：rgba（，，，a）a是透明度
*/
</style>
</head>
<body>
<div id="nav"></div>
</body>
</html>
结束语
关于CSS的基本知识点，因为我在第一遍学习时主要通过代码学习，所以注释性的解释文本可能比较少，在CSS的进阶内容中我会加大对文本内容的解释，谢谢大家阅读CSS基本知识点。
这篇关于CSS基本知识点的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
CSS-Module学习：轻松入门指南11-14
-
CSS9资料入门指南11-12
-
CSS浮动资料详解：初学者指南11-12
-
CSS选择器资料详解与实战教程11-12
-
CSS样式资料：初学者必备指南11-12
-
CSS项目实战：从入门到上手11-11
-
CSS定位项目实战：新手指南11-11
-
CSS浮动项目实战：初学者指南11-11
-
CSS选择器项目实战：从入门到上手11-11
-
CSS样式项目实战：新手入门指南11-11
-
CSS基础知识详解：从入门到实践教程11-05
-
如何用 Jest 测试 CSS Font Loading API（介绍）10-25
-
10 个每个 UI 开发人员都应该知道的 CSS 代码段10-25
-
怎么检测是否已经安装了scss（Sass）-icode9专业技术文章分享10-22
-
TailwindCSS开发入门指南10-22
栏目导航
