Web前端学习

丽儿吖～

已于 2024-09-12 10:44:49 修改

阅读量968

点赞数 11

分类专栏：前端文章标签：前端学习

于 2024-06-27 11:49:30 首次发布

本文链接：https://blog.youkuaiyun.com/2301_80318717/article/details/139975802

版权

前端专栏收录该内容

1 篇文章

订阅专栏

一、css样式引用

方法一：行内样式

方法二：内部样式

@import url(css/style.css);

方式三：链接外部样式表

一个外部样式表可以被多个网页引用，一个网页也可以引用多个外部样式表

二、css语法规则

css样式由选择器和声明组成的
           选择器{
               属性1:属性值;
               属性2:属性值;
               ......

属性和属性值之间用英文状态的冒号分隔，多个属性之间用英文状态的分号分隔；

选择器名称分大小写的,属性和属性值不分大小写

三、css基础选择器

1.id选择器：#定义调用id 只能用一次

2.标签选择器：html中的标签名作为选择器名称

优点:可以统一修改某一类标签的样式

缺点: 太统一了，没有差异化

3.类选择器：.类名

类名命名的注意事项：
1.不能使用数字开头,不能是纯数字,不能使用汉字,可以使用英文,或者英文和数字的组合
2.点后面的类名尽量不要使用标签名

4.属性选择器

1）利用属性选择器就可以不用借助于类或者id选择器

2）属性选择器还可以选择属性=值的某些元素重点务必掌握的

3）属性选择器可以选择属性值开头的某些元素

4）属性选择器可以选择属性值结尾的某些元素

5.通配符选择器：用*作为选择器名称

常用的通配符： *（多个字符）？（单个字符）

注：标签类型:行内元素块元素
行内:不能自动分段的(没有宽高属性) span b i u s strong em ins del img a
块:可以自动分段(有宽高属性) div p h1 ul ol li table

四、css三大特征

1.css层叠性:当优先级相同的情况下,样式不冲突则全部叠加,样式冲突后,执行就近原则(后来者居上)

2.继承:当子元素没有自己的样式的时候,会继承父元素的某些特征(文本样式的属性),并不是所有的属性都会被继承(盒子模型)

3.优先级：通配符<标签<类<ID<行内样式<!important

4.权重：通配符 0 0 0 0
标签 0 0 0 1
类       0 0 1 0
id       0 1 0 0
行内   1 0 0 0
important 无穷大

继承的权重是0，复合选择器的权重会叠加,但是不会进位

五、表格

table 表格 <table border="边框宽度" width="宽" height="高" align="对齐">
       tr tablerow 表格行标签
       td tabledata 表格列标签
       th 表头标签
       colspan 多列合并 <td colspan="2"></td>
       rowspan 多行合并 <td rowspan="2"></td>
       cellspacing 单元格之间的空白间距
       cellpadding 单元格边缘与其单元格内容之间的空白间距
       bgcolor 颜色格式：#55AAFF 按住alt键，单击鼠标左键
       caption 表格标题

六、超级链接

锚记链接先在目标位置做id标记，然后在菜单上做超链接，目标位置的id名前加#

七、定位

1.固定定位：position: fixed;

2.绝对定位：position: absolute;

注：子绝父相：如果父元素没有定位,子元素会向上找已经定位的祖先元素,祖先元素都没有定位,则以浏览器窗口重新定位 ,如果祖先元素有定位，以祖先元素重新定位

3.相对定位：position: relative;

相对定位是相对自己原来的位置重新定位,原位置会保留

4.粘性定位：position: sticky;

八、多媒体元素

1.视频文件：<video src="" controls autoplay muted poster></video>

controls 控制 autoplay 自动播放 muted 静音 poster 封面图片

2.音频文件：<audio src="" controls></audio>

九、浮动

1.标准流

块元素：从上往下排列

行内元素：从左往右排列

元素的类型(可以互相转换 display):
       块元素(block):独占一行   大小
       行内元素(inline):共占一行无大小
       行内块元素(inline-block):共占一行   大小

2.顶端对齐

特征1:浮动的元素会脱离标准流(脱标),原标准流中的位置不保留

浮动元素会影响后面的元素,不会影响前面的

特征2:浮动后的元素保持顶端对齐

特征3:浮动元素具有行内块元素的特征(共占一行,大小)

3.浮动：float: right;

4.清除浮动：

方法一:额外标签(加在最后一个浮动元素的末尾)

clear: both;

方法二:给父类元素添加after

.clearfix::after

5.行内块：display: inline-block;

十、复合选择器

1.标签指定式:将样式指定给特定的标签既然......又......

2.并集选择器

3.兄弟选择器

邻近兄弟，用+连接，只认识后面的标签，不认识之前的

普通兄弟选择器用~连接

4.子代选择器

十一、过渡动画

transition 过渡 transform 变形 translate 平移 scale 缩放 rotate 旋转 skew 倾斜

transition: all 2s linear;

动画：animation

关键帧 @keyframes +名字

十二、盒子模型

1.外边距：

垂直摆放的两个盒子同时分别设置了上下外边距,两个盒子的外边距取决于较大的值,而不会叠加

解决父子关系盒子外边距合并的问题:

方法一:给父元素添加上边框

方法二:给父元素添加1px的上内填充

方法三:给父元素添加overflow:hidden;

                1   四边
               2   上下       左右
               3   上   左右       下
               4   上   右   下   左

2.圆角矩形

border-radius: 50px;

注：清除所有元素默认的内外边距

* {
               margin: 0;
               padding: 0;
           }

1）块元素,默认宽度是父元素的宽度

2）list-style: none;取消项目符号

块元素(block)独占一行,有自己的宽和高
           行内元素(inline)共占一行,没有独立的宽和高
           行内块(inline-block)既能共占一行,又有独立的宽和高
           三者之间可以互相转换(display)

3.背景图像

background-image: linear-gradient(90deg,red,yellow,green);线性渐变

background-image: radial-gradient(circle at center,red,yellow);径向渐变

十三、链接伪类

顺序: 爱恨原则 love hate

:link 访问前

:visited 访问后

:hover 鼠标经过

:active 点击时

十四、列表

1.定义列表：dl dt dd

<dl>
<dt>定义的词</dt>
<dd>具体的解释</dd>
</dl>

2.嵌套列表

3.无序列表：unorderlist

type="disc/ circle/ square

4.有序列表：orderlist

ol 有序列表，li列表项 type编号类型 start开始的序号

十五、图像标签

图像和网页在同一级文件夹下，直接写图像名称即可。

图像在网页的下级文件夹中，需要写清楚图像的存放路径（文件夹名) ,有几级写几层。

图像在网页上级文件夹中，需要退出当前文件夹，退出用../表示，退几层写几个../

<img src="图像的路径" alt="替换文本" title="提示文本" width="宽" height="高">
图像在浏览器窗口居中对齐借助段落实现<p align="center"><img src="33.jpg" ></p>

        img 单标记，src写图像的存放路径，
       alt 替换文本，图像不能正常显示时才会出现
       title 提示文本，鼠标移动到图像上面才出现
       width 宽，height高，一般情况两个值只给其中一个，另一个会按照原图像的长宽比自动等比例缩放

十六、文本标签

1.标题标签：   h1--h6，逐级缩小，双标记，属性：对齐属性align
           例：<h1 align="center">学雷锋，为人民服务</h1>
2.段落标签：   p ,双标记，属性：对齐属性align
           例：<p align="right">记者：张三</p>
3.分割线：   hr,单标记，属性：color颜色 size粗细 width长短
           例：<hr color="grey" size="3" width="75%">
4.字体标签：font ，双标记，属性：color颜色 face字体 size字号
       <font color="red" size="5" face="隶书">归根结底就是全心全意为人民服务的精神。</font>
5.文本的格式化：加粗： b strong
           倾斜： i em
           下划线：u ins
           删除线：s del
           所有的格式化标签都是双标记
6.html属性的写法： <标签名属性="属性值" 属性="属性值">内容</标签名>
           <font color="red" size="5" face="隶书">归根结底就是全心全意为人民服务的精神。</font>
               属性写在开始标签内部
               属性名和属性值之间用等号连接
               多个属性之间用空格分割
7.特殊字符：空格    大于号>   小于号<
8.换行符：br 单标记，强制换行

十七、文本格式

1.引入字体文件
           @font-face {
               font-family: "方正剪纸";自己定义
               src: url(font/FZJZJW.TTF);/* 字体文件的路径

}

2.使用引入的字体：注意字体的名称前后一致

十八、文本属性设置

1.文本的颜色

颜色的表示方法:1）.red 2）#ff0000 3）rgb(255,0,0)

2.字符间距

letter-spacing：定义字间距

word-spacing：定义词间距

3.行间距

line-height: 1.5em;——1.5倍行高

4.文本的转换(大小写)

1）首字母大写

text-transform: capitalize;

2）全部大写

text-transform: uppercase;

3）全部小写

text-transform: lowercase;

5.文本的修饰

font-weight: bold;
font-size: 30px;
font-family:"黑体";

font字体综合设置:
           font:加粗/倾斜   字号字体;
           顺序不能变
           字号和字体不能省略,必须有

font-weight: normal;/* 取消加粗 400*/

font-style: normal;/* 取消倾斜 */

text-decoration: underline;/* 加下划线 */

text-decoration: none;/* 取消下划线 */

6.对齐方式

text-align: center;

7.首行缩进

text-indent: 2em;/* 首行缩进 2字符*/

8.文字的阴影

text-shadow: 10px 5px 15px #ccc;

十九、超链接

<a href="目标"></a>
       目标：1.站点内的网页<a href="html/02.html">02网页</a>
           2.外网的网址<a href="http://www.baidu.com">百度</a>
           3.电子邮件<a href="mailto:11112@163.com">给我发邮件</a>
           4.文件下载<a href="download/zy.zip">文件下载</a>
           5.位置（锚点）第一步用id在目标位置做标记 <h3 id="js">网页特效</h3>
           第二步用超链接，目标为 #id名 <a href="#js">学习js</a>