CSS基础

南方以南_

已于 2022-07-27 19:05:53 修改

阅读量155

点赞数

分类专栏：前端文章标签： css css3 前端

于 2022-07-27 16:53:11 首次发布

本文链接：https://blog.csdn.net/weixin_43366437/article/details/125986890

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

css基础认知

css(cascading style sheets)层叠样式表

<!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>
        /* css注释 */
        /* 选择器：查找标签 */
        p{
            color:red;
            /* 字体颜色 */
            font-size:30px;
            /* 字体大小 */
            background-color: green;
            /* 字体背景颜色 */
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <p>这是一个P标签</p>
</body>
</html>

css引入方式

内嵌式：style标签中
外联式：单独的css文件（开发项目用）
< link rel=“stylesheet” href=“./my.css”>引入文件
行内式：style属性中(很少用行内式）
< div style=“color:red;font-size:30px;”>这是div标签< /div>

基础选择器⭐⭐⭐

基础选择器：1标签选择器，2类选择器，3id选择器，4通配符选择器

1标签选择器（不方便单独设置,一次设置一种标签）
标签名{css属性名：属性值；}
p{color:red;}

2类选择器

<style>
        .red{
            color:red;
        }
        .size{
            font-size: 66px;
        }
    </style>
</head>
<body>
    <p>123</p>
    <div class="red size"  >类选择器</div>
    <div class="red">标签文字变红</div>
</body>

3id选择器
#id {css属性名：属性值；}

在这里插入图片描述

<style>
       #blue{
        color:skyblue;
       }
    </style>
</head>
<body>
    <div id="blue">这个div文字是蓝色的</div>
</body>

4通配符选择器
*{css属性名：属性值；}

<style>
       *{
        color:red;
       }
    </style>
</head>
<body>
    <div>div</div>
    <p>p</p>
    <h1>h1</h1>
    <span>span</span>
</body>

字体和文本样式

文字大小：font-size
数字+px
谷歌默认16px

文字粗细：font-weight

<style>
       div{
        font-weight: 700;
       }
       h1{
        font-weight: 400;
       }
    </style>
</head>
<body>
    <div>div</div>
    <h1>这是一级标题</h1>

字体样式：font-style

<style>
       div{
        font-weight: 700;
        font-style: italic;
       }
       h1{
        font-weight: 400;
        font-style: italic;
       }
    </style>
</head>
<body>
    <div>div</div>
    <h1>这是一级标题</h1>
</body>

字体类型：font-family
windows默认字体：微软雅黑
mac:苹方
常见字体
在这里插入图片描述

<style>
       div{
        font-weight: 700;
        font-style: italic;
        font-family:微软雅黑,sans-serif;
       }
       h1{
        font-weight: 400;
        font-style: italic;
        font-family: 微软雅黑, sans-serif;
       }
    </style>
</head>
<body>
    <div>div</div>
    <h1>这是一级标题</h1>
</body>

层叠性：后面的覆盖前面的；

字体类型：font属性连写
在这里插入图片描述

<style>
       div{
            text-indent: 2em;
            /* em表示一个字的大小 */
       }
    </style>
</head>
<body>
    <div>这是一级标题</div>
    <p>这是一级标题</p>
    <h1>这是一级标题</h1>
</body>

文本水平对齐方式：text-align
取值：left左对齐，center剧中对齐，right右对齐
文本修饰属性名：text-decoration
取值：underline下划线（常用）
line-through删除线
overline 上划线
none 无装饰线（常用）

<style>
       div{
        text-decoration: underline;
       }
       p{
        text-decoration: line-through;
       }
       h2{
        text-decoration: overline;
       }
       a{
        text-align: none;
       }
    </style>
</head>
<body>
    <div>div</div>
    <p>p</p>
    <h2>h2</h2>
    <a href="#">我是超链接，点啊</a>
</body>

行高：
line-height
取值：数字+px
在这里插入图片描述

# chrome调试工具 f12开启调试选中参数通过键盘方向键可以改变大小可以直接在代码中修改，确认效果后添加到代码中

颜色取值：
在这里插入图片描述

综合案例

<!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;
            /* background-color: pink; */
            margin: 0 auto;
        }
        h1{
            text-align: center;
        }
        .center{
            text-align: center;
        }
        .color1{
            color:#808080;
        }
        .color2{
            color:#87ceeb;
            font-weight: 700;
        }
        a{
            text-decoration: none;
        }
        .suojin{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div>
        <h1 class="center">《自然》评选改变科学的10个计算机代码项目</h1>
        
            <span class="color1">2077年01月28日14:58</span>
            <span class="color2">新浪科技</span> 
            <a href="#">收藏本文</a>   
            <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>