【前端技术】CSS基础入门篇

一、 CSS简介

css(Cascading Style Sheets,缩写为 CSS,也叫作层叠样式表)是一套美化HTML标签所编写出页面的语法,CSS描述了如何在不同设备上渲染内容的方法。

二、 CSS基本引入方法

html 复制代码
<!-- Cascading style shet:层叠样式表(CSS)
css引入方法 -->
<html lang="en">

<head>
    <meat charset="UTF-8">
        <title>CSS引入方法</title>
        <!-- 2.页面级引入在style标签中编写 -->
        <style type="text/css">
            div {
                Width: 100px;
                Height: 100px;
                Background-color: green;
            }
        </style>
        <!-- 3.外部引入css文件
        div{
            Width:100px;
            Height:100px;
            Border-radius:50%;
            Background-color:black;
            }
        将该内容保存为tp.css,在相对路径下,内容为宽高各100像素,形状是圆角形,背景颜色为黑色
        在计算机中,同步和异步与生活中的正确理解是正好相反的,也就是说,生活中,两个人在同一时间吃饭是同步,而在计算机中,这个过程是叫做异步
        -->
        <link rel="stylesheet" type="text/css" href="tp.css">
</head>

<body>
    <!-- 1.行间样式 style中的就是CSS代码-->
    <div style="Width:100px;height:100px;Background-color:red;"></div>
</body>

</html>

三、CSS选择器

css 复制代码
 /* 1.通配符选择器 */
 * {
     margin: 0px;
     padding: 0px;
     /* !important表示优先使用 */
     Background-color: red !important;
 }

 /* css选择器 2.id选择器 */
 #only {
     Background-color: red;
 }

 /* css选择器 3.CLASS选择器
    背景颜色为绿色,class为demo的都加上该CSS
*/
 .demo {
     Background-color: green;
 }

 /* css选择器 4.标签选择器 
设置字体颜色为橘色,font-weight设置字体为加粗 标签选择器表示所有div都采用该格式
*/
 div {
     Background-color: black;
     Color: #f40;
     Font-weight: bold;
 }

 /*css选择器 5.分组选择器  > 组合器选择前一个元素的直接子代的节点 */
 div,
 span,
 p {
     color: red;
 }

 /*css选择器 6.直接子代选择器 */
 ul>li {
     font-size: 20px;
 }

 /* css选择器 7.一般兄弟组合器   p ~ span 匹配同一父元素下,<p> 元素后的所有 <span> 元素 */
 p~span {
     color: #f40;
 }

 /* css选择器 8.紧邻兄弟选择器   h3 + p 会匹配紧邻在 h2 元素后的第一个 <p> 元素 */
 h3+p {
     color: #000;
 }

 /* css选择器 9.结构伪类选择器 
        first-child:查找第一个元素
        last-child:查找最后一个元素
        nth-child(n):查找第n个元素,第一个元素n为1
*/
 p:first-child {
     color: red;
 }

 /* css选择器 9.伪类选择器 */

 a:hover {
     color: #00f;
 }

 /* css选择器 10.属性选择器 '[ ]'可以选择任何有值得属性填入其中,调用这个css样式 也可以只给这个一个属性加上样式(id="ls") */
 [id] {
     Background-color: blue;
 }

 /* css选择器 11.父子选择器/派生选择器 */
 div span {
     background-color: red;
 }

四、 CSS优先级问题

选择器的优先级:

  • !important > 内联样式 > id 选择器> class选择器 == 属性选择器 == 伪类选择器 > 标签选择器 > 通配符选择器
  • 权重值越高优先级越大,多种选择器叠加使用可以通过权重值相加,从而得出最终的权重
  • css权重是属于256进制,0到1之间隔了256位后才进的1
选择器 权重 优先级
!important Infinity(正无穷) 最高
内联样式 1000 第一
id选择器 100 第二
class、伪类、属性选择器 10 第三
标签选择器、伪元素选择器 1 第四
通用选择器、子选择器、一般兄弟选择器,紧邻兄弟选择器 0

五、寄语

1.css是前端重要的组成部分,学会css可以有很多的玩法;

2.多学习、多看、学想、多实操,成为更好的你;

3.喜欢的小伙伴可以点赞、关注、收藏哟!

相关推荐
腾讯TNTWeb前端团队23 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom5 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom5 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom5 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试