css学习

css学习

css语法规范

组成：选择器+属性+值

代码风格

样式格式：展开风格

样式大小写：使用小写

空格规范：

1. 属性前面，冒号后面保留一个空格
2. 选择器和大括号中间保留一个空格

选择器

基础选择器

标签选择器

用标签名作为选择器

标签名前面不加点

类选择器

类名前面加点

遇到长的类名用短横线分割

<div class="red">女生</div>
.red {
            color: red;
}

多类名：一个标签可以有多个名字，类名之间用空格隔开，使用场景，可以提高代码复用率

id选择器

#id名{
	属性：值
}

和类的区别是，只能调用一次，其他的标签不能调用和前面一样的id（一次性的）

通配符选择器

*{
	属性：值
}

选择所有元素，更改全部样式

复合选择器

基础选择器的组合

后代选择器

父 子 {
	属性：值
}

.类名 子 子{
	属性：值
}

子元素选择器

只能选亲儿子

父>亲儿子{
	属性：值
}

并集选择器

通过逗号分割，任何形式都可以

div,
        p,
        .ping li {
            color: pink;
        }

伪类选择器

1. 给链接添加特殊效果

名字前面用冒号

a:link//鼠标未点过的链接
a:visited//鼠标点过的链接
a:hover//移上去变色
a:active//鼠标按下还没弹起

按照以上的顺序来写

链接不受body控制

2. ：focus伪类选择器

   获得焦点的光标的表单元素

字体属性

font-family：‘字体名字’

p {
            font-family: 'Times New Roman', Times, serif;
        }//按照顺序来找系统兼容的字体

可以直接给body设置字体

字体大小

font-size：像素大小

可以给整个body设置字体大小（标题标签需要单独指定文字大小）

normal=400

文字样式 font-style

normal、ltalic（斜体）

复合写法

font:style、weight、size、family

文本属性

1. 颜色，用color属性
2. 对齐（水平）（盒子内）text-align：center、left、right
3. text-decoration：none（删除下划线）
4. text-indent
5. em是相对单位，相对当前元素的大小的单位
6. linge-height：行间距=上下行高+文本高度

引入方式

内部样式表

将css放入html的

行内样式表

放在标签的style属性里面（）必须是双引号

<div style="color: pink;">又有</div>

外部样式表

1. 新建后缀名为css 的文件

2. <link rel="stylesheet" href="haha.css">
   

想让图片居中对齐，就让图片的父标签的文本居中对齐

emmet语法

1. 快速生成html结构语法

   标签名加*，生成多个标签

   父子关系：ul>li

   兄弟关系：+

   “.”+类名：生成div里面的类名

   "#“+id名：生成div里面的id名

   .demo$*5
   <div class="demo1"></div>
       <div class="demo2"></div>
       <div class="demo3"></div>
       <div class="demo4"></div>
       <div class="demo5"></div>
   

   生成的标签里面自动有文字

   div{哈哈哈哈}
       <div>哈哈哈哈</div>
   

2. 快速生成css样式语法

   属性的缩写+数字

元素显示模式

块元素

div、h、p、ul、li

特点：自己占一行、宽度高度内边距都可以操作、是一个容器或者盒子，默认宽度为100%，可以在里面放行内或块元素

！！！！！！文字类元素不可以放其他元素（p、h）

行内元素

除了块元素都是行内

特点：一行可以有多个、不能设置宽和高、默认宽度为本身的内容、只能容纳文本或者其他行内元素

！！！！！！链接里面不能再放链接，a里面可以放块元素

行内块元素

img、input、td

特点：一行有多个（中间有空白缝隙）、默认宽度为本身、可以设置高和宽

元素显示模式的转换

一种模式转换成另一种模式

行转块：display:block
块转行：display: inline;
行转行内块： display: inline-block;

文字垂直居中：行号等于盒子的高度

css 的背景

背景平铺（默认平铺）

background-repeat: no-repeat|repeat|repeat-x|repeat-y;

页面元素的背景颜色和背景图片可以同时存在

背景图片的位置

background-position: x y;
xy可以是方位名词也可以是数字也可以使用混合单位

只写了一个方位名词，另一个一定是居中

超大背景图片

为body定义背景图片

背景附着

background-attachment: scroll|fixed;

！！！！！！！综合写法

background：各种属性，且顺序没有要求

背景半透明

background-color: rgba(0, 0, 0, 0.3);
只对背景颜色半透明

css三大特性

层叠性

给同一个标签设置多个样式，遵循的原则是就近原则（只有样式冲突的情况）

继承性

子标签会继承父标签的某些样式：与文字有关的样式

行高的继承：

行高可以不跟单位（表示子元素大小的1.5倍）

父亲的父亲也会继承

优先级

选择器相同：就近原则

选择器不同：根据权重

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GD74ZxKv-1645193029259)(C:\Users\13684\AppData\Roaming\Typora\typora-user-images\image-20220213105030297.png)]

!important > 行内 > id >class>元素>继承和通配符

继承的权重是0

a链接的继承样式不会实现

权重叠加：

复合选择器会有权重叠加，复合选择器会有权重叠加，且不会进位

盒子模型

网页布局的本质：

1. 准备好相关的网页元素
2. css设计好盒子的样式（宽、高）
3. 往里面装内容

盒子模型

border：边框 content：内容 padding：内边距 margin：外边距

边框（border）

粗细、样式、颜色

border-style: solid 实线边框
dashed：虚线边框
dotted：点线

复合写法：没有顺序

设置上下左右边框：border-方位词

层叠性：就近原则

border-collapse合并相邻边框

一个盒子加上边框，盒子大小会变大

内边距

padding-方位词 设定距离

padding不会占用盒子的大小，意思是会撑大盒子（解决方法，用w和h减去内边距） 盒子不指定wh则不会撑开

复合写法：

padding: 5px;上下左右
padding: 5px 10px; 上下5 左右10
padding: 5px 10px 20px; 上5 左右10 下20

margin外边距

margin-方向名词

复合写法：和padding一样

让块级盒子水平居中：

1. 盒子指定宽度
2. 左右外边距设置为auto

margin: 0 auto;

让行内元素水平居中：

给父元素加：ta：center

嵌套外边距合并

两个嵌套关系的块元素，子元素有上边距，父元素会塌陷（浮动的盒子不会）

解决方法：

1. 为父元素定义上边框
2. 为父元素定义上内边框
3. 为负元素添加：overflow: hidden;

清除内外边距

浏览器会给元素一个默认的边距

* {
            margin: 0;
            padding: 0;
        }

行内元素不要设置上下内外边距

去掉li前面的小圆点：

list-style: none;

圆角边框

border-radius: 左上 右上 右下 左下; 用10px为半径的圆去切

单位为px或者百分比，还可以做成圆形

盒子阴影

box-shadow: 水平 垂直 模糊距离 影子尺寸 颜色 内阴影

不占用空间

文字阴影

text-shadow

浮动

传统网页布局的三种方式《标准流：标签按照默认规定好的方式排列、浮动、定位》

准则：多个块级元素，纵向排列用标准流；横向排列用浮动

格式

选择器 {float ： none|left|right}

浮动的特性

脱标

1. 脱离标准流的控制
2. 不再保留原先的位置（被其他标准流的盒子所占有）

特性二

多个盒子设置浮动，会在一行内对齐（顶端对齐），宽度不够就开第二行

特性三

具有行内块的特性

行内元素有了浮动，就不需要转换成块级元素或者行内块元素

块级盒子没有设置宽度，默认和父亲一样宽，加了浮动，大小根据内容决定

和标准流的父亲搭配

浮动的盒子只会影响后面的标准流不会影响后面的标准流

清除浮动

父元素不给高度，子元素浮动，父元素会高度塌陷

格式

1. 额外标签法（必须是块级元素不能是行内元素）

额外的后面的标签 {clear ： both|left|right}

2. 父亲元素添加overflow

overflow：hidden、auto、scroll

3. ：after伪元素（额外标签的升级版）

4. 双伪元素清除浮动（:after加上:before）