Web入门——css

VIP文章浩923

已于 2023-07-23 21:34:16 修改

阅读量1.7k

点赞数

文章标签： css 前端 html

于 2022-05-27 09:54:31 首次发布

本文链接：https://blog.csdn.net/qq_57357292/article/details/124996794

版权

一、定义

简单来说，css就是在html上的代码将在web界面上如何呈现出来。举个例子：
如果不用css进行排版，仅仅用html文件代码，所生成的页面上会是如下这样，将内容依次向下排列。
在这里插入图片描述
如果用上css进行样式排版，生成的网页将会让人看起来比较舒服，如下图：

二、css的相关语法

一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明。
如：

/* 这是CSS的注释 */
/* 建议每条申明占一行 */
p{
   
  color:red;
  text-align:center;  /* 文本居中 */
}

2.1 选择器

CSS选择器的作用是从HTML页面中找出特定的某类元素。常用的选择器有：

标签选择器

标签选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标签指定统一的CSS样式。

基本语法格式：标签名{ 属性1：属性值1；属性2：属性值2；}
例子：

p{
   
  color:red;
  text-align:center;  /* 文本居中 */
}

标签选择器最大的优势是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。

id选择器

id选择器使用**‘#’**进行标识，后面紧跟id名。

基本语法格式：#id名{ 属性1：属性值1；属性2：属性值2；}

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
例子：
css代码：

/* 注意：id选择器前有 # 号。 */
#sky{
   
  color: blue;
}

html代码：

<p id="sky">蓝色的天空</p>
<p id="forest">绿色的森林</p>

在这里插入图片描述

class选择器（类选择器）

类选择器使用**‘.’**(英文点号)进行标识，后面紧跟类名。

基本语法格式：.类名{ 属性1：属性值1；属性2：属性值2；}

例子：
仅仅用html时：

<p class="center">我会居中显示的</p>
<p class="red">我是红色的</p>
<p class="center large red">我又红又大还居中</p>
<p class="red">我也可以是红的</p>

在这里插入图片描述
加上css时：

   /* 注意：class选择器前有 . 号。 */
.center{
   
    /*类选择器的特征*/
    text-align: center;
  }
  .large{
   
    font-size: 30px;
  }
  .red{
   
    color: red;
  }

结果是：
在这里插入图片描述

三、css如何生效呢？

一般采用三种方法：外部样式表，内部样式表，内联样式。

3.1外部样式表

新建一个后缀名为.html文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
    <link rel="stylesheet" href="./css/main.css">
  <title>页面标题</title>
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

在同一个目录下在建一个后缀名为.css的文件

body {
   
  background-color: linen;
  text-align: center;
}
h1 {
   
  color: red;
}
.haha {
   
  margin-top: 100px;
  color: chocolate;
  font-size: 50px;
}

在这里插入图片描述

3.2 内部样式表

内部样式表是指将样式放在html文件中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>页面标题</title>
  <style>
    body {
     
      background-color: linen;
      text-align: center;

最低0.47元/天解锁文章

浩923

关注

0
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web入门——css

一、定义简单来说，css就是在html上的代码将在web界面上如何呈现出来。举个例子：如果不用css进行排版，仅仅用html文件代码，所生成的页面上会是如下这样，将内容依次向下排列。如果用上css进行样式排版，生成的网页将会让人看起来比较舒服，如下图：二、css的相关语法一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明。如：/* 这是CSS的注释 *//* 建议每条申明占一行 */p{ color:red; text-align:center; /*
复制链接

扫一扫