Css

Css规则

内嵌式/行内式

<标签 style="key1:value;keyN:value;"></标签>

<p style="color:#f00;font-size: 20px;">hi</p>

<p style="background: orange;color: white;font-weight: bold;text-align: center;">hi</p>

<img src="./upload/mv.jpg" style="border: 2px solid blue;width: 200px;border-radius: 12px;">

在标签内使用 style 进行样式修改

常用属性
color: red; 设置字体颜色 可以使单词颜色 也可以是 #十六进制颜色
background: orange; 设置背景颜色
background: url(图片路径); 设置背景图片
background-size: 100% 100%; 设置背景拉伸
font-size:50px; 设置字体大小 px像素
font-weight: bold; 设置字体加粗
border: 2px solid blue; 设置边框
border-radius: 12px; 设置边框圆角
text-align: center; 设置字体居中
width: 200px; 设置宽度
height: 300px; 设置宽度
注意 单双引号的使用,可以是包含,不可以是交叉包含 正确 ("'a'" '"b"') 错误 ("'c"') 注意闭合

内联式

与标签分离，在head标签中使用style标签作为样式书写

CSS选择器

选择器{
 key:value
 
}
css 注释 /**/

选择器
* 通配符 选择全部标签
标签命名 选择指定标签
.class  class选择器 选择指定class标签 可以是不同的标签
#id		id选择器 id 值唯一 选择指定的id

父子选择器 直系关系
father_selector > child_selector   
.text > p     选择 text类下 子标签 p  


后代选择器 泛关系
father_selector  child_selector
.box h1 选择 box类 下的 所有 h1 标签

选择器优先级

 CSS样式 从上到下依次执行,同权后写的覆盖先写的  靠近原则 近的覆盖远的
 选择器优先级是 * < 标签选择器 < 类选择器 < ID选择器 < 组合选择器 < !important
 样式优先class 可以有多个class

外联式 / 外部样式

外联式需要单独创建一个css文件来存放css样式，我们在html页面引入该样式，使用跟内联式一致

 <link rel="stylesheet" href="./css/show.css">

Css常用样式

边距

在CSS中所有的标签都要看作是一个盒子，我们操作的是处理盒子与盒子之间的关系● 外边距 margin : 不会影响元素尺寸● 内边距 padding ：会影响元素尺寸左右影响宽上下影响高

外边距 margin
margin-top/right/bottom/left/:50px;
上  右     下    左
margin:Npx; 四周设置Npx
margin:Npx Mpx; 上下设置Npx 左右设置Mpx
margin:Npx Mpx Kpx; 上设置Npx 左右设置Mpx 下设置Kpx
margin:Npx Mpx Kpx Lpx; 上设置Npx 右设置Mpx 下设置Kpx 左设置Lpx
margin:0 0 0 10px; 等同于 margin-left:10px; 不设置的位置 0 占位
margin:0 auto; auto 自动 块元素自动左右居中

内边距 padding
padding-top/right/bottom/left/:50px;
上  右     下    左
padding:Npx; 四周设置Npx
padding:Npx Mpx; 上下设置Npx 左右设置Mpx
padding:Npx Mpx Kpx; 上设置Npx 左右设置Mpx 下设置Kpx
padding:Npx Mpx Kpx Lpx; 上设置Npx 右设置Mpx 下设置Kpx 左设置Lpx
padding:0 0 0 10px; 等同于 padding-left:10px; 不设置的位置 0 占位
padding会增大元素的尺寸

浮动

浮动的块元素可以在一行

float:left;  向左浮动
right; 向右浮动
清除浮动
clear:both; 清除两端浮动

定位

position: absolute; 绝对定位 参照浏览器的左上角
relative; 相对定位 相对带有定位的父元素或者祖先元素
left: 100px;
right: 200px;
bottom: 100px;
top: 200px;
两个绝对定位的元素会产生上下层
z-index:数值;设置显示而定优先级 数值越大越先显示
定位特殊知识点
块元素水平竖直双向居中
position: absolute;
left:50%
top:50%
/* 以上是 盒子的左上角居中 */
transform: translate(-50%,-50%); 水平竖直移动

弹性盒子 - 布局使用

弹性盒子是可以自动适应屏幕分辨率

弹性盒子注重于包含关系的分析(弹性盒子中有个重要的概念称之为容器)

/* 设置父容器为弹性盒子 */
display: flex;
/* 设置子容器主轴/方向 row 水平排布,默认 column 数值排布 */
flex-direction: row;
/* 设置主轴对齐方式 
    left 左对齐 center 居中 right 右对齐  
    space-around  均匀分布  
    space-between 两端对齐
    space-evenly 平缓分布
 */
justify-content: space-evenly;
/* 设置副轴对齐方式 
    start  头部对齐
    center 居中
    end    尾部对齐
 */
align-items:center;

辅助

浏览器自带的外边距或者内边距

* {
  margin:0;
  padding:0;
}

设置字体行高

设置行高与父标签高度一致则文字组竖直居中
line-height: 50px;
text-align: center; # 文字水平居中

切换光标

cursor: pointer; 光标变成小手

关于单位

100vw  与视口同宽
100vh  与视口同高
视口就是你看见的窗口大小
100% 父标签的百分之百

样式计算

width: calc(100px - 20px); 
calc 用来计算的 四则运算
符号两端必须有空格

a标签清除下划线

text-decoration: none;

Css样式-基础

Css