04-CSS基础

biank trrrry

已于 2022-07-16 21:07:19 修改

阅读量398

点赞数 2

分类专栏： HTML+CSS学习笔记文章标签： css3

于 2022-06-26 17:05:45 首次发布

本文链接：https://blog.csdn.net/weixin_69705761/article/details/125443533

版权

HTML+CSS学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、基础认知

1）CSS介绍

CSS：层叠样式表（Cascading style sheets）

CSS作用：在HTML骨架的基础上，让网页更漂亮。

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>Document</title>
    <style>
        /* CSS注释 */
        /* 选择器{css属性} */
        /* 选择器作用：查找标签 */
        p{
            color: chartreuse;
        }

    </style>
</head>
<body>
    <p>Hello world 你好世界</p>
</body>

2）CSS引入方式

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

二、基础选择器

1）标签选择器

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

(以标签名命名的选择器选中后所有的这个标签都生效css)

2）类选择器

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

(定义+使用才生效)

注意：

1. 所有标签上都有class属性，class属性的属性值为类名

2. 类名由数字、字母、下划线、中划线组成，不能以数字/中划线开头

3. 一个标签可以有多个类名类名直接用空格隔开

4. 类名可以重复，一个类选择器可以同时选中多个标签

3）id选择器

#id属性值{ css属性名:属性值; }

（通过id属性值找到页面中带有这个id属性值的标签设置样式）

（未来配合js找标签）

注意：

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

2. id属性值类似于身份证号码在一个页面中是唯一不可重复的

3. 一个标签上只能有一个id属性值

4. 一个id选择器只能选中一个标签

4）通配符选择器

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

（找到页面中所有的标签设置样式）

（使用极少可能会用于去除标签默认的margin和padding）

三、文字和文本样式

1）字体样式

字体大小	font-size	数字+px
字体粗细	font-weight	关键字（正常 normal 加粗 bold）纯数字（正常 400 加粗 700）
字体样式	font-style	正常 normal（默认）倾斜 italic
字体系列	font-family	默认字体：win 微软雅黑 mac 苹方

字体大小注意：

谷歌浏览器默认文字大小为16px 单位需要设置否则无效

字体粗细注意：

不是所有字体都提供九种粗细因此部分取值页面中无变化

字体系列注意：

sans-serif无衬线字体

注：font属性可以连写（复合属性）

font:style weight size family;（顺序固定）

若省略只能省略前两个相当于设置了默认值

    <style>
        p{
            /* font-size: 50px;
            font-style: italic;
            font-weight: 700;
            font-family: 宋体; */

            font: 700 italic 50px 宋体;
        }
    </style>

2）文本样式

文本缩进

text-indent

数字+px（不推荐太麻烦）

数字+em（推荐 1em=当前标签的font-size的大小）

文本水平

对齐方式

text-align

left / right 左/右对齐

center 居中对齐

文本缩进

text-decoration

下划线 underline 删除线 line-through

上划线 overline 无装饰线 none

文本水平对齐方式注意：

1. 如果要让文本水平居中 text-align属性给文本所在标签（文本的父元素）设置

（如img标签给body标签加居中）

<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>Document</title>
    <style>
        body{
            text-align: center;
        }
    </style>
</head>
<body>
    <img src="../dog.gif" alt="修勾">
</body>

body中若其他图片/视频不想居中可以将其他图片/视频包含在其他标签（如 div）里，

用class调用分开

<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>Document</title>
    <style>      
      .col{
            text-align: center;
        }
    </style>
</head>
<body>
    
    <div class="col"><img src="../dog.gif" alt="修勾"></div>

</body>

2.center可以水平居中的元素

· 文本

· span标签、a标签

· input标签、img标签

文本缩进注意：

开发中会使用text-decoration:none;清楚a标签默认的下划线

3）line-height行高

行高

line-height

数字+px

倍数（当前标签font-size的倍数）

注意：

若同时使用行高和font连写注意覆盖问题

font: style weight size/line-height family;

4）拓展

常见颜色取值（了解）

颜色表示方式	表示含义	属性值
关键词	预定义的颜色名	red、green、blue……
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（大盒子）水平居中)

    <style>
        div{
            width:300px;
            height: 300px;
            background-color: darkmagenta;
            margin: 0 auto;
        }
    </style>

四、综合案例

1）新闻网页案例

<!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>Document</title>
    <style>
        div{
            width: 800px;
            height: 600px;
            margin: 0 auto;
        }

        .center{
            text-align: center;
        }
        .one{
            color:#808080;
        }
        .two{
            color:#87ceeb;
            font-weight: 700;
        }
        a{
            text-decoration: none;
        }
        .suojin{
            text-indent: 2em;
        }

    </style>
</head>
<body>
    <div>
    <h1 class="center">
        《自然》评选改变科学的10个计算机代码项目
    </h1>

    <p class="center">
        <span class="one">2077年01月28日14:58</span>
        <span class="two">新浪科技</span>
        <a href="#">收藏本文</a>
    </p>
    <hr>

    <p class="suojin">2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。
    </p>
    <p class="suojin">这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·菜维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”
    </p>
    <p class="suojin">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》(Nature)杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。
    </p>
    <p class="suojin">最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程x=3+5。然后由编译器将这些指令转换成快速、高效的机器代码。
    </p>

    </div>
</body>
</html>

2)卡片居中

<!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>Document</title>
    <style>
        
        body{
            background-color: #f5f5f5;
        }
        .goods{
            background-color: #ffffff;
            width: 234px;
            height: 300px;
            margin: 0 auto;
            text-align: center;
        }
        img{
            width: 160px;
        }
        .name{
            font-size: 14px;
            line-height: 25px;
        }
        .introduce{
            font-size: 12px;
            line-height: 30px;
            color: #cccccc;
        }
        .price{
            font-size: 14px;
            color: #ffa500;
        }

    </style>
</head>
<body>
    <div class="goods">
        <img src="../9号平衡车.png" alt="9号平衡车">
        <div class="name">九号平衡车</div>
        <div class="introduce">成年人的玩具</div>
        <div class="price">1999元</div>
    </div>
</body>
</html>