初识CSS基础

suda哇

已于 2022-03-01 17:24:31 修改

阅读量226

点赞数

分类专栏：前端学习文章标签： css html 前端 html5 学习

于 2022-03-01 17:23:44 首次发布

本文链接：https://blog.csdn.net/qq_44489836/article/details/123206413

版权

前端学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

学习目标：

掌握CSS基本概念及基本语法，对CSS有一个大致的了解。

学习内容：

CSS简介

1.什么是CSS

CSS 指的是层叠样式表* (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

2.CSS用来干什么?

一份文档是由标记语言组织起来的文本文件 —— HTML 是最常见的标记语言, 但你可能也听说过其他可标记语言，如 SVG 或 XML。
CSS 可以用于给文档添加样式 —— 比如改变标题和链接的颜色及大小。它也可用于创建布局 —— 比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局。它甚至还可以用来做一些特效，比如动画。

3.CSS语法

h1 {
    color: red;
    font-size: 5em;
}

语法由一个选择器(selector)起头。它选择(selects) 了我们将要用来添加样式的 HTML 元素。在这个例子中我们为一级标题（主标题<h1>）添加样式。
接着输入一对大括号{ }。在大括号内部定义一个或多个形式为属性(property):值(value); 的声明(declarations)。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。
冒号之前是属性，冒号之后是值。不同的 CSS 属性(properties) (en-US) 对应不同的合法值。在这个例子中，我们指定了 color 属性，它可以接受许多颜色值；还有 font-size 属性，它可以接收许多 size units 值。

如何使用CSS

有三种插入样式表的方法：

外部 CSS
内部 CSS
行内 CSS

1.外部样式表

外部样式表是指将CSS编写在扩展名为.css 的单独文件中，并从HTML<link>元素引用它的情况：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

2.内部样式表

内部样式表是指不使用外部CSS文件，而是将CSS放在HTML文件<head>标签里的<style>标签之中。
于是HTML看起来就像下面这个样子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

3.内联样式

内联样式表存在于HTML元素的style属性之中。其特点是每个CSS表只影响一个元素：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

4.选择器

<p class="special">What color am I?</p>

.special {
  color: red;
}

p {
  color: blue;
}

在我们同时使用了类选择器和元素选择器的例子中，类将获胜，使得段落变红–即使它出现在样式表的前面。一个类被描述为比元素选择器更具体，或者具有更多的特异性，所以它获胜了。

5.属性和值

在最基本的层面上，CSS由两个组成部分组成：

属性：人类可读的标识符，指示您想要更改的样式特征。
值：每个指定的属性都有一个值，该值指示您希望如何更改这些样式特性。值可以是相对简单的关键字或数值，也有一些可能的值以函数的形式出现。

学习产出：

效果展示图

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="task1.css">
</head>

<body>
    <!-- the contact card -->
    <div class="card">
        <!-- image -->
        <img src="https://b.bdstatic.com/searchbox/icms/searchbox/img/ife_logo.png">
        <!-- name -->
        <h1>YOUR ACCOUNT NAME</h1>
        <!-- title -->
        <h2>web designer</h2>
        <hr>
        <!-- bio -->
        <p>HERE IS YOUR SELF INTRODUCTION.YOU CAN WRITE ANYTHING HERE.</p>
        <hr>
        <!-- contact links -->
        <ul>
            <li> <a href="#">Twitter Riccavallo@gmail.com</a></li>
            <li><a href="#">TEL +86123456689</a></li>
            <li><a href="#">Email EXAPMLE@email.com</a> </li>
        </ul>
    </div>
</body>

</html>

.card{
    font-family:Arial, Helvetica, sans-serif; /*任意选择字体样式*/
    width: 500px;
    padding: 50px;
    margin: 50px;
    background-color: #fff;
    border: #ddd 1px solid;
    border-color: #ddd;
    /* text-align对hr不起作用？ */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

img{
    width: 100px;
    height: 100px;
}

h1{
    font-size: 30px;
    font-weight: 300;
    /* 设置行距 */
    line-height: 32px;
    padding: 15px;
}

h2{
    font-size: 18px;
    font-weight: 300;
    color: #aaa;
    line-height: 16px;
    padding: 5px;
}

hr{
    border: #ddd 0.5px solid;
    width: 200px;
    margin: 30px;
    /* color: #ddd; */
}

p{
    font-weight: 500;
    line-height: 32px;
}

ul{
    font-weight: 500;
    line-height: 28px;
    width: 100%;
}
ul li{
    border: 1px #eee solid;
    padding: 5px;
    width: 100%;
}
ul li a{
    color: #aaa;
}

suda哇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识CSS基础

学习目标：掌握CSS基本概念及基本语法，对CSS有一个大致的了解。学习内容：CSS简介1.什么是CSSCSS 指的是层叠样式表* (Cascading Style Sheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件中2.CSS用来干什么?一份文档是由标记语言组织起来的文本文件 —— HTML 是最常见的标记语言, 但你可能也听说过其他可标记语言，如 SVG 或 XML。CS
复制链接

扫一扫