写在前面
本博客是学习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
}
注意：
文字类的元素不能使用块级元素
“
标签主要用于存放文字，因此不能放块级元素，特别是不能放”
",同理<h1~h6>是文字类块级标签内也不能放块级元素。
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
行内元素
最低0.47元/天 解锁文章
7604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
