web前端基础知识学习笔记——CSS基础

jirange

已于 2022-09-04 15:10:50 修改

阅读量298

点赞数

分类专栏： web前端文章标签：前端 css 学习

于 2022-08-31 12:22:19 首次发布

本文链接：https://blog.csdn.net/m0_63507677/article/details/126621183

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

字体样式：font-style（是否倾斜）

基础认知

CSS的介绍
- CSS层叠样式表
- CSS作用：给页面中的HTML标签设置样式

CSS语法规则

CSS写在style标签中，style标签一般写在head标签里面，title标签下面

如：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wizard world</title>
    <style>
        /* CSS写在这里 */
        h1{
            color:darkgreen;
            font-size: 30px;
            background-color: bisque;
            width: 800px;
            height: 50px;
        }
    </style>
</head>

选择器{CSS属性}
选择器：查找标签
注意：注意结尾要有分号;

CSS引入方式

CSS常见的三种引入方式：内嵌式；外联式；行内式

引入方式	书写位置	作用范围	使用场景
内嵌式	CSS写在style标签中（style标签可以卸载页面任何位置，但通常约定写在head中）	当前页面	小案例
外联式	CSS写在一个单独的.css文件中，需要通过link标签在网页中引入	多个页面	项目中
行内式	CSS写在标签的style属性中	当前标签	配合js使用

<link rel="stylesheet" href="./03_CSS外联式.css">

    <div style="color:aqua; font-size: large;">我是div标签(行内式）</div>

基础选择器
- 标签选择器
  - 结构：标签名{css属性名：属性值；}
  - 作用：通过标签名，找到页面中所有这类标签，设置样式（所有的标签都生效）
  - 注意：
    - 标签选择器选择的是一类标签，而不是单独某一个
    - 标签选择器无论嵌套关系有多深，都能找到对应的标签
  - ```
   /* 标签选择器 */
  form{
      color: darkblue;
  }
```
- 类选择器
  - 结构：.类名{css属性名：属性值；}
  - 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
  - 注意：
    - 所有标签上都有class属性，class属性的属性值称为类名（类似于名字)
    - 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
    - 一个标签可以同时有多个类名，类名之间以空格隔开
    - 类名可以重复，一个类选择器可以同时选中多个标签
    - 须得有两步：定义+使用
  - ```
  <style>
          /* 类名选择器 */
          .brown{
              color: brown;
          }
   </style>
  
  <li class="brown">巴拉巴拉</li>
```
- id选择器
  - 结构:#id属性值{ css属性名:属性值;}
  - 作用:通过id属性值，找到页面中带有这个id属性值的标签，设置样式
  - 注意:
    - 所有标签上都有id属性
    - id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的!
    - 一个标签上只能有一个id属性值
    - 一个id选择器只能选中一个标签
    - （常用于配合js找标签）
  - ```
  <head>
      <style>
          /* id选择器 */
          #size_only{
              font-size: 70px;
          }
      </style>
  </head>
  <body>
          <h2 id="size_only">Harry Potter</h2>
  </body>
```
- 通配符选择器
  - 结构:*{ css属性名:属性值;}
  - 作用:找到页面中所有的标签，设置样式
  - 注意:
    - 开发中使用极少，只会在极特殊情况下才会用到
    - 在小页面中可能会用于去除标签默认的margin和padding(tbc)
  - ```
  <style>
          /* 通配符选择器 */
          *{
              color: darkgreen;
          }
          /* CSS写在这里 */
      </style>
```

字体和文本样式

字体样式
- 字体大小：font-size
  - 属性名：font-size
  - 取值：数字+px
  - 注意：
    - 谷歌浏览器默认文字大小是16px
    - 单位需要设置，否则无效
- 字体粗细：font-weight
  - 属性名: font-weight
  - 取值:
    - 关键字:
      正常 normal
      加粗 bold
    - 纯数字:100~900的整百数:
      正常 400
      加粗 700
  - 注意点:
    - 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
    - 实际开发中以:正常、加粗两种取值使用最多。
- 字体样式：font-style（是否倾斜）
  - 属性名: font-style
  - 取值:
    正常（默认值） normal
    倾斜 italic
- 字体系列：font-family
  - 属性名: font-family
  - 常见取值:具体字体1,具体字体2,具体字体3,具体字体4...字体系列
  - 具体字体: "Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等......
  - 字体系列: sans-serif、serif、monospace等.….
  - 渲染规则:
    - 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体系统
      默认字体
    - 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
      Windows 微软雅黑
      macos 苹方
  - 注意:
    - 如果字体名称中存在多个单词，推荐使用引号包裹
    - 最后一项字体系列不需要引号包裹
    - 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
  - 常见字体系列(了解)
    - 无衬线字体(sans-serif)
      - 特点:文字笔画粗细均匀，并且首尾无装饰
      - 场景:网页中大多采用无衬线字体
      - 常见该系列字体:黑体、Arial
    - 衬线字体(serif)
      - 特点:文字笔画粗细不均，并且首尾有笔锋装饰
      - 场景:报刊书籍中应用广泛
      - 常见该系列字体:宋体、Times New Roman
    - 等宽字体(monospace)
      - 特点:每个字母或文字的宽度相等
      - 场景:一般用于程序代码编写，有利于代码的阅读和编写
      - 常见该系列字体:Consolas、fira code
- 样式的层叠问题
  - 问题:
    - 给同一个标签设置了相同的样式，此时浏览器会如何渲染呢?
  - 结果:
    - 如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖)，写在最下面的会生效
  - TIPS:
    - css (Cascading style sheets)层叠样式表
    - 所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖
- 字体类型：font属性连写
  - 属性名: font(复合属性)
  - 取值:
    - font : style weight size family;
    - （复合属性：一个属性冒号后面书写多个值的写法）
  - 省略要求:
    - 只能省略前两个，如果省略了相当于设置了默认值
  - 注意:如果需要同时设置单独和连写形式:（不能写在上方）
    - 要么把单独的样式写在连写的下面
    - 要么把单独的样式写在连写的里面
文本样式
- 文本缩进：text-indent
  - 属性名：text-indent
  - 取值
    - 数字+px
    - 数字+em（推荐：1em=当前标签的font-size的大小）
- 文本对齐方式：text-align
  - 属性名：text-align
  - 取值
    属性值效果
    left 左对齐
    center 居中对齐
    right 右对齐
  - 注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
  - text-align : center 能让哪些元素水平居中?
    - 文本
    - span标签、a标签3. input标签、img标签注意点:
    - 如果需要让以上元素水平居中，text-align : center 需要给以上元素的父元素设置（如：欲让图片居中，需将其父标签如body设置成水平居中，而非设置img标签）
- 文本修饰：text-decoration
  - 属性名: text-decoration
  - 取值:
    
    属性值
    
    效果
    
    underline
    
    下划线〔常用)
    
    line-through
    
    删除线（不常用)
    
    overline
    
    上划线(几乎不用)
    
    none
    
    无装饰线（常用)
    
    注意点:
    - 开发中会使用text-decoration : none;清除a标签默认的下划线
line-height行高
- 行高
  - 作用:控制一行的上下行间距属性名: line-height
  - 取值:
    - 数字+px
    - 倍数（当前标签font-size的倍数)
  - 应用:
    - 让单行文本垂直居中可以设置line-height :文字父元素高度
    - 网页精准布局时，会设置line-height :1可以取消上下间距
  - 行高与font连写的注意点:
    - 如果同时设置了行高和font连写，注意覆盖问题
    - font : style weight size/line-height family ;

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

属性值	效果
underline	下划线〔常用)
line-through	删除线（不常用)
overline	上划线(几乎不用)
none	无装饰线（常用)

拓展颜色常见取值（了解)

属性名:
- 如:文字颜色: color
- 如:背景颜色: background-color
属性值:

颜色表示方式	表示含义	属性值
关键词	预定义的颜色名	red、green、blue、yellow......
rgb表示法	红绿蓝三原色。每项取值范围:0~255	rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,O)…..
rgba表示法	红绿蓝三原色+a表示透明度，取值范围是0~1	rgba(255,255,255,0.5)、rgba(255,0,0,0.3)...
十六进制表示法	#开头，将数字转换成十六进制表示	#000000、#ff0000、#e92322，简写:#000、#fO0