2021/3/12--前端学习第5天笔记
程序员文章站
2022-05-10 11:02:49
...
2021/3/12–前端学习第5天笔记-开始css
通用属性：
<!-- 表单 -->
<form action="/create">
<!-- 用户名 -->
<label for="nickname">昵称</label>
<!-- name代表字段名称 value代表字段的值-->
<!-- 提交的时候 ？xxx=xxx&xxx=xxx -->
<!-- disabled 禁用表单控件 -->
<input disabled type="text" name="nickname" value="ickt">
<!-- readonly 只读 -->
<input readonly type="text" name="readonly" value="ickt">
<!-- maxlength minlength -->
<input type="text" minlength="4" maxlength="8">
<!-- required 必填项 -->
<input required type="text">
<hr>
<!-- 介绍 -->
<label for="intro123">简介</label>
<!-- autofocus自动获取焦点 -->
<!-- placeholder 提示性语句 -->
<textarea autofocus name="intro123" id="intro" cols="30" rows="10" placeholder="请输入">】、
</textarea>
<!-- 提交 -->
<button>提交</button>
</form>
废弃标签和其他标签：
废弃标签：font frame b粗 i斜 u下划 s删
废弃的理由：前两个是因为有替代标签、后四个语义化不强被替换。
其他标签：pre预格式化 code单行代码 strong强调加粗 em强调斜体 ins下划线 del删除线 abbr定义缩写 address定义地址 iframe内联框架。
<!-- 废弃标签 -->
<i>文本</i>
<s>文本</s>
<u>文本</u>
<b>文本</b>
<!-- 其他标签 -->
<p>hello
world</p>
<!-- 预格式化原样输出 -->
<pre>hello
world</pre>
<!-- br换行 -->
<!-- hr横线 -->
<p>爱创课堂<br><hr> hello</p>
<!-- iframe框架标签，引入其他的页面 -->
<iframe src="https://www.baidu.com/" frameborder="0" width="1200" height="600"></iframe>
<strong>hello</strong>
<em>hello</em>
<ins>hello</ins>
<del>hello</del>
<!-- title 是完整版本 -->
<abbr title="">hello</abbr>
<address>山西省运城市盐湖区</address>
字符实体和代码规范：
<!-- & + nbsp空格 emsp全角空格 copy版权符号 yen人民币符号 gt大于 lt小于 -->
<h1><s p an></h1>
<!-- 代码规范 -->
<!--
小写
四个空格一个缩进
属性名小写、值用双引号
class全字母小写、单词之间用-隔开
id用驼峰式命名
-->
1css基础知识
css：层叠式样式表 cascading style sheet 由w3c维护更新
使用符合css语法的纯文本为页面添加样式效果。
web前端三层：
结构层 html 搭建网页
样式层 css 美化样式
行为层 js 交互的角度描绘行为
引入目的：样式结构分离、代码量减少、浏览器兼容性减少
CSS包括的部分：选择器、样式规则（包含样式和样式的值）
<!-- 在将css文件发往服务器之前，将代码压缩，删掉所有的空格换行，文件体积变小，加载速度变快。
书写要按照规范。压缩和格式化都可以用工具。（站长工具） -->
引入样式的四种方式：
行内（内联）式：耦合高，后期维护难。
嵌入（内嵌）式，
外链(链接)式，
导入式，
<!--2 <style type="text/css">
p {
color:green;
font-size: 50px;
}
</style> -->
<!--3 外链式 -->
<!-- href链接地址 type说明文件类型 rel问价与页面的关系 -->
<!-- <link rel="stylesheet" href="./css/style.css" type="text/css"> -->
<!--4 导入式 -->
<!-- <style type="text/css">
@import url("./css/style2.css");
</style> -->
上样式
*********************************************************************************
下骨架
<!-- 还可以在css文件中导入 -->
<link rel="stylesheet" href="./css/import.css" type="text/css"><!-- 1行内式（内联式 -->
<!-- color颜色、font-size字体大小 -->
<!-- 样式和结构耦合在一起，没有分离 -->
<!-- 不能服用 -->
<!-- <p style="color: red;font-size: 50px;">爱创课堂</p>
<p style="color: red;font-size: 50px;">爱创课堂</p> -->
<!-- 2内嵌式（嵌入式 部分分离-->
<!-- <p>hello</p>
<p>hello</p>
<p>hello</p> -->
<!-- 3外链式（链接式 css文件不建议数字开头 完全分离-->
<!-- 使用link链接的css文件是和html并行加载的 -->
<!-- <p>world</p>
<p>world</p>
<p>world</p> -->
<!-- 4导入式 html加载完成后才加载 影响渲染速度 会闪-->
<p>world</p>
<p>world</p>
<p>world</p>
优先级：后面样式覆盖前面样式
CSS选择器
通配符选择器：*{样式：值} 对默认样式标准化。所有标签
<style>
/* 通配符 */
*{
/* 所有元素边框 */
border: 1px solid green;
/* 设置元素的内边距 */
padding:10px;
}
</style>
<title>Document</title>
</head>
<body>
<!-- 通配符选择器html、body、h1都会被选中，会出现三条边框。 -->
<h1>ickt</h1>
</body>
</html>
标签选择器：标签{样式：值}
/* 标签选择器 */
div{
/* bd+tab */
border: 1px solid green;
/* 内边距 */
padding: 10px;
}
/* 定义默认样式 */
li{
list-style-type: none;
}
类选择器：
/* id选择器 */
#pageTitle{
color: red;
}
/* 层叠式 两种都同时显示*/
p{
font-size: 50px;
}
id选择器：
<style>
/* 类选择器 */
.title{
color: red;
/* 关于像素 单位：px */
font-size: 50px;
/* 原子类：一个类选择器，只定义一条样式*/
}
.fz-50{
font-size: 50px;
}
.fz-100{
font-size: 100px;
}
.green{
color: green;
}
</style>
<title>Document</title>
</head>
<body>
<!-- 类名建议使用横线分割单词 id驼峰式、横线分割单词 -->
<div class="title">ickt</div>
<p class="title">ickt</p>
<h1 class="title">ickt</h1>
<!-- 原子类选择器 类名用空格隔开 -->
<span class="green fz-100">icktttt</span>
</body>
高级选择器
P37
P38
上一篇： 前端的学习之路：初级CSS---字体族
下一篇： 前端的学习之路：初级CSS---继承
推荐阅读