web前端学习(十二)——初识CSS3

简介: web前端学习(十二)——初识CSS3

1.什么是CSS?


  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件
  • 多个样式定义可层叠为一个


2.CSS语法


CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。


每条声明由一个属性和一个值组成。


属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。


CSS声明总是以分号(;)结束,声明总以大括号({})括起来。为了让CSS可读性更强,你可以每行只描述一个属性。


注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。


CSS注释以 /* 开始, 以 */ 结束。(这与Java中的注释方法是类似的)


3.CSS简单的应用举例


3.1 实例一:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style>
      body
      {
        background-color: aqua;
      }
      h1
      {
        color: brown;
        text-align: center;
      }
      /*这是一行注释*/
      p
      {
        /*这是另一行注释*/
        color: deeppink;
        font-family: "楷体";
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h1>CSS实例</h1>
    <p>这是一个段落。</p>
  </body>
</html>


3.2 实例二

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style>
      body {background-color: burlywood;}
      h1 {color: chocolate;}
      hr {color: black;}
      p 
      {
        color: darkred;
        font-size: 15px; 
        text-align: left;
      }
      a:link {color: red;}
      a:visited {color: blue;}
      a:hover {color: chartreuse;}
      a:active {color: white;}
    </style>
  </head>
  <body>
    <h1>这是一个一级标题</h1>
    <hr/>
    <p>这个段落是被设定的CSS样式渲染的。</p>
    <p>
      <a href="https://www.baidu.com" target="_blank">这是一个链接</a>
    </p>
  </body>
</html>


相关文章
|
2月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
334 108
|
2月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
326 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
4月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
52 2
|
4月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
116 1
|
9月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
6月前
|
前端开发
|
6月前
|
前端开发
|
6月前
|
前端开发 JavaScript
|
6月前
|
XML 前端开发 JavaScript
|
6月前
|
前端开发 容器

热门文章

最新文章