2022黑马程序员-前端学习第一阶段(Day03-CSS基础)

CSS基础-Day03 学习笔记打卡

  • CSS基础
    • 基础认知
      • CSS知识
      • CSS引入方式(三种)
    • 基础选择器
      • 标签选择器
      • 类选择器
      • id选择器
      • 类与id选择器的区别
      • 通配符选择器
    • 字体和文本样式
      • 字体样式
      • 文本样式
      • line-height行高
    • Chrome调试工具
      • 颜色取值(扩展)
  • 综合案例代码示例

学习视频B站:黑马程序员-前端学习(第一阶段)

CSS基础

基础认知

CSS知识

2022黑马程序员-前端学习第一阶段(Day03-CSS基础)_第1张图片

CSS: 层叠样式表(Cascading style sheets)
CSS作用是什么??
给页面中的HTML标签设置样式
写在哪里?
css写在style标签中,style标签一般写在head标签里面title标签下面
代码示例:

DOCTYPE html>
<html lang="en">
<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>Documenttitle>
    <style>
        /* CSS注释 */
        /* 这里写的都是CSS */
        /* 选择器{CSS属性} */
        /* 选择器:查找标签 */
        p{
            color: red;
            font-size: 60px;
            background-color: salmon;
        }
    style>
head>
<body>
    <p>hello world 你好世界p>
body>
html>

CSS常见属性

CSS常见属性 作用
color 文字颜色
font-size 字体大小
background-color 背景颜色
width 宽度
height 高度

注意点:

  1. CSS 标点符号都是英文状态下的
  2. 每一个样式键值对写完之后,最后需要写分号

CSS引入方式(三种)

内嵌式: CSS 写在style标签中
提示:style标签虽然可以写在页面任意位置,但是通常约定写在 head 标签中
外联式: CSS 写在一个单独的.css文件中
提示:需要通过link标签在网页中引入
行内式: CSS 写在标签的style属性中
提示:基础班不推荐使用,之后会配合js使用

引入方式 书写位置 作用范围 使用场景
内嵌式 CSS 写在style标签中 当前页面 小案例
外联式 CSS 写在一个单独的.css文件中,通过link标签引入 多个页面 项目中
行内式 CSS 卸载标签的style属性中 当前标签 配合js使用

基础选择器

标签选择器

结构: 标签名 { css属性名:属性值; }
作用: 通过标签名,找到页面中所有这类标签,设置样式
注意点:
1. 标签选择器选择的是一类标签,而不是单独某一个
2. 标签选择器无论嵌套关系有多深,都能找到对应的标签
2022黑马程序员-前端学习第一阶段(Day03-CSS基础)_第2张图片

类选择器

结构: .类名 { css属性名:属性值; }
作用: 通过类名,找到页面中所有带有这个类名的标签,设置样式
注意点:
1. 所有标签上都有class属性,class属性的属性值称为类名(类似于名字)
2. 类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头
3. 一个标签可以同时有多个类名,类名之间以空格隔开
4. 类名可以重复,一个类选择器可以同时选中多个标签
2022黑马程序员-前端学习第一阶段(Day03-CSS基础)_第3张图片

id选择器

结构: #id属性值 { css属性名:属性值; }
作用: 通过id属性值,找到页面中带有这个id属性值的标签,设置样式
注意点:
1. 所有标签上都有id属性
2. id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的!
3. 一个标签上只能有一个id属性值
4. 一个id选择器只能选中一个标签
2022黑马程序员-前端学习第一阶段(Day03-CSS基础)_第4张图片

类与id选择器的区别

class类名与id属性值的区别
• class类名相当于姓名,可以重复,一个标签可以同时有多个class类名
• id属性值相当于身份证号码,不可重复,一个标签只能有一个id属性值
类选择器与id选择器的区别
• 类选择器以 . 开头
• id选择器以 # 开头
实际开发的情况
• 类选择器用的最多
• id一般配合js使用,除非特殊情况,否则不要使用id设置样式
• 实际开发中会遇到冗余代码的抽取 (可以将一些公共的代码抽取到一个公共的类中去)

通配符选择器

结构: * { css属性名:属性值; }
作用: 找到页面中所有的标签,设置样式
注意点:

  1. 开发中使用极少,只会在极特殊情况下才会用到
  2. 在基础班小页面中可能会用于去除标签默认的margin和padding(后续讲解) *{ margin: 0; padding: 0; }
    2022黑马程序员-前端学习第一阶段(Day03-CSS基础)_第5张图片

字体和文本样式

字体样式

字体大小: font-size
• 数字+px
字体粗细: font-weight
• 正常:normal 或 400
• 加粗:bold 或 700
字体样式: font-style
• 正常:normal
• 倾斜:italic
字体系列: font-family
• 具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列
字体连写: font
• font : style weight size family;

文本样式

样式 属性名 常见属性值
文本缩进 text-indent 数字+px/数字+em
文本水平对齐方式 text-align left/center/right
文本修饰 text-decoration underline/none

line-height行高

作用: 控制一行的上下行间距
属性名: line-height
取值:
• 数字+px
• 倍数(当前标签font-size的倍数)
应用:
1. 让单行文本垂直居中可以设置 line-height : 文字父元素高度
2. 网页精准布局时,会设置 line-height : 1 可以取消上下间距
行高与font连写的注意点:
• 如果同时设置了行高和font连写,注意覆盖问题
• font : style weight size/line-height family ;
2022黑马程序员-前端学习第一阶段(Day03-CSS基础)_第6张图片

Chrome调试工具

2022黑马程序员-前端学习第一阶段(Day03-CSS基础)_第7张图片

颜色取值(扩展)

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

综合案例代码示例

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <style>
    .box {
      width: 800px;
      /* background-color: orange; */
      /* 让当前新闻整体div大盒子水平居中 */
      margin: 0 auto;
    }

    .time {
      color: grey;
    }

    .sina {
      color: skyblue;
      font-weight: 700;
    }

    a {
      /* 去除a标签的下划线 */
      text-decoration: none;
    }

    h1 {
      /* background-color: pink; */
      /* 要让文本在h1标签中水平居中!!! */
      text-align: center;
    }

    .info {
      /* 让span、a标签在p标签中水平居中 */
      text-align: center;
    }

    .content {
      /* 首行缩进两个字 */
      text-indent: 2em;
    }

  style>
head>
<body>
  <div class="box">
    <h1>《自然》评选改变科学的10个计算机代码项目h1>
    <p class="info">
      <span class="time">2077年01月28日14:58 span>
      <span class="sina">新浪科技span> 
      <a href="#">收藏本文a>
    p>

    <hr>
    
    <p class="content">2019年,事件视界望远镜团队让世界首次看到了黑洞的样子。不过,研究人员公布的这张发光环形物体的图像并不是传统的图片,而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据,研究人员进行了数学转换,最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码,并撰文记录这一发现,其他研究者也可以在此基础上进一步加以分析。p>

    <p class="content">这种模式正变得越来越普遍。从天文学到动物学,在现代每一项重大科学发现的背后,都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖,他指出,今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力,”他说,“问题在于,我们仍然需要思考。”p>

    <p class="content">如果没有能够解决研究问题的软件,以及知道如何编写并使用软件的研究人员,一台计算机无论再强大,也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起,后者已经渗透到研究工作的各个方面。近日,《自然》(Nature)杂志将目光投向了幕后,着眼于过去几十年来改变科学研究的关键计算机代码,并列出了其中10个关键的计算机项目。p>

    <p class="content">最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言,允许用户用代码为计算机编程,但这两种语言都需要对计算机的架构有深入的了解,使得许多科学家难以掌握。20世纪50年代,随着符号语言的发展,特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran,这种情况发生了变化。利用Fortran,用户可以用人类可读的指令来编程,例如x = 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。p>
  div>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    /* 可以通过给body标签设置背景颜色完成设置浏览器的背景颜色 */
    body {
      background-color: #f5f5f5;
    }

    .box {
      width: 234px;
      height: 300px;
      background-color: #fff;
      margin: 0 auto;
      /* 让内部的img和文本类型的元素水平居中 */
      text-align: center;
    }

    .pic {
      width: 160px;
    }

    .product {
      height: 25px;
      font-size: 14px;
    }

    .info {
      height: 30px;
      font-size: 12px;
      color: #cccccc;
    }

    .price {
      font-size: 14px;
      color: #ffa500;
    }
  style>
head>
<body>
  <div class="box">
    <img src="./images/car.jpg" alt="" class="pic">
    <div class="product">九号平衡车div>
    <div class="info">成年人的玩具div>
    <div class="price">1999元div>
  div>
body>
html>

2022黑马程序员-前端学习第一阶段(Day03-CSS基础)_第8张图片

你可能感兴趣的:(黑马程序员,前端学习,css,前端,css3)