【前端技术】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.喜欢的小伙伴可以点赞、关注、收藏哟!

相关推荐
Myli_ing8 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维26 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~1 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序1 小时前
vue3 封装request请求
java·前端·typescript·vue