我的前端笔记——css基础部分

最新推荐文章于 2024-04-19 09:39:59 发布

邮苑大白

最新推荐文章于 2024-04-19 09:39:59 发布

阅读量485

点赞数 1

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/weixin_42053787/article/details/117827475

版权

这是一篇关于前端开发中CSS基础知识的笔记，涵盖了选择器、字体与文本属性、图片居中、Chrome调试工具、Emmet语法、复合选择器、浮动布局、定位、盒子模型等关键知识点，适合初学者入门学习。

摘要由CSDN通过智能技术生成

写在前面

本博客是学习B站黑马pink老师的前端课程笔记，前面笔记见

css基础

基础选择器总结

在这里插入图片描述

字体属性

在这里插入图片描述

属性总结

在这里插入图片描述
复合属性：顺序不能更改

font: font-style font-weight font-size/line-height font-family;

text-indent 文本首行缩进

text-indent: 20px 根据文字像素的缩进尺度
text-indent: 2em 根据文字大小缩进几个字符就是

在这里插入图片描述

文本属性text

在这里插入图片描述
text-align: center; 水平居中
line-height: 像素点; 垂直居中

css引入

样式表

在这里插入图片描述
所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部
外部样式表使用步骤：
1.先定义一个新的style.css文件（文件名自定义后缀为.css），这个css文件里面只有样式没有标签
2.link调用，写在head头部不用style标签

<link rel="stylesheet" href="style.css">

图片居中对齐方式

 .pic {
   
           /* 想要图片水平居中对齐,则是让它的父亲 p标签添加 水平居中的代码 */
           text-align: center;
       }
--  --    ---- -----------
<p class="pic">
            <img src="图片素材/pic.jpeg" alt="">
</p>

Chrome调试工具：

使用浏览器调试，帮助检查样式等错误
在这里插入图片描述

emmet语法

快速生成HTML结构语法
在这里插入图片描述
快速整理代码对齐：shift+Alt+F

复合选择器

后代选择器

在这里插入图片描述

子代选择器

子选择器：只能选择作为某元素的最近一级子元素
在这里插入图片描述

并集选择器

适用于样式相同！用英文,分割
在这里插入图片描述

链接伪类选择器

在这里插入图片描述

focus选择器

把获得光标的input表单元素选取出来

/* // 把获得光标的input表单元素选取出来 */
        input:focus {
   
            background-color: pink;
            color: red;
        }
<body>
<input type="text">
</body>

总结（权重问题-面试考点）

在这里插入图片描述

选择器的权重问题：

选择器的权重会叠加但不会进位与css优先级一致

简单记忆：

选择器	权重（速记）	举例
标签选择器 li ul div p a 等元素	1	ul li ：权重为2
类选择器 . 类名	10	.nav li :权重10+1=11
链接选择器	10	a:hover 10+1=11
id选择器	100	.ID名 ul li 100+1+1=102

元素选择模式

块元素

在这里插入图片描述

div {
   
    background-color: lightgrey;  //背景颜色
    width: 300px; 宽度
    border: 25px solid green; 绿色边框 宽度25px 
    padding: 25px; 内间距
    margin: 25px;外间距25px
}