CSS

CSS基础

认知
层叠样式表 cascading style sheets

写在哪？style标签中，style一般在head之内，title之下

怎么写？

<title>Document<title>
<style>
选择器(查找标签用的)
p{
    color: red;
 /* 属性名 属性值 分号 */
    font-size: 30px;
    backgroud-color:green;
    width: 400px;
    height: 400px;
    }
</style>
<head>
<body>
<p>hello world</p>
</body>
</html>
css引入方式：

  • 内嵌式，style里【小场景案例】

    通常约定写在head中，如上示

  • 外联式 单独的 .css 文件中【单独管理 多用于项目中】

    需通过link标签在网页中引入

    在html文件的title之下写

    <link rel="stylesheet" href="./my.css">

    在同级目录的css文件中写

    p{color: red;}

  • 行内式 写在标签的style属性中【配合JavaScript使用】

    <div style="color: green; font-size: 30px">这是div标签</div>

基础选择器
标签选择器★

作用：通过标签名 找到页面中 所有这类标签 ，设置样式使其全部生效

类选择器 ★★

解决以上问题：通过类名找到页面中 所有带有这个类名的标签 ，

image-20230707142258831

先定义，然后调用这个定义，谁想变就拿过来用

注意

  1. 所有标签都有class属性

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

  3. 一个标签可有多个类名，类名间以空格隔开

    <p class="turnRED turnSIZE">222</p>

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

id选择器
  1. 所有标签都有id属性
  2. 类似身份证号码，在一个页面中是唯一的、不可重复的
  3. 一个标签只能有一个id属性值
  4. 一个id选择器只能选中一个标签
通配符选择器

*{}

有多少选多少

开发中使用极少，极特殊情况下用到（如京东网页以此来去除默认的margin和padding属性）

image-20230707144347584
字体、文本样式
字体

//大小font-size 取值数字+px

//粗细font-weight 正常normal&400；加粗bold&700

image-20230707145049728

//样式font-style 控制是否倾斜

<style>

div{

font-style: italic;

}

</style>

<div>DIV文字</div>

//类型font-family 控制字体

  • 无衬线字体sans-serif

    笔画粗细均匀，首尾无装饰，黑体、Arial（网页）

  • 衬线serif

    不均，有装饰，宋体、TimesNew Roman（报刊书籍）

  • 等宽字体monospace

    每个字母宽度相等，Consolas、fira code（代码编写）

    div{
            font-family: 微软雅黑,黑体,sans-serif;
            /*如果用户未安装雅黑则按黑体显示，都未安装则按任意一种无衬线系列显示*/
        }

    样式的层叠问题：给同一个标签设置了相同的属性，此时样式会覆盖，写在下面的生效。

 <title>Document</title>
    <style>
        p{
            font: italic 700 66px 宋体；
        }
    </style>
</head>
<body>
    <p>111</p>
</body>

以上是 “复合属性” 的空格隔开写法

注意：

  • 要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面，以上述代码块为例：

     p{
            font: italic 700 66px 宋体；
            font-style: normal;
            /*会把原本倾斜掰正*/
        }
文本

  •  p{
            /*首行缩进两个字 单个默认16px*/
            /*或 直接使用em*/
            text-indent: 32px;   /*①*/
            text-indent: 2em；     /*②*/
        }

  • h1{

    text-align: center ;

    }

    center能让哪些元素水平居中？文本//span标签、a标签//input标签、img标签

  • text-decoration: underline

    属性值 效果
    underline 下划线
    line-through 删除线（不常用）
    overline 刷新（不常用）
    none 无装饰线
    image-20230707160237530
line-height行高

控制一行的上下行间距，取值数字+px，或倍数

p { line-height: 50px; }

p { line-height: 1.5; }

行高和font连写时注意：如果同时设置了二者，注意覆盖问题

font：style weight size/line-height family ;

chrome调试工具
拓展
颜色常见取值

  • 属性名

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

  • 属性值

    颜色表示方式 表示含义 属性值
    关键词 预定义的 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)...
    十六进制表示法 数字转换成16进制 #000000（即#000）,#ff0000（即#f00）,#e92322...
标签水平居中的方法

margin: 0 auto 来实现

如果让div，p，h水平居中直接给当前元素本身设置

margin： 0 auto一般针对固定宽度的盒子，若大盒子没设置狂赌此时默认占满 父元素 的宽度

综合案例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>七月七号练习实例</title>
  <style>
    .box {
      width: 800px;
      /*让整体div大盒子水平居中*/
      margin: 0 auto;
    }

    .time {
      color: grey;
    }

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

    a {
      /*去除超链接的下划线*/
      text-decoration: none;
    }

    h1 {
      /*background-color: pink;*/
      /*要让文本水平居中*/
      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年02月31日25:61 </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>
image-20230707171427665
posted on 2023-07-07 21:31  言行一  阅读(38)  评论(0)    收藏  举报
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3