WEB_Day02(CSS简介、样式规则、字体样式属性、选择器、注释、外观属性、样式表、标签的显示模式、复合选择器)

最新推荐文章于 2023-02-24 19:59:45 发布

hrh1276

最新推荐文章于 2023-02-24 19:59:45 发布

阅读量332

点赞数

分类专栏： WEB前端文章标签： css html web 前端

本文链接：https://blog.csdn.net/weixin_47469183/article/details/114686991

版权

WEB_Day02(CSS简介、样式规则、字体样式属性、选择器、注释、外观属性、样式表、标签的显示模式、复合选择器)

CSS简介

CSS 通常称为CSS样式表或者层叠样式表（级联样式表）。主要用于设置HTML页面中的文本内容（字体大小对齐方式），图片（宽度、高度、边框、边距等）版面的布局.
CSS是以HTML为基础，提供丰富的各种功能，字体、颜色、背景、的控制，整体的排版，而且还可以针对不同的浏览器设置不同的样式。

CSS样式规则

  <style>
    h1 {
    
      color: red;
      font-size: 20px;
    }

    body {
    
      background-color: seagreen;
    }
  </style>

规则：

h1 和body 是选择器用于指定css样式作用的HTML对象，花括号内部是对该对象设置的具体的样式。
属性和属性值以键值对的形式出现
属性是对指定的对象设置样式属性。
属性和属性值之间以英文的冒号连接
多个键值对之间按使用英文的分号区分。

CSS字体样式属性

字体的大小 font-size：

设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位，其中相对长度单位比较常见，推荐使用px（像素）
可以使用绝对长度：
px像素，in 英寸，cm 厘米，mm 毫米，pt 点

字体的设置 font-family：

在这里插入图片描述
在表示字体的时候，可以使用英文，也可以使用中文字体，如果当我们使用英文字体名称的时候，此时如果字体的名称是由一个单词组成，则可以直接写，如果是由多个单词组成，则需要加双引号或者单引号
中文字体名一般都需要使用单引号或者双引号引起来

      font-family: '华文中宋', Courier, monospace;

在网页中，普遍使用的字号为14px
尽量使用偶数的数字字号，因为在ie6中对奇数的支持有bug
各种字体之间必须使用英文的逗号分割
中文字体需要加上英文的引号
可以同时设置多个字体，多个字体之间是一种备选关系。
在使用字体的时候尽量使用一些系统默认的常规字体

字体的粗细 font-weight：

  <b>字体的粗细程度</b>
 <strong>这是第二种设置字体的粗细</strong>

使用CSS实现字体的粗细程度的设置可选的值：
在这里插入图片描述
数字的范围：100-900
属性值：normal（400） bold（700） bolder lighter

字体的风格 font-style：

主要设置字体是否倾斜，相应的标签 i 和 em

<b><i>字体的粗细程度</i></b>
<strong><em>这是第二种设置字体的粗细</em></strong>

在这里插入图片描述
Nomal：默认值，浏览器显示为标准字体
Italic：斜体的字体
Oblique：显示为倾斜

字体的综合设置：

      font: oblique 700 40px "楷体";

具体语法：选择器：{font： font-style font-weight font-size font-family}
在使用的过程中，必须严格遵循上边的语法，顺序不能更换
其中的一些属性是可以省略，省略之后可以取它的默认值，但是必须保留 font-size 和 font-family ，否则font属性将不起作用

选择器（重点）

标签选择器（元素选择器）：

使用HTML标签名作为选择器。
语法：
标签名【元素名】{属性：属性值；属性：属性值}

<div>
    <b><i>字体的粗细程度</i></b>
    <strong><em>这是第二种设置字体的粗细</em></strong>
</div>
<div>
    使用CSS来改变字体的粗细程度
</div>

div {
      /* font-size: 35px;
      font-weight: 400;
      font-style: oblique; */
      font: 40px "楷体";
    }

类选择器：

类选择器使用“.”(英文的点号) 进行标识，后面紧跟类名
语法：
.类名{属性：属性值；属性：属性值}
在这里插入图片描述
完成上边google样式：

<!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 {
    
      background-color: cadetblue;
      width: 500px;
      height: 200px;
    }

    span {
    
      font-size: 100px;
      font-weight: 800;
    }

    .blue {
    
      color: blue;
      /* color 设置前景色 字体颜色*/
    }

    .red {
    
      color: red
    }

    .orange {
    
      color: orange;
    }

    .green {
    
      color: green;
    }
  </style>
</head>

<body>
  <div>
    <span class="blue">G</span>
    <span class="red">o</span>
    <span class="orange">o</span>
    <span class="blue">g</span>
    <span class="green">l</span>
    <span class

最低0.47元/天解锁文章

hrh1276

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB_Day02(CSS简介、样式规则、字体样式属性、选择器、注释、外观属性、样式表、标签的显示模式、复合选择器)

WEB_Day02()CSS简介CSS 通常称为CSS样式表或者层叠样式表（级联样式表）。主要用于设置HTML页面中的文本内容（字体大小对齐方式），图片（宽度、高度、边框、边距等）版面的布局.CSS是以HTML为基础，提供丰富的各种功能，字体、颜色、背景、的控制，整体的排版，而且还可以针对不同的浏览器设置不同的样式。CSS样式规则 <style> h1 { color: red; font-size: 20px; } bo
复制链接

扫一扫