htm+css复习

最新推荐文章于 2024-06-26 00:06:04 发布

致敬美好的未来

最新推荐文章于 2024-06-26 00:06:04 发布

阅读量1k

点赞数

分类专栏： HTML+css

本文链接：https://blog.csdn.net/weixin_42333573/article/details/106730672

版权

HTML+css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

选择器

类选择器，id选择器，标签选择器，复合选择器，后代选择器

属性选择器

img[alt=“foo”] {
这个选中了所有alt为foo的图片；
}

img[alt^=‘f’]{
选择alt属性以f开头的图片；
}
img[alt$=‘f’]{
选择alt属性以f结尾的图片；
}
img[alt*=‘f’]{
123 f 34
选择alt属性以中间包含’f’的图片；
}
img[alt]
{
选择所有有alt属性的img标签
}
p[like_{=‘orange’][like}=‘google’]{
p标签里面含有like属性含有orange和Google的标签
}
[foo|= “zh”]
{
选择foo属性为zh 或者以zh-开头的所有元素；
}
a[href=$=’.txt" i]
{
i表示大小写不敏感；
}

连接伪类选择器

a:href {
没有访问过的
}
a:visited {
color: yellow;
访问过的；
}

lv ha(active)

位置伪类

li:nth-child(2n+1){
n从0开始增长；
colro:red;
}

li:first-child{

}

li:last-child{}
li:nth-child(3){选择第三个子节点}
nth-last-child(5){倒数第5个}
li:first-child:hover {}
li:first-child:nth-last-child(8){即使第一个也是倒数第8个}
odd even ; 奇数项，偶数项

选择器优先级

优先级的定位： 0,0,0,0;
不进位

继承

inherit
继承下来的话没有优先级，比*还要下；
通配符的优先级是0,；
继承是啥？直接选择不到子元素；

层叠

css值和单位

纯数字；百分比； rgb #fff(白色)

focus光标点下去，例如光标在input元素里面，有tabindex属性的元素；

lvha

位置伪类，P:first-child; :last-child; :nth-child;

bgc : hls:

绝对长度单位：cm,mm, in; 相对长度单位： px;

em当前元素font-size的大小；

ex:

我是当前元素
div{font-size: 20px} p{width:10em;(相当于200px) font-size:1.5em;(相当于30px)}
google浏览器默认最小字号12px;
rem;根元素的字号大小；仅仅跟根源素（HTML）元素字号大小有关；
border-radius: 3px; //圆角
ch 是0字符的宽度；
degree；弧度；
1turn = 360deg; 1000ms = 1s;

伪类选择器

contnet 字符串

div:before {
content: ‘(’ attr(foo) ‘)’;
}

字体

字体族：serif;//衬线字体；周围小三角；//ex：宋体
sans-serif;// 非衬线字体；//雅黑
monospace; //等宽字体；
字体族不能加引号；
字体的退化方案；
英文写前，中文写后；

字重

font-weight；bold，100-900；且只能是100的倍数；

###字号 font-size

medium,large,small;//不推荐使用
使用百分比；
120% 和1.2em是一样的；
继承的是计算后的结果，不是书写后的结果；

font-style

italic;//斜体，专门设计的斜体；
oblique;//斜体，就是把正体倾斜

###font-weight:

400,700;

font-variant

text-transform: uppercase; //将字体转大写；
text-transform: lowercase; //将字体转小写；
font: normal bold small-caps 20px/1.5 宋体;
text-decoration:underline; //overline;// line-through;
属性选择器 0010；

HTML实体

> < ' © &quote;
我我(我)

###test

role 表达当前元素正在模拟显示何种常见的UI组件
arai-xxx 则是这个组件的当前状态
data-xxx指的是自己起的属性

input

email
text
tel
date
time
number
submit
reset
button
file
password
属性
required 必填属性
placeholder 提示文本
autofocus 自动聚焦属性
multiple 可以多选文件进行提交
autocomplete 有name属性，同时提交成功过，可以记录提交过的内容，类似账号，密码一样

vedio audio

autoplay
loop
controls
muted 静音播放

属性选择器

e[attr]
E[attr=“val”]
E[class^=test] {} 匹配class 属性并且以test开头的元素
E[att $=“val”] 结尾
E[attr *=“val”]匹配具有attr属性并且含有val的元素

权重

类选择，属性选择器，伪类选择器，权重都是10
标签选择器权重是1；

结构伪类选择器

E:first-child
E:last-child
E:nth-child(2n+1);
E:nth-child(5); 选择第5个
n从0开始，适合奇偶行变色
2n,2n+1,n+5,-n+5;
E:first-of-type
E:last-of-type
nth-of-type(n)
这两个的区别

<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
section div:nth-child : 一个也选择不了，先看nth-child,再看div
section div:nth-of-type: 选择熊大
权重是12

伪元素选择器

利用css来创建新标签元素；
::before
::after
通过css创建新元素，但是找不到，属于行内元素
里面必须有content
权重是1，和标签选择器一样

css3盒子模型

box-sizing: content-box// border-box;
第一个是默认的，第二个是盒子大小固定不变的，相当于width是盒子的最终大小

清除浮动的方式

css图片模糊处理

filter：blur(4px);//数值越大，图像越模糊

宽度

width: calc(100% -30px);
可以进行加减乘除的计算

css3的过渡属性

transition: 要过渡的属性花费时间运动曲线何时开始
时间的单位是s,合适开始，默认值是0
谁做过渡谁来加
经常和hover一起搭配来使用
如果想写多个属性，用逗号分隔
如果想要过个属性，可以选择all(要过渡的属性)
新增的动画属性曲线默认是ease;

border-radius

border-radius: 7px;
行高的一半，圆角

day01

meta 页面配置信息

name=“keywords” content=“关键词”
name=“description” content=“当前页面的描述”

影响页面排名的4个因素

** 1、竞价排名
** 2、下面

keywords
description
title
h1
h1 原则上不能写两个，你写两个也不影响显示

标签的分类

块级元素：设置了高度和宽度都会生效，不设置高度和宽度，默认宽度是100%，默认高度随着内容填充 div p ul>li ol>li dl>dt;dl>dd;
行内块元素：img input select
行内元素； span a b i em ；b是加粗，i和em是斜体；
转换方式： display;
display: none;//脱离文档流
visibility: hidden;//不脱离文档流

有序列表的type属性

ol>li; type属性默认的方式是1，按照数字排序
A ;按照大写字母排序
a；按照小写字母排序
I;按照大写罗马数字排序
i;按照小写路吗数字排序

a标签

超链接
锚基点
加另一个a的name数值表示标记锚点，当点击之后，页面自动定位到锚点的位置；
#abc; 这个是转到name属性为abc的a
这个是页面内定位，只写#号，代表转到页面内顶部

href=“javascript:void(0)”;

br标签

换行；相当于回车；

框架页

页面中在嵌套一个页面
iframe src=“另一个页面的地址”;
iframe 搭配a 标签，a的target属性等于 iframe的name属性数值，那么会在iframe中跳转；

table

thead; tbody;
tr 一行
td 一列
th 一列，代表表头的列；

id可以重复

子元素选择器

父元素选择器子元素选择器
这个找到的可以是孙子
父元素选择器>子元素选择器
找到直接子元素：儿子

border的样式

solid 实线
dashed 虚线线段
dotted 虚线圆点
inset 向内凹陷
outset

margin 外边距

2 个值：上下左右
4个值：上右下左
1个值：上下左右

padding 内边距

类似外边距

day01下午

转义

& 表示& 符号；
<
>
作用：防止HTML注入；

浮动

自动转换成 inline-block;
脱离标准流；
谁先飘起来谁先靠右
那么浮动元素的父元素的高度是0；
清除浮动：将浮动起来的元素回归到文档流中；
方法：统计元素中定义一个元素：
clear:
left 清除左浮动， right 清除右浮动， both清除左右浮动；

定位

子绝父相
改变元素的位置，但是不会影响到其他元素；
position： static;//静态定位(默认) relative;//相对定位； absolute;//绝对定位， fixed 屏幕固定
如果出现了非static 定位，top, left right bottom;会立即生效；如果是static,那么写了也不生效；
relative：不脱离标准流
参照原本没有定位的位置；
绝对定位：脱离文档流；
起点：是上一个有定位的父元素
固定定位：脱离文档流
参照点是：屏幕；
覆盖规则：（非static定位)后写的覆盖先写的；
z-index: 1;//有z-index的覆盖没有z-index的；

calc函数

calc(100% - 80px);
单位： px, 100% 参照父元素的百分比 vw,vh:参照屏幕的百分比；
100vh, 100vw;参照屏幕的高度和宽度的100%；
em是相对长度；参照的是父元素的 font-size;
rem 参照的是 html 的 font-size;

注意点

body,html的宽度和高度是随着填充来变的，刚开始是0；

弹性模型

作用：子元素分父元素的区域；
具备的条件： ex：爸爸给3个儿子分房子；
前提：爸爸有房子，父元素要有宽度和高度；
爸爸同意吧房子分给儿子：将父元素设置为弹性模型；
父元素：display: flex;
父元素可以决定分配方式： felx-decoration: column; row;(默认)
row-reverse 左右分，反方向；
column-reverse: 上下分，反方向
row; 左右分
align-items; 子元素的对其方式；条件；自由在左右分，子元素高度不是100% 或者上下分，子元素宽度不是100% 才有对其方式；
align-items: flex-start;(默认，开始位置对其)
align-items: flex-end;(结束位置对齐)
align-items: center;(居中对齐)
子元素：设置权重值：flex:1;
如果是左右分，子元素高度是 100% ，默认高度；
如果是上下分，子元素默认宽度是100%；

vertical-align:

对其方式：base,bottom,middle, top;
常用来解决图片和文字对其（例如头像和文字对其）

outline 和 resize:

textarea{ outline: none; resize: none;}
outline是去除轮廓线，点进去会有条蓝色线的那个，resize:none;意思是把拖动框去除；

解决图片底部默认空白的解决方法

1. 图片和文字在一行的话，默认的是基线对其方式
1. 解决方法：1. 使用vertical-align: middle, bottom, top;
1. 解决方法2：可以把图片转换为块级元素，块级元素没有基线对其方式；

省略号

单行省略： white-space: nowrap;
overflow: hidden; 溢出部分进行隐藏； text-overflow: ellipsis;省略号
多行省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

小三角

width: 0;
height: 0;
/* border: 100px solid red; */
border: 100px solid transparent;
border-top-color: red;

鼠标的默认样式

<ul>
        <li style="cursor: default;">我是默认的小白鼠样式</li>
        <li style="cursor: pointer;">我是鼠标小手样式</li>
        <li style="cursor: move;">我是鼠标移动样式</li>
        <li style="cursor: text;">我是鼠标文本样式</li>
        <li style="cursor: not-allowed;">我是鼠标禁止样式</li>
 </ul>