蓝旭前端预习2

沫沫.momo

已于 2023-05-12 01:08:27 修改

阅读量462

点赞数

文章标签： css

于 2023-03-31 20:58:35 首次发布

本文链接：https://blog.csdn.net/2201_75663851/article/details/129886899

版权

（3）下划线命名法（UnderScoreCase）

（4）匈牙利命名法（Hungarian）（了解）

一、HTML标签

1、常用标签

<html> </html>	网页根元素，用来定义整个HTML文档
<head> </head>	网页头部区
<body> </body>	网页主体内容区，用来定义HTML文档的主体（显示在网页的内容都要写在里面）
<title> </title>	用来定义文档标题
<hx> </hx>(x=1~6)	用来定义文档的x级标题
<p> </p>	用来定义文档段落
<a> </a>	用来定义文档超链接（使用场景：下载；压缩文件；网站链接；电子邮件；手机电话；短信信息等）
<table></table>	用来定义表格

2、列表标签

无序列表

有序列表

自定义列表

<ul>

<li> </li>

......

</ul>

<ol>

<li> </li>

......

</ol>

<dl>

<dt> </dt>

<dd> </dd>

</dl>

3、其他标签

加粗	<b></b>
倾斜	<i></i>
下划线	<u></u>
删除线	<s></s>、
......

4、一个例子

<html>
    <head>
        <title>2022春所选课程简介</title>
    </head>
    <body>
        <h1 align = "center">2022春所选课程简介</h1>
        <h2>所选课程如下</h2>
        <ol>
            <li>离散数学</li>
            <li>足球</li>
            <li>大学英语</li>
            <li>中文写作</li>
            <li>算法与程序设计实践</li>
            <li>中国近代史纲要</li>
            <li>高等数学</li>
            <li>JAVA</li>
            <li>数字电路与数字逻辑</li>
            <li>计算机新技术讲座</li>
            <li>网页设计与开发</li></li>
        </ol>
        <table border="1">
            <tr>
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
                <td>星期四</td>
                <td>星期五</td>
            </tr>
            <tr>
                <td>离散数学</td>
                <td>大学英语</td>
                <td>离散数学</td>
                <td>算法与程序设计实践</td>
                <td>大学英语</td>
            </tr>
            <tr>
                <td></td>
                <td>中文写作</td>
                <td>高等数学</td>
                <td>高等数学</td>
                <td>网页设计与开发</td>
            </tr>
            <tr>
                <td>篮球</td>
                <td>高等数学</td>
                <td></td>
                <td>数字电路与数字逻辑</td>
                <td>中国近代史纲要</td>
            </tr>
            <tr>
                <td></td>
                <td>中国近代史纲要</td>
                <td></td>
                <td>计算机新技术讲座</td>
                <td>数字电路与数字逻辑</td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td>JAVA</td>
                <td>JAVA</td>
                <td></td>
            </tr>
        </table>
        <h3>离散数学</h3>
        <p>研究离散量的结构及其相互关系的数学学科，是现代数学的一个重要分支</p>
        <h3>大学英语</h3>
        <p>英语听说读写</p>
        <h3>高等数学</h3>
        <p>由微积分学，较深入的代数学、几何学以及它们之间的交叉内容所形成的一门基础学科</p>
        <h3>JAVA</h3>
        <p>JAVA编程语言</p>
        <h3>算法与程序设计实践</h3>
        <p>C语言的数据类型、运算符和表达式，数据查询和编辑算法，递推、穷举、倒推算法，结构体与共用体，编译预处理等内容</p>
        <h3>数字电路与数字逻辑</h3>
        <p>介绍了小规模数字集成电路的逻辑设计技术以及中、大规模数字集成电路和可编程逻辑器件</p>
        <h3>网页设计与开发</h3>
        <p>是根据希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作</p></h3>
        <p><a href="https://passport2.chaoxing.com">超星学习通登录</a></p>
    </body>
</html>

二、CSS 基础

CSS简介

1、CSS是什么

CSS（Cascading Style Sheets，层叠样式表）是一种CSS以设计、改变其HTML页面的样式而知名，用于控制页面的外观样式，将表示样式应用到标记的Web和其他媒介，如XML文档中。

2、CSS的发展历史

1996年12月W3C推出了CSS规范的第一个版本，其中包含了颜色，背景和文字等相关属性；
1998年W3C发布了CSS的第二个版本即CSS2.0，实现了内容和表现效果分离，并开始使用样式表结构。
2001年5月W3C开始进行CSS3标准的制定。该标准将整个网页系统划分为很多的相互独立的子模块，然后让程序员根据不同的模块进行开发与设计对应的层叠样式表，用来减少CSS文件的体积。

3、CSS的作用

实现内容与样式的分离（HTML 专注去做结构呈现，样式交给css），便于团队开发。
控制页面布局, 使页面更精美。比如: 设置浮动、定位等样式。
美化界面,。比如: 设置标签文字大小、颜色、字体加粗等样式。
样式复用，便于网站的后期维护。
丰富我们的网页，使布局更加灵活自如。

CSS引用方式

1、外链式

即将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link>标签将外部样式表文件连接到HTML文件中。

优点：代码量少，一个 CSS 文件可以控制多个页面有利于改版和维护，有效的利缓存机制，加快页面的访问速度。
缺点：对于单个页面，会有多余的代码从外部引入中的 href 属性会给服务器造成请求压力。

<head>
    <link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>

补充：

href：定义所连接外部样式表文件的地址，可以是相对路径，也可以是绝对路径。
type：定义链接文档的类型，这里需要指定为“text/css”，表示链接的外部文件为CSS。
rel：定义当前文档与被链接文档之间的关系。

2、内嵌式

即将CSS代码集中写在HTML文档的<head>头部标签中，并用<style>标签定义。

优点：代码量少；相对于外部引入，单页代码量少没有服务器请求压力；符合规范，做到了 html 和 css 分离，但不够彻底。
缺点：只对其所在的HTML页面有效。在设计网站的时候，不建议用，因为不能充分发挥CSS代码的重用优势。

<head>
    <style type="text/css">
        选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
    </style>
</head>

补充：

<style>标签一般位于<head>标签中的<title>标签之后；
在<style>标签中，只有设置type的属性值为“text/css”，浏览器才知道<style>标签包含的是CSS代码。

3、行内式（内联式）

即通过style属性设置标签的样式，实际上任何HTML标签都拥有style属性，用于设置行内式。属性和属性值的书写规范与CSS样式规则一样。

优点：优先级较高，个别特殊情况下时候使用
缺点：只能作用于当前标签上，不能重复使用，代码复用性差后续维护代码较难，代码可读性较差

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容</ 标签名>

补充：

行内式CSS只对其所在的标签及嵌套在其中的子标签起作用。
通常CSS位于<head>头部标签中，但是行内式CSS位于<html>根标签中。

CSS三大特性

1、层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。

层叠性原则：

若样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式；
若样式不冲突，则不会层叠。

2、继承性

即子标签会继承父标签的某些此样式，如文本的颜色和字号，简单理解：子承父业

简单继承：

子元素可以继承父元素的样式（ text -, font -, line ﹣这些元素开头的可以继承，以及 color 属性）
恰当的使用继承可以简化代码，降低CSS的复杂性。

< style >
      body
      {
        color : brown ;
        font :12px/1.5' Microsoft yahei';
      }
    </ style >
< body >
     < p ></ p >
</ body >

行高继承：

行高可以跟单位也可以不跟单位；
如果子元素没有设置行高，则会继承父元素的行高为1.5；
此时子元素的行高是：当前子元素的文字大小＊1.5。

3、优先级

即当同一个元素指定多个选择器就会由优先级产生。

选择器相同，则执行层叠性
选择器不同，则按照选择器权重执行

选择器权重：

选择器	选择器权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
Id选择器	0,1,0,0
行内选择器 style=" "	1,0,0,0
!important 重要性	无穷大

CSS常用属性

1、字体类

属性名称	描述	补充
font-family	设置元素字体
@font-face	定义字体
font-style	规定文字样式	normal ：正常的，默认就是正常的 italic ：倾斜的
font-weight	规定文字粗细	bold：加粗 bolder：比加粗还要粗 lighter：细线，默认就是细线
font-size	规定文字大小	格式：font-size: 30px; 单位：px（像素 pixel）

2、文本类

属性名称	描述	补充
color	设置文本颜色
text-decoration	给文本添加装饰	underline：下划线 line-through：删除线 overline：上划线
text-align	设置文本水平对齐方式	left：左 right：右 center：中
text-indent	设置文本缩进

3、盒模型类

属性名称	描述
height	描述设置元素的高度
width	设置元素的宽度
border	设置边框
margin	用于在任何定义的边框之外，为元素周围创建空间，外边距
padding	用于在任何定义的边界内的元素内容周围生成空间，内边距

4、背景类

属性名称	描述
background	在一条声明中设置所有背景属性的简写属性
background-color	设置背景颜色
background-image	设置背景图片
background-repeat	用于控制背景图片的平铺方式
background - position	指定背景图像的位置
background - size	规定背景图像尺寸

**补充

1、选择第几个标签

标签	补充
first-child	表示选择列表中的第一个标签
last-child	表示选择列表中的最后一个标签
nth-child(3)	表示选择列表中的第3个标签
nth-child(2n)	表示选择列表中的偶数标签
nth-child(2n-1)	表示选择列表中的奇数标签
nth-child(n+3)	表示选择列表中的标签从第3个开始到最后
nth-child(-n+3)	表示选择列表中的标签从0到3，即小于3的标签
nth-last-child(3)	表示选择列表中的倒数第3个标签
last-of-type	表示其父元素下的最后一个指定类型的元素。

2、常见命名规则

（1）帕斯卡命名法（Pascal）

单字之间不以空格断开或连接号（-）、底线（_）连结，第一个单字首字母采用大写字母；后续首字母亦用大写字母，例如：FirstName、LastName。每一个单字的首字母都采用大写字母的命名格式，被称为“Pascal命名法”，也有人称之为“大驼峰式命名法”（Upper Camel Case）,为驼峰式大小写的子集。

（2）驼峰命名法（Camel）

1.小驼峰法

变量一般用小驼峰法标识。驼峰法的意思是：除第一个单词之外，其他单词首字母大写。

例如：变量myStudentCount的第一个单词全部小写，后面的单词首字母大写。

2.大驼峰法

相比小驼峰法，大驼峰法（即帕斯卡命名法）把第一个单词的首字母也大写了。

使用场景：

减号和加号之类的操作符是保留字符，不允许用在函数或变量的名字里。这同时意味着它们也不能用在方法或属性的名字里（方法和属性其实是关联在某个对象上的函数和变量）

例：

当你需要引用一个中间带减号的CSS属性时，DOM要求你用驼峰命名法，则CSS属性font-family 变为DOM属性fontFamily