CSS基本知识点
2022/7/7 6:20:11
本文主要是介绍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基本知识点的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-25如何用 Jest 测试 CSS Font Loading API(介绍)
- 2024-10-2510 个每个 UI 开发人员都应该知道的 CSS 代码段
- 2024-10-22怎么检测是否已经安装了scss(Sass)-icode9专业技术文章分享
- 2024-10-22TailwindCSS开发入门指南
- 2024-10-22TailwindCSS项目实战:从入门到简单应用
- 2024-10-20TailwindCSS教程:零基础快速入门
- 2024-10-20TailwindCss教程:从零开始的实用指南
- 2024-10-18TailwindCSS入门:快速上手指南
- 2024-10-18Tailwind.css项目实战:新手入门教程
- 2024-10-17Tailwind.css学习:从入门到初步掌握