css01

最新推荐文章于 2024-03-20 14:14:24 发布

你眼里有一条星河照耀着我

最新推荐文章于 2024-03-20 14:14:24 发布

阅读量45

点赞数

分类专栏：笔记文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_51986661/article/details/126333665

版权

笔记专栏收录该内容

26 篇文章 8 订阅

订阅专栏

1、css基础认知

CSS 叫层叠样式表，用来给html页面修改样式。可以让页面更美观

css的书写位置

内嵌式

<!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 {
            color: pink;
        }
    </style>
</head>

<body>
    <div>我是一个盒子</div>
    <div>我是一个盒子</div>
    <div>我是一个盒子</div>
</body>

</html>

外部样式表

<!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>
    <!-- 外部样式表  外联式 -->
    <link rel="stylesheet" href="./my.css">
</head>

<body>
    <div>我是div</div>
    <div>我是div</div>
    <div>我是div</div>
</body>

</html>

行内式

<p style="color: green">我是个屁</p>

3.三种样式表对比

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

2、css基本选择器

基本选择器包括：表签选择器、类选择器、id选择器、通配符选择器

2.1标签选择器

语法是：标签名{样式属性；}

结构是：

    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>

样式的写法：

      p {
        color: red;
        font-style: 20px;
      }

注意：标签选择器是选择当前页面里面所有的一类标签，比如选择页面所有的页面标签。

2.2类选择器

样式点定义，结构(class)调用

css样式

      .red {
        color: red;
      }

html结构

    <span>大牌5折购</span>
    <span class="red">开学季</span>
    <span>放学季</span>
    <span>休学季</span>

2.3id选择器

使用方法跟类非常的相似。样式 #定义，结构id调用

css

        #last{
          color: blue;  
        }

html

    <div>我是div</div>
    <div>我是div</div>
    <div id="last">我是div</div>

和类选择器的区别（使用次数上）

1.类选择器相当于人的名字，可以重复，可以多次使用。

2.ID选择器相当于人的身份证，只能使用一次，唯一的。

2.4通配符选择器

选中所有的标签 *

css：

        *{
            color: red;
        }

html：

    <div>我是div</div>
    <p>我是段落</p>
    <h2>标题</h2>

注意：特殊情况使用

3.字体和文本样式

3.1文字大小

一般使用font-size

size是大小的意思(比如：鞋号)

font：指的是文字

css:

        span{
            font-weight: 700;
        }

html:

    <span>优惠</span>

3.2文字加粗

有两组设置

字体不加粗

font-weight: 400;
font-weight: normal;

字体加粗

font-weight: 700;
font-weight: blod;

注意我们更提倡使用数字表示，注意数字不要跟单位

让span加粗的写法：

span{
font-weight: 700;
}

让标题不加粗

h2{
font-weight: 400;
}

3.3文字不倾斜

em {
   font-style: normal; 
}

3.4字体连写

1.语法规范，必须按照swsf(稍微舒服)的顺序写，不能改变顺序。

font: 字体样式 字体加粗 字体大小 字体

2.字体是大小和字体的种类不能省略，font-family和font-size不能省略的，否则连写失效。

3.5文本缩进

可以实现文本的首行缩进效果

p {
   text-indent: 2em;
}

em:当前文字大小的单位，1em相当于当前一个文字的大小

3.6文字水平垂直居中

h2 {
    text-align: center;
}

3.7文本修饰

div {
            /* 下划线 */
            /* text-decoration: underline; */
            /* 上划线 */
            /* text-decoration: overline; */
            /* 删除线 （贯穿线） */
            /* text-decoration: line-through; */
        }

        a {
            color: #333;
            /* 取消下划线 */
            text-decoration: none;
        }

        /* 鼠标经过a的时候 */
        a:hover {
            color: orange;
            /* 显示下划线 */
            text-decoration: underline;
        }

<div> 折扣 </div>

<a herf="#"> 小米 </a>

3.8水平对齐

.box {
        width: 400px;
        height: 400px;
        background-color: pink;
        line-height: 400px;
        /* text-align: center; */
        margin: 0 auto;
      }

注意：

/*可以让div盒子的内容水平居中/

text-align: center;

/让div盒子在浏览器水平居中*/

margin: 0 auro;

3.9行高

1.如果行高等于盒子的高度，则里面的单行文字会垂直居中

2.如果行高大于盒子的高度，则里面的单行文字会垂直偏下

3.如果行高小于盒子的高度，则里面的单行文字会垂直偏上

4.综合案例

4.1综合案例1

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

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

      .box {
        width: 900px;
        margin: 0 auto;
      }
      .one {
        text-align: center;
      }
      p {
        text-indent: 2em;
      }
      i {
        font-style: normal;
        color: skyblue;
        font-weight: 700;
      }
      a {
        text-decoration: none;
      }

在这里插入图片描述

4.2综合案例2

    <div class="box">
      <img src="./images/car.jpg" alt="" class="pic" />
      <h4>九号平衡车</h4>
      <p>成年人的玩具</p>
      <span>1999元</span>
    </div>

      * {
        margin: 0;
      }
      body {
        background-color: #f5f5f5;
      }
      .box {
        margin: 0 auto;
        width: 234px;
        height: 300px;
        text-align: center;
        background-color: #fff;
      }
      .pic {
        width: 160px;
      }
      img {
        width: 160px;
      }
      h4 {
        height: 25px;
        font-weight: 400;
      }
      p {
        font-size: 12px;
        color: #ccc;
        height: 30px;
      }
      span {
        color: #ffa500;
        font-style: 14px;
      }

;
height: 300px;
text-align: center;
background-color: #fff;
}
.pic {
width: 160px;
}
img {
width: 160px;
}
h4 {
height: 25px;
font-weight: 400;
}
p {
font-size: 12px;
color: #ccc;
height: 30px;
}
span {
color: #ffa500;
font-style: 14px;
}
在这里插入图片描述

你眼里有一条星河照耀着我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css01

2.字体是大小和字体的种类不能省略，font-family和font-size不能省略的，否则连写失效。注意：标签选择器是选择当前页面里面所有的一类标签，比如选择页面所有的页面标签。em:当前文字大小的单位，1em相当于当前一个文字的大小。2.ID选择器相当于人的身份证，只能使用一次，唯一的。2.如果行高大于盒子的高度，则里面的单行文字会垂直偏下。3.如果行高小于盒子的高度，则里面的单行文字会垂直偏上。1.类选择器相当于人的名字，可以重复，可以多次使用。和类选择器的区别（使用次数上）...
复制链接

扫一扫