CSS 是什么
基本语法规范
<style>
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>
<p>hello</p>
引入方式
内部样式表
行内样式表
外部样式
<link rel="stylesheet" href="[CSS文件路径]">
创建 demo.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>上帝为你关上一扇门, 然后就去睡觉了</div>
</body
创建 style.css
div {
color: red;
}
语法基本形式
1.选择某个或者某些元素,来应用规则
2.指定具体的规则以及对应的值
代码风格
样式格式
p { color: red; font-size: 30px;}
p {
color: red;
font-size: 30px;
}
样式大小写
空格规范
选择器
选择器的功能
选择器的种类
常用元素属性
字体属性
设置字体
body {font-family : ' 微软雅黑 ' ;font-family : 'Microsoft YaHei' ;}
- 字体名称可以用中文, 但是不建议.
- 多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
- 如果字体名有空格, 使用引号包裹.
- 建议使用常见字体, 否则兼容性不好.
<style>.font-family .one {font-family : 'Microsoft YaHei' ;}.font-family .two {font-family : ' 宋体 ' ;}</style><div class = "font-family" ><div class = "one" >这是微软雅黑</div><div class = "two" >这是宋体</div></div>
大小
p {font-size : 20px ;}
- 不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)
- 可以给 body 标签使用 font-size
- 要注意单位 px 不要忘记.
- 标题标签需要单独指定大小
注意: 实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮
<style>.font-size .one {font-size : 40px ;}.font-size .two {font-size : 20px ;}</style><div class = "font-size" ><div class = "one" >大大大</div><div class = "two" >小小小</div></div>
粗细
p {font-weight : bold ;font-weight : 700 ;}
- 可以使用数字表示粗细.
- 700 == bold, 400 是不变粗, == normal
- 取值范围是 100 -> 900
<style>.font-weight .one {font-weight : 900 ;}.font-weight .two {font-weight : 100 ;}</style><div class = "font-weight" ><div class = "one" >粗粗粗</div><div class = "two" >细细细</div></div>
文字样式
/* 设置倾斜 */font-style : italic ;/* 取消倾斜 */font-style : normal ;
文本属性
文本颜色
设置文本颜色
color : red ;color : #ff0000 ;color : rgb ( 255 , 0 , 0 );
- 预定义的颜色值(直接是单词)
- [最常用] 十六进制形式
- RGB 方式
文本对齐
text-align: [值];
- center: 居中对齐
- left: 左对齐
- right: 右对齐
文本装饰
text-decoration : [ 值 ];
- underline 下划线. [常用]
- none 啥都没有. 可以给 a 标签去掉下划线.
- overline 上划线. [不常用]
- line-through 删除线 [不常用]
例如 B 站这里的导航链接, 就是使用这个属性去的掉的下划线. [可以 F12 观察]
文本缩进
text-indent: [值];
- 单位可以使用 px 或者 em.
- 使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
- 缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)
行高
- 顶线
- 中线
- 基线 (相当于英语四线格的倒数第二条线)
- 底线
line-height: [值];
其实基线之间的距离 = 顶线间距离 = 底线间距离 = 中线间距离
注意1: 行高 = 上边距 + 下边距 + 字体大小
注意2: 行高也可以取 normal 等值
注意3: 行高等与元素高度, 就可以实现文字居中对齐
背景属性
背景颜色
background-color: [指定颜色]
默认是 transparent (透明) 的. 可以通过设置颜色的方式修改.
<style>body {background-color : #f3f3f3 ;}.bgc .one {background-color : red ;}.bgc .two {background-color : #0f0 ;}.bgc .three {/* 背景透明 */background-color : transparent ;}</style><div class = "bgc" ><div class = "one" > 红色背景 </div><div class = "two" > 绿色背景 </div><div class = "three" > 透明背景 </div></div>
背景图片
background-image : url ( ... );
背景平铺
background-repeat: [平铺方式]
- repeat: 平铺
- no-repeat: 不平铺
- repeat-x: 水平平铺
- repeat-y: 垂直平铺
背景位置
background-position: x y;
- 如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)
- 如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中. )
- 如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)
- 如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中.
- 如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂直居中)
背景尺寸
background-size : length | percentage | cover | contain ;
- 可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
- 也可以填百分比: 按照父元素的尺寸设置.
- cover: 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法
- 显示在背景定位区域中。
- 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
圆角矩形
通过 border-radius 使边框带圆角效果.
基本用法
border-radius: length;
length 是内切圆的半径. 数值越大, 弧线越强烈
生成圆形
div {width : 200px ;height : 200px ;border : 2px solid green ;border-radius : 100px ;/* 或者用 50% 表示宽度的一半 */border-radius : 50% ;}
生成圆角矩形
div {width : 200px ;height : 100px ;border : 2px solid green ;border-radius : 50px ;}
展开写法
border-radius : 2em ;
Chrome 调试工具 -- 查看 CSS 属性
打开浏览器
- 直接按 F12 键
- 鼠标右键页面 => 检查元素
标签页含义
- elements 查看标签结构
- console 查看控制台
- source 查看源码+断点调试
- network 查看前后端交互过程
- application 查看浏览器提供的一些扩展功能(本地存储等)
- Performance, Memory, Security, Lighthouse 暂时不使用, 先不深究
elements 标签页使用
- ctrl + 滚轮进行缩放, ctrl + 0 恢复原始大小.
- 使用 左上角 箭头选中元素
- 右侧可以查看当前元素的属性, 包括引入的类.
- 右侧可以修改选中元素的 css 属性. 例如颜色, 可以点击颜色图标, 弹出颜色选择器, 修改颜色. 例如
- 字体大小, 可以使用方向键来微调数值.
- 此处的修改不会影响代码, 刷新就还原了~
- 如果 CSS 样式写错了, 也会在这里有提示. (黄色感叹号)
元素的显示模式
- 块级元素
- 行内元素
块级元素
h1 - h6pdivulolli...
特点:
- 独占一行
- 高度, 宽度, 内外边距, 行高都可以控制.
- 宽度默认是父级元素宽度的 100% (和父元素一样宽)
- 是一个容器(盒子), 里面可以放行内和块级元素.
注意:
行内元素/内联元素
astrongbemidelsinsuspan...
- 不独占一行, 一行可以显示多个
- 设置高度, 宽度, 行高无效
- 左右外边距有效(上下无效). 内边距有效.
- 默认宽度就是本身的内容
- 行内元素只能容纳文本和其他行内元素, 不能放块级元素
行内元素和块级元素的区别
- 块级元素独占一行, 行内元素不独占一行
- 块级元素可以设置宽高, 行内元素不能设置宽高.
- 块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置.
改变显示模式
- display: block 改成块级元素 [常用]
- display: inline 改成行内元素 [很少用]
- display: inline-block 改成行内块元素
盒模型
- 边框 border
- 内容 content
- 内边距 padding
- 外边距 margin
边框
<div> test </div>div {width : 500px ;height : 250px ;border-width : 10px ;border-style : solid ;border-color : green ;}
支持简写, 没有顺序要求
border: 1px solid red;
可以改四个方向的任意边框.
border-top/bottom/left/right
边框会撑大盒子
内边距
基础写法
- padding-top
- padding-bottom
- padding-left
- padding-right
<div>test</div>div {height : 200px ;width : 300px ;}
加上 padding 之后
div {height : 200px ;width : 300px ;padding-top : 5px ;padding-left : 10px ;}
注意:
- 整个盒子的大小从原来的 300 * 200 => 310 * 205. 说明内边距也会影响到盒子大小(撑大盒 子).
- 使用 box-sizing: border-box 属性也可以使内边距不再撑大盒子. (和上面 border 类似)
复合写法
padding : 5px ; 表示四个方向都是 5pxpadding : 5px 10px ; 表示上下内边距 5px , 左右内边距为 10pxpadding : 5px 10px 20px ; 表示上边距 5px , 左右内边距为 10px , 下内边距为 20pxpadding : 5px 10px 20px 30px ; 表示 上 5px , 右 10px , 下 20px , 左 30px ( 顺时针 )
外边距
- margin-top
- margin-bottom
- margin-left
- margin-right
margin: 10px; // 四个方向都设置margin: 10px 20px; // 上下为 10, 左右 20margin: 10px 20px 30px; // 上 10, 左右 20, 下 30margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40
块级元素水平居中
- 指定宽度(如果不指定宽度, 默认和父元素一致)
- 把水平 margin 设为 auto
margin-left : auto ; margin-right : auto ;margin : auto ;margin : 0 auto ;
去除浏览器默认样式
* {marign : 0 ;padding : 0 ;}
弹性布局
创建一个 div, 内部包含三个 span
<div><span> 1 </span><span> 2 </span><span> 3 </span></div><style>div {width : 100% ;height : 150px ;background-color : red ;}div > span {background-color : green ;width : 100px ;}</style>
当我们给 div 加上 display:flex 之后, 效果为
flex 布局基本概念
基础概念:
- 被设置为 display:flex 属性的元素, 称为 flex container
- 它的所有子元素立刻称为了该容器的成员, 称为 flex item
- flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)
常用属性
属性取值
设置 justify-content: flex-end , 此时元素都排列到右侧了.
设置 jutify-content: center , 此时元素居中排列
取值和 justify-content 差不多
eg:可以使用 align-items 实现垂直居中
<div><span> 1 </span><span> 2 </span><span> 3 </span></div><style>div {width : 500px ;height : 500px ;background-color : green ;display : flex ;justify-content : space-around ;align-items : center ;}div span {width : 150px ;height : 100px ;background-color : red ;}</style>