基础班前端学习之路-Day3 | 青训营

Simple_WH
93 阅读5分钟

三、CSS的引入与使用

3.1 CSS定义

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

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

 <title>CSS初体验</title>
 <style>
     /* 选择器（） */
     p
     {
      /* CSS属性 */   
         color:red;
         font-size:30px;
     }
 </style>
 <p>
     体验CSS
 </p>

选择器{属性名:属性值;}

属性名和属性值成对出现的形式叫做键值对

3.2 CSS引入方式

  • 内部样式表：学习使用

    • CSS代码写在style标签里面

  • 外部样式表：开发使用

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

    • 在HTML使用link标签引入

       <link rel="stylesheet" href="./my.css">

  • 行内样式：配合JavaScript使用

    • CSS写在标签的style属性值里

       <div style="color:red;font-size:30px;">
     这是div标签
 </div>

实际工作中一般使用外部样式表引入CSS

3.3 基础选择器

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

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

标签选择器

作用：使用标签名作为选择器即选中同名标签设置相同的样式，但是无法差异化同名标签的样式

例如：p，h1，div，a，img...

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

类选择器

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

步骤：

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

一个类选择器可以给多个标签使用，并且一个标签是不允许加多个class属性值，但是可以通过在一个""中写多个类名，不同的类名之间加上空格来达到使用多个类选择器的效果

（感觉有点像编程中的类或者结构体之类的）

类名要见名知意，多个单词之间用-连接

id选择器

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

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

步骤：

  1. 定义id选择器 → #id名

  2. 使用id选择器 → 标签添加id="id名"

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

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

通配符选择器

作用：查找页面所有标签，设置相同样式，开发初期时用于清除默认样式

*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

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

3.4 画盒子

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

3.5 字体修饰属性

字体大小

属性名：font-size

属性值：文字尺寸，PC端网页最常用的单位：px

 <style>
     p
     {
         font-size:30px;
     }
 </style>

谷歌浏览器中的文字的默认大小是16px

字体粗细

属性名：font-weight

属性值：

  • 数字（开发使用）

    正常400
    加粗700

  • 关键字

    正常normal
    加粗bold

字体倾斜

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

属性名：font-style

属性值：

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

行高

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

属性名：line-height

属性值：

  • 数字+px
  • 数字（当前标签font-size属性值的倍数）
 <style>
     p
     {
         line-height:30px;
         /* 
         font-size:20px;
         line-height:2; 
         */
     }
 </style>
 <!-- 行高默认是16px -->

行高由上间距、文本高度和下间距组成

垂直居中

行高属性值等于盒子高度属性值（只能适用于单行文字）（水平居中应该也差不多？）

文字族

属性名：font-family

属性值：字体名

 <style>
     div
     {
         font-family:楷体;
     }
 </style>

font-family属性值可以书写多个字体名，每个字体名之间用逗号隔开，执行顺序是从左向右依次查找，并且将最后一个字体名设置为一个字体族名，网页开发一般适用无衬线字体（有无衬线的区别就在于文字的起笔和落笔有无修饰）

字体复合属性

font复合属性

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

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

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

 <style>
     div
     {
         font-style:italic;
         font-weight:700;
         font-size:30px;
         line-height:2;
         font-family:楷体;
     }
 </style>

 <style>
     div
     {
         font:italic 700 30px/2 楷体;
     }
 </style>

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

文本修饰属性

文本缩进

属性名：text-index

属性值：

  • 数字+px
  • 数字+em（1em=当前标签的字号大小）
 <style>
     p
     {
         text-index:2em;
     }
 </style>

文本对齐方式

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

属性名：text-align

属性值：

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

居中的时候是将文字内容居中，而不是将标签居中

水平居中—图片

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

 <style>
     div
     {
         text-align:center;
     }
 </style>
 <div>
     <img src="./img.jpg" alt="图片">
 </div>

文本修饰线

属性名：text-decoration

属性值：

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

文字颜色

属性名：color

属性值

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

调试工具

浏览器

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

步骤：

  1. 打开调试工具

    • 浏览器窗口任意位置/选中标签 → 鼠标右键 → 检查
    • F12

  2. 使用调试工具

左边代码区域为html代码，右边代码区域为CSS代码

用箭头选中标签就会在左边中将对应的标签标记，同时右边也会把对应的CSS代码显示出来，错误的属性会被黄色感叹号标记，同时给出错误信息的位置

单击CSS代码旁边的复选框可以调试该属性是否生效

avatar
文章
阅读
粉丝