首页 > 编程札记 > 编程

kuiini的前端学习第三周

阅读： 评论：0

kuiini的前端学习第三周

kuiini的前端学习第三周

CSS 基础知识

一、CSS 定义

1、初识 CSS

层叠样式表（Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。

书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。

<title>CSS 初体验</title>
<style>/* 选择器 {} */p{/* CSS 属性 */color:red;}
</style>
<p>体验 CSS</p>

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* CSS 代码 *//* 选择器 { CSS 属性} *//* 属性名和属性值成对出现 → 键值对 */p {/* 文字颜色 */color: red;/* 字号 */font-size: 30px;}</style>
</head>
<body><p>体验 CSS</p>
</body>
</html>

效果：

2、总结

  1. CSS 书写在 title 标签下方
  2. style 标签里面可以书写 CSS 代码
  3. CSS 书写规则是 选择器（属性名：属性值；）

二、CSS 引入方式

  • 内部样式表：学习使用

    • CSS 代码写在 style 标签里面

  • 外部样式表：开发使用

    • CSS 代码写在单独的 CSS 文件（.css)

    • 在 HTML 使用 link 标签引入
      <link rel="stylesheet" href="./my.css">

      示例：

      效果：

  • 行内样式：配合 JavaScript 使用

    • CSS 写在标签的 style 属性里
      <div style="color: red; font-size:20px;">这是 div 标签</div>

      示例：

      <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 行内， style=" CSS 属性" --><div style="color: green; font-size: 30px;">这是 div 标签</div>
</body>
</html>

      效果：

总结：

  1. 实际工作中，常用 外部样式表 .CSS文件 引入方式。
  2. 在 HTML 中，使用 link 标签 可以引入外部样式表。

三、选择器

作用：查找标签，设置样式。

基础选择器

  • 标签选择器
  • 类选择器
  • id 选择器
  • 通配符选择器

1、标签选择器

使用标签名作为选择器 → 选中同名标签设置相同的样式。
例如：p, h1, div, a, img…

<style>p {color: red;}
</style>

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 特点：选中同名标签设置相同的样式，无法差异化同名标签的样式 */p {color: red;}</style>
</head>
<body><p>这是 p 标签</p><p>1111</p><p>2222</p>
</body>
</html>

效果：

2、类选择器

作用：查找标签，差异化设置标签的显示效果。

步骤：

  • 定义类选择器 → .类名
  • 使用类选择器 → 标签添加 class=“类名”
<style>/*定义类选择器*/.red {color: red;}
</style><!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>

注意：

  • 类名自定义，==不要用纯数字或中文，尽量用英文命名
  • 一个类选择器可以供多个标签使用
  • 一个标签可以使用多个类名，类名之间用空格隔开

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 定义 */.red {color: red;;}.size {font-size: 50px;}</style>
</head>
<body><!-- 使用 --><!-- 一个类选择器可以给多个标签使用 --><p class="red">1111</p><p>2222</p><!-- 一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开 --><div class="red size">这是 div 标签</div>
</body>
</html>

效果：

开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd

3、id选择器

作用：查找标签，差异化设置标签的显示效果。

场景：id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式

步骤：

  • 定义 id 选择器 → #id名

  • 使用 id 选择器 → 标签添加 id=“id名”

    <style>/*定义 id 选择器*/#red {color: red;}
</style>
<!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>

规则：

  • 同一个 id 选择器在一个页面只能用一次

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 定义 */#red {color: red;}</style>
</head>
<body><!-- 使用 --><div id="red">div 标签</div>
</body>
</html>

效果：

4、通配符选择器

作用：查找页面所有标签，设置相同样式。

通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同样式

* {color: red;
}

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {color: red;}</style>
</head>
<body><p>p 标签</p><div>div 标签</div><h1>h1 标签</h1><ul><li>li</li><li>li</li><li>li</li></ul><strong>strong</strong>
</body>
</html>

效果：

四、画盒子

目标：使用合适的选择器画盒子

新属性：

属性名作用
width宽度
height高度
background-color背景色

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.red {/* 宽度 */width: 100px;/* 高度 */height: 100px;/* 背景色 */background-color: red;}.yellow {width: 200px;height: 200px;background-color: yellow;}</style>
</head>
<body><div class="red">div1</div><div class="yellow">div2</div>
</body>
</html>

效果：

五、文字控制属性

1、字体大小

  • 属性名：font-size
  • 属性值：文字尺寸，PC 端网页最常用的单位 px
p {font-size: 30px;
}

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 经验：谷歌浏览器文字有默认大小 16px */p {/* font-size 属性必须有单位，否则属性值不生效 */font-size: 30px;}</style>
</head>
<body><p>测试字体大小</p></body>
</html>

效果：

2、字体粗细

属性名：font-weight

属性值：

  • 数字（开发使用）

    正常400
    加粗700

  • 关键字

    正常normal
    加粗bold
/* 不加粗 */
font-weight: 400;
/* 加粗 */
font-weight: 700;

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h3 {font-weight: 400;}div {font-weight: 700;}</style>
</head>
<body><h3>h3 标题</h3><div>div 标签</div>
</body>
</html>

原效果：

当前效果：

3、字体倾斜

作用：清除文字默认的倾斜效果

属性名：font-style

属性值：

  • 正常（不倾斜）：normal
  • 倾斜：italic

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>em {font-style: normal;}div {font-style: italic;}</style>
</head>
<body><em>em 标签</em><div>div 标签</div>
</body>
</html>

原效果：

当前效果：

4、行高

①行高

作用：设置多行文本的间距

属性名：line-height

属性值：

  • 数字 + px
  • 数字（当前标签font-size属性值的倍数）
line-height: 30px;
/* 当前标签字体大小为16px */
line-height: 2;

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {font-size: 20px;/* line-height: 30px; *//* 行高值是数字，表示当前标签字体大小的倍数 */line-height: 2;}</style>
</head>
<body><p>在大学期间，我将重点提升自己的专业素养水平，坚持学习高校专业性知识，同时注重科技创新能力和科学实践能力，综合发展。本人将认真完成本科专业课程，领会吸收所学知识，提升自身专业素养，根据自身学习情况合理制定学习计划。充分利用校园资源，例如学校图书馆，加强自身修养，汲取其它知识与本领。同时，积极参与学校组织活动，寻求为学校服务的机会，贡献自己的力量</p>
</body>
</html>

原效果：

当前效果：

行高的组成：上间距 + 文本高度 + 下间距

行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。

总结：

  1. 用 数字 + px 或 数字（当前标签 font-size 值得倍数） 来书写 line-height 属性值
  2. 测量行高的方法是 从一行文字得最顶（最底）测量到下一行文字的最顶（最底）
②行高-垂直居中

垂直居中技巧：行高属性值等于盒子高度属性值

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {height: 100px;background-color: skyblue;/* 注意：只能是单行文字垂直居中 */line-height: 100px;}</style>
</head>
<body><div>文字</div>
</body>
</html>

原效果：

当前效果：

5、字体族

属性名：font-family

属性值：字体名

font-family: 楷体;

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {font-family: 楷体;}</style>
</head>
<body><div>测试文字</div>
</body>
</html>

原效果：

当前效果：

font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "5BBB4F53", sans-serif;
拓展（了解）：font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左到右依次查找

  • font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体(sans-serif)

6、font 复合属性

div {/* 文字倾斜 */font-style: italic;/* 文字加粗 */font-weight: 700;/* 字体大小是30px */font-size: 30px;/* 行高为字号的2倍 */line-height: 2;/* 字体是楷体 */font-famil: 楷体;
}

div {/* font: 是否倾斜 是否加粗 字号/行高 字体; */font: italic 700 30px/2 楷体;
}

使用场景：设置网页文字公共样式

复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。

font: 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）

div {font: intalic 700 30px/2 楷体;
}

注意：字号和字体值必须书写，否则 font 属性不生效

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 文字倾斜、文字加粗、字体大小是30px、行高2倍、楷体 */div {font: italic 700 30px/2 楷体;/* fonr 属性必须写字号和字体，否则属性不生效 *//* font: 30px 楷体; *//* font: italic 700 30px/2; */}</style>
</head>
<body><div>测试 font 属性</div>
</body>
</html>

原效果：

当前效果：

7、文本缩进

属性名：text-indent

属性值：

  • 数字 + px

  • 数字 + em（推荐：1em = 当前标签的字号大小）

    p {text-indent: 2em;
}

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {text-indent: 2em;font-size: 30px;}</style>
</head>
<body><p>苍茫世界，天之高，地之广，人心不古。面对利益诱惑，有人出卖亲朋好友，有人始终坚贞不屈，有人看破红尘归隐山林，又有的人宁愿背负千古罪名，也不愿放弃……晴天，黑云滚动，厚重的云层随时可能坍塌下来。氤氲的彩色薄雾在天空中飘舞。凛冽的狂风在与山崖较着劲。海面波澜不定，澎湃着的浪花把岩石拍打得凸显狰狞。</p>
</body>
</html>

原效果：

当前效果：

8、文本对齐方式

作用：控制内容水平对齐方式

属性名：text-align

属性值：

属性值效果
left左对齐（默认）
center居中对齐
right右对齐

text-align: center;

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1 {/* 本质：居中的是文字内容，不是标题 *//* text-align: left; */text-align: center;/* text-align: right; */}</style>
</head>
<body><h1>标题文字</h1>
</body>
</html>

原效果：

当前效果：

9、图片对齐方式

text-align本质是控制内容的对齐方式，属性要设置给内容的父级。

<style>div {text-align: center;}
</style>
<div><img src="#" alt="">
</div>

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {text-align: center;}</style>
</head>
<body><div><img src="./image/网图4.jpg" alt=""></div>
</body>
</html>

原效果；
不宜放出😁
当前效果：
不宜放出😁

10、文本修饰线

属性名：text-decoration

属性值：

属性值效果
none无
underline下划线
line-through删除线
overline上划线

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {text-decoration: none;}div {text-decoration: underline;}p {text-decoration: line-through;}span {text-decoration: overline;}</style>
</head>
<body><a href="#">a 标签，去掉下划线</a><div>div 标签，添加下划线</div><p>p 标签，添加删除线</p><span>span 标签，添加顶划线</span>
</body>
</html>

原效果：

当前效果：

11、color 文字颜色

属性名：color

属性值：

颜色表示方式属性值说明使用场景
颜色关键字颜色英文单词red、green、blue…学习测试
rgb表示法rgb(r, g, b)r,g,b表示红绿蓝三原色，取值：0 - 255了解
rgba表示法rgba(r, g, b, a)a表示透明度，取值：0 - 1开发使用，实现透明色
十六进制表示法#RRGGBB#000000，#ffcc00，简写：#000，#fc0开发使用（从设计稿复制）

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1 {background-color: aqua;/* color: red; *//* color: rgb(0, 255, 0); *//* color: rgba(0,0,0,0.3); *//* color: #0000ff; */color: #00f;}</style>
</head>
<body><h1>h1 标签</h1>
</body>
</html>

原效果：

当前效果：

六、调试工具

作用：检查、调试代码；帮助程序员发现代码问题、解决问题

  1. 打开调试工具
    • 浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查
    • F12
  2. 使用调试工具

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {color: red;font-size: 39;}</style>
</head>
<body><div>测试文字</div>
</body>
</html>
/* 调试工具的细节1. 如果是错误的属性，有黄色感叹号2. CSS 属性的前面有多选框，如果勾选：这个属性生效；如果没有勾选：这个属性不生效
*/

调试结果：

!!! 未完待续😁!!!

本文发布于:2024-01-31 04:52:25，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170664794825655.html

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。

上一篇：GameFi有什么过人之处
下一篇：JavaScript特效！动画原理以及轮播图的实现
标签：第三周   kuiini
留言与评论（共有 0 条评论）
   
验证码：
推荐文章
排行榜
热门标签

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23