【前端三件套——CSS基础】网页开发必备知识

🍓前言

上文笔者对HTML做了较为全面的总结,前端三件套三下五除二,我们就干掉三分之一了(狗头)
那么接下来就是我们的层叠样式表——CSS,它的作用就是给页面中的HTML标签设置样式的,那些下面就开启我们今天的旅程吧

导读

CSS语法:
选择器{ 属性名:属性值;}
选择器简单理解就是选择的标签名,如p,大括号里面的就是CSS的属性了,也就是将选择的标签设置某个样式
如:

p{
    color:red;/* 给p段落的字体叠加红色*/
}

PS:/* … */ 就是CSS的注释格式,也可以直接ctrl+/
编辑器会自己判断该用哪种格式注释

常见属性:
在这里插入图片描述

1. CSS引入方式

1.1内嵌式

首先我们得说一下style标签,一般它都是写在<head>标签里,<title>标签之下的
内嵌式就是将CSS写在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>
</body>
</html>

1.2 外联式

是之前提到的CSS写在一个单独的.css文件里面,这也是开发项目中最常见的

引入方式: 需要通过link标签在网页中引入
<link>标签也写在title标签下
语法:

<link rel="stylesheet" href="">

rel的值告诉编译器这是这个链接是样式表
href里面就填CSS文件的相对路径(简单一点),和HTML里的超链接<a>标签是一样的

1.3 行内式

将CSS写在标签的style属性中
开发中基本是与JS配合使用的

语法:

<p color:red; font-size:5px;>5号红色</p>

注意
日常小案例可以用内嵌式,比较方便
项目开发外联式为主
行内式和js 配合使用

2. 基础选择器

在HTML中选择元素

2.1 标签选择器

结构: 标签名{ css属性名:属性值;}

作用: 通过标签名,找到页面中所有这类标签,设置样式

注意点:

  1. 标签选择器选择的是一类标签,而不是一个
  2. 标签选择器无论嵌套关系多深,都能找到对应的标签

2.2 类选择器

结构: .类名{ css属性名:属性值;}

 .one{
    color:red;
}

作用: 通过类名找到页面中所有带有这个类名的标签,设置样式

注意点:

  1. 所有的标签都有class属性,class属性的属性值称为类名(类似于名字)
  2. 类名可由数字、字母、下划线、中划线等组成,但需注意不能由数字或中划线开头
  3. 一个标签可同时有多个类名,类名之间以空格隔开
<h1 class="one" "red" "30px">大标题 </h1>
  1. 一个类选择器可以同时选中所有同类名的标签

    实际开发中,类选择器用得最多

2.3 id选择器

结构: #id属性值{css属性名:属性值}

#blue{
     color:blue;
}
<div id="blue" >id选择器</div>

作用: 通过id属性值,找到页面中带有这个id属性值的标签,设置样式

注意点:

  1. 所有标签上都有id属性

  2. id属性值是唯一的,即两个标签不能共用一个id,一个标签不能有两个id
    id选择器只能选中一个标签

    id一般配合js使用,除非特殊情况,否则不要使用id设置样式

2.4 通配符选择器

结构: *{css属性名:属性值;}

*{
     margin:0;
     padding:0;
}

作用: 找到页面所有的标签,设置样式

注意点:

开发中使用极少,只会在特殊情况使用,用处在CSS进阶再进行讲解

3.字体与文本样式

3.1 font字体样式

  • 字号:
    属性名:font-size
    取值格式:数字 + px
font-size : 32px;

注意点:

  1. 谷歌浏览器的默认字号为16
  2. px必须加
  • 字体粗细
    属性名:font-weight
    取值格式:
    分俩种——
    一种为关键字,normal表示正常粗细,bold表示粗体
    另一种是纯数字,100~900取整百数,其中normal 对应400,bold对应700
font-weight : bold;

注意点:
不是所有的字体都提供了九种粗细

  • 字体样式
    属性名:font-style
    取值格式:
    正常—— normal
    倾斜—— italic
font-style : italic;
  • 字体
    属性名:font-family
    取值格式:
    字体分为三大类:
    无衬线字体(sans-serif)——笔画粗细均匀,常见字体有黑体、Arial、微软雅黑
    sans-serif也是网页中最常用的字体类型
    衬线字体(serif)——笔画粗细不均,有笔锋修饰,常见字体有宋体、Times New Roman
    serif主要应用在报刊
    等宽字体(monospace)——字符间隔宽度相等,常见该字体Consolas
    monospace一般见于代码编写
font-family : 微软雅黑;

渲染规则

  1. 从左到右按顺序查找,若电脑中未安装该字体,则显示下一字体
  2. 直到都不支持则根据操作系统,显示最后字体系列的默认字体
font-family : 微软雅黑,黑体,sans-serif;

最后一个是字体系列“统称”
注意点:

  1. 若某个字体名称中存在多个单词,建议用引号包裹,如:“Microsoft YaHei”
  2. 最后一项字体系列是不需要引号的
  3. 网页开发中,尽量使用系统自带字体,保证不同用户浏览时均可正常显示

格外增加:CSS是层叠样式表,而层叠就是叠加的意思,样式可以一层一层的层叠覆盖。就像你个<p>标签的字体用CSS设置了红色样式,后面在这同个标签又设置了蓝色是,此时网页显示的就是蓝色。(写在最下面的会生效!!!)

  • 字体font相关属性的连写
    格式如下:
    font : style weight size family;’
    例子:
font : italic 700 16px 宋体;

前面两个可以省略,省略则代表设置为默认值,但后面两个是不可以省略的

3.2 text字体样式

  • 文本缩进:
    属性名:text-indent
    取值:
    1. 数字+px
    2. 数字+em(推荐,1em = 当前标签的font-size的大小
text-indent : 2em;
  • 文本水平对齐方式
    属性名:text-align
    取值:
属性值 效果
left 左对齐
center 居中对齐
right 右对齐

注意点:
text-align属性在文本所在标签(文本的父元素)设置

3.3 文本修饰

属性名:text-decoration
取值:

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

注意点:
开发中,会使用text-decoration : none;清楚<a>标签默认的下划线

3.3 line-height行高

控制一行的上下行间距
属性名:line-height
取值:

  1. 数字+px(上间距到下间距的距离)
  2. 倍数(当前标签font-size的倍数)
    注意点:
    设置line-height : 1 ;可以取消上下间距
    与font连用:
    font : style weight size/line-herght family ;
    使用如下:
font : italic 700 16px/1.5 微软雅黑 ;

下节预告,【前端三件套——CSS进阶】

各位看官觉得还不错可以点赞关注一下吗,我是前端小刘不怕牛牛,期待与您共同进步🤗🤗🤗

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>