DocPortal
目录

选择器&字体&文本

项目地址: https://gitee.com/yuan625/self-note-projects/tree/master/CSS

标签选择器：p{}，div{}

类选择器(<a class="cls">): .cls{}

id选择器(<a id="idx">): #idx{}

通配符选择器： *{}

# 字体&文本

# 字体

字体大小：font-size: 数字+px,谷歌浏览器字体默认大小16px

字体粗细：font-weight: normal正常/bold加粗,400~700

字体样式：font-style: normal正常，italic倾斜

字体系列：font-family: 微软雅黑，黑体，宋体，楷体，sana-serif（无衬字体），serif（衬线字体），monospace（等宽字体）等，可以多个以逗号隔开，当第一个字体没有就使用第二个，以此如此。

样式重叠：最后一个样式生效

字体复合写法：font: style weight size family,省略写法：只能省略前两个(默认值)：font: size family

# 文本

文本缩进：text-indent: 数字+px/ 数字+em（推荐: 1em=当前标签的font-size大小,不管字体大小多少）

/*首字母缩进2个字的大小，默认字号16px;32*/
p {
  text-indent:32px/2em
}
1
2
3
4

文本水平对齐方式： text-align: left左对齐，center居中对齐，right右对齐

如果需要让文本水平居中， text-align属性给文本所在标签(文本的父元素)设置

文本修饰：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;

/* 66px 宋体 倾斜 加租 行高是2倍*/
font:italic 700 66px/2 宋体;
1
2

# 颜色取值

属性名：

  • 如：文字颜色：color
  • 如：背景颜色：background-color

属性值：

关键词 ：预定义的颜色名：red、green、blue、yellow.....

rgb表示法: 红绿蓝三原色。每项取值范围：0~255: rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)...

rgba表示法: 红绿蓝三原色+a表示透明度，取值范围是0~1: rgba(255,255,255,0.5)、rgba(255,0,0,0.3)...

十六进制表示法: #开头，将数字转换成十六进制表示: #000000、#ff0000、#e92322，简写：#000、#f00

标签水平居中方法总结margin：0 auto

如果需要让div、p、h（大盒子）水平居中? 可以通过margin：0auto；实现

注意点：

  • 如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可
  • margin：0 auto一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

# 综合案例

# 新闻网页案例

实现

<!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>
<style>
    div {
        width: 800px;
        height: 600px;
        /*  background-color: pink;*/
        margin: 0 auto;
    }
    /*  h1 {
        text-align: center;
    }*/
    
    .center {
        text-align: center;
    }  
    .co1 {
        color: #808080;
    }
    .co2 {
        color: #87ceeb;
        font-weight: 700;
    }  
    a {
        text-decoration: none;
    }
    .sj {
        text-indent: 2em
    }
</style>
<body>
    <div>
        <h1 class="center">《自然》评选改变科学的10个计算机代码项目</h1>
        <p class="center">
            <span class="co1">2024年01月28日14:58</span>
            <span class="co2">新浪科技</span>
            <a href="#">收藏本文</a>
        </p>
        <hr>
        <p class="sj">2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。 利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还 发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。
        </p>
        <p class="sj">这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为 复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室 制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，"他说，“问题在于，我们仍然需要思考。“
        </p>
        <p class="sj">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机 软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机 代码，并列出了其中1e个关键的计算机项目。
        </p>
        <p class="sj">最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用 代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。2o世纪5o年代，随着符号语言的发展，特别是由 约翰·巴克斯及其团队在加州圣何塞的IBM开发的"公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程， 例如x=3+5。然后由编译器将这些指令转换成快速、高效的机器代码。
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

# 小米官网卡片

样式：

<!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>
<style>
    body {
        background-color: #f5f5f5;
    }
    
    .goods {
        width: 234px;
        height: 300px;
        background-color: #fff;
        /*标签div居中*/
        margin: 0 auto;
        /*内容居中*/
        text-align: center;
    }
    
    img {
        width: 160px;
    }
    
    .title {
        font-size: 14px;
        line-height: 25px;
    }
    
    .info {
        color: #ccc;
        font-size: 12px;
        line-height: 30px;
    }
    
    .price {
        color: #ffa500;
        font-size: 14px;
    }
</style>

<body>
    <div class="goods">
        <img src="./images/car.jpg" alt="">
        <div class="title">九号平衡车</div>
        <div class="info">成年人的玩具</div>
        <div class="price">1999元</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

# 选择器的进阶

# 选择器

复合选择器：

  • 后代选择器(儿子、孙子，重孙子....): 空格 => 语法： 选择器1 选择器2 {} => .header h1 {}
  • 子代选择器（儿子）：> => 语法：选择器1>选择器2 {} => div>a{}

并集选择器: 同时选择多组标签设置一样的样式：语法：选择器1,选择器2 {} => div,a{}

交集选择器: 同时存在才设置，要连着写，不要有空格，语法：选择器1选择器2 {} => .headerh1{}

hover伪类选择器:鼠标悬停才显示：语法：选择器:hover{} => div:hover{}

Emmer语法：vscode快速写代码：

记忆 示例 效果
标签名 div <div></div>
类选择器 .red <div class="red"></div>
id选择器 #one <div id="one"></div>
交集选择器 p.red#one <p class="red" id="one"></p>
子代选择器 ul>li <u1><1i></1i></ul>
内部文本 ul>li（我是li的内容} <u1><1i>我是1i的内容</1i></ul>
创建多个 ul>li*3 <ul><1i></1i><1i></1i><1i></1i></ul>

# 背景

背景颜色：background-color: 关键字、rgb、rgba、十六进制

背景图片：background-image: url(图片位置)

背景平铺：如果图片太小，要添加背景的图片区域较大，此时图片会生成很多平铺来补充完区域。平铺设置改属性：background-repeat(bgr):

  • repeat默认值-水平和垂直方向都平铺
  • no-repeat不平铺,图片只显示一个，图片铺不上的区域已默认的背景色显示。
  • repeat-x 沿着水平方(x轴)向平铺，
  • repeat-y 沿着水平方(y轴)向平铺

背景位置: background-position: 水平方向位置 垂直方向位置：

  • 方向名称（9个位置）：水平方向： left/center/right/top，垂直方向： center/bottom
  • 数字+px(坐标): 坐标系：原点(0,0) , x轴：水平向右，y轴：垂直向下
background-color: pink;
background-image: url(./images/1.jpg);
background-repeat:no-repeat;
background-position: right 0;
background-position: center center;
background-position: 50px 50px; // 如果是负数，只显示正数的部分
1
2
3
4
5
6

背景相关属性连写：background: color image repeat position ,属性可以不分顺序写

需求：需要在网页中展示一张图片的效果？

  • 方法一：直接接写上img标签即可： img标签是一个标签，不设置宽高默认会以原尺寸显示
  • 方法二：div标签+背景图片：需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

# 元素显示

目标：能够认识三种常见的元素显示模式，并通过代码实现不同元素显示模式的转换

学习路径：

  • 块级元素

    • 独占一行（一行只能显示一个）
    • 宽度默认是父元素的宽度，高度默认由内容撑开
    • 可以设置宽高
    • 代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer..

  • 行内元素

    • 一行可以显示多个
    • 宽度和高度默认由内容撑开
    • 不可以没置宽高
    • 代表标签：a、span、b、u、i、s、strong、ins、em、del.

  • 行内块元素

    • 一行可以显示多个
    • 可以设置宽高
    • 代表标签：input、textarea、button、select...
    • 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

  • 元素显示模式转换

    • 目的：改变元素默认的显示特点，让元素符合布局要求
    • 语法：
    • 转换成块级元素(较多)：disp1ay:block
    • 转换成行内块元素(较多): display:inline-block
    • 转换成行内元素(极少): display:inline

嵌套规范：

  • 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等

    • 但是：p标签中不要嵌套div、p、h等块级元素

  • a标签内部可以嵌套任意元素

    • 但是：a标签不能嵌套a标签

# 特性

  • 继承：

    • 特性：子元素有默认继承父元素样式的特点(子承父业）
    • 可以继承的常见属性（文字控制属性都可以继承）
      • color
      • font-style、font-weight、font-size、font-family
      • text-indent、text-align
      • line-height
    • 注意点：可以通过调试工具判断样式是否可以继承

  • 层叠

上次更新: 2024/07/16, 14:59:07
盒子模型

盒子模型→

Theme by Vdoing | Copyright © 2024-2024 VirtualAgent | Apache 2.0 License