CSS
笔记来源于 bilibili av29469349
感谢 UP 主上传精彩教学视频,建议 1.5 倍速,半天看完
(UP 主声音很好听,声音控可以正常速度听完)
css 样式规则
声明 声明
| |
+------------+------------------+-----------------+
| | | |
+----+ | +--------------+ +--------------------+ |
| h1 | | { | color:red; | | front-size:25px; | } |
+----+ | +----|-----|---+ +-------|-------|----+ |
| | | | | | |
| +--------+-----+--------------+-------+-----------+
| | | | |
选择器 属性 值 属性 值
添加 css 的三种方法
-
外部样式表
CSS 保存在 .css 文件中,在 HTML 里使用 <link> 引用 -
内部样式表
不使用外部 CSS 文件,将 CSS 放在 HTML <style> 里 -
内联样式表(不推荐,维护困难)
仅仅影响一个元素,在HTML 元素的 style 属性里添加
CSS 选择方式
<p class="paragraph" id="paral" > text </p>
一般 id 指的是在一个 html 页面中唯一的那一个标签,id 的值在 html 文件中独一无二
/*通过标签种类进行选择*/
p{
color:red;
}
/*通过 class 选择*/
.paragraph{
color:red;
}
/*通过 id 选择*/
#paral{
color:red;
}
CSS 颜色设置
方式 | 示例 | 说明 |
---|---|---|
关键词 | black,silver,white | 网页安全颜色 |
RGB | rgb(255,0,0) | RED、Green、Blue |
RGBA | rgb(255,0,0,0.5) | RAB alpha,最后一项为 0 ~ 1 ,代表透明度 |
十六进制 | #ff0000 | |
HSL | hsl(0,100%,50%) | Hue、Saturation、lightness |
HSLA | hsl(0,100%,50%,0.5) |
CSS 字体
使用 font-family 属性
{
/* 字体优先级问题 */
font-family:Arial,Helvetica,sans-serif
}
{
/* 字体名字有空格,需要 "" */
font-family:"Gill Sans",sans-serif
}
衬线 serif
sans-serif 无衬线 类比于黑体
serif 有衬线 类比于宋体,带一个三角
monospace 等宽字体
CSS Box 模型
1.模型示意图
margin 外边距
border 边框
padding 内边距
+---------------------------------------------------------------+
| margin |
| |
| /// border |
| // // |
| // padding // |
| // ********************************** // |
| // * width * // |
| // * content * // |
| // * height* // |
| // ********************************** // |
| // // |
| // // |
| /// |
| |
| |
+---------------------------------------------------------------+
2.外边距塌陷
假设有四个 box 拼在一起
错误示例:外边距会取二者较大值,只显示一份
+--------------++--------------+
| // || // |
| // // || // // |
| // || // |
+--------------++--------------+
+--------------++--------------+
| // || // |
| // // || // // |
| // || // |
+--------------++--------------+
正确示例:
+------------+--------------+
| //| // |
| // //| // // |
| //| // |
+------------+--------------+
| //| // |
| // //| // // |
| //| // |
+------------+--------------+
3.设置 margin padding
margin padding 语法相同
以 margin 为例
p{
margin-top:5px;
margin-bottom:5px;
margin-right:10px;
margin-left:10px;
}
更简单的写法
p{
/* 上5 右10 下5 左10 */
margin:5px 10px 5px 10px;
}
p{
/* 上下5 左右10 */
margin:5px 10px;
}
p{
/* 上5 左右10 下5 */
margin:5px 10px 5px;
}