ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS3基础

2022-07-16 00:35:38  阅读:180  来源: 互联网

标签:CSS3 样式 基础 HTML 样式表 Lorem CSS 属性


一、CSS的发展历程

​ 从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
​ 随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。CSS版本有2.0和3.0的版本,我们都会讲到,CSS3因为有兼容性问题,所以讲到CSS3样式的时候,这里会特殊标明。

二、CSS概述

CSS(Cascading Style Sheets)

CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。

CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

三、CSS样式规则

使用HTML时,需要遵从一定的规范。CSS亦如此,要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则。

在上面的样式规则中:

1.器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。
2.属性和属性值以键值对"的形式出现。
3.属性是对指定的对象设置的样式属性,例如字体大小、文本颈色等。
4.属性和属性值之间用英文":"连接。
5.多个“键值对”之间用英文";"进行区分。
可以用段落和表格的对济的演示。
 <!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>CSS初试</title>
   <style>
      h1 {
         color:#ff445566;
         font-size: 40px;
      }
      p {
         color:darkolivegreen;
      }
   </style>
 </head>
 <body>
    <h1>Lorem</h1>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil natus aperiam cumque repudiandae numquam illo magnam quaerat saepe inventore recusandae?</p>
   <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur dolorem quia corrupti accusamus molestias delectus alias cum reprehenderit, repellat impedit officiis ab ipsa est eius asperiores ut eveniet sapiente dolorum soluta hic corporis. Necessitatibus aut asperiores ipsa assumenda tempore tenetur provident quasi. Sunt delectus rem, totam odit omnis eum cupiditate.</p>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae atque possimus non tempora nobis quis quas, aperiam ullam voluptas iste!</p>
 </body>
 </html>

标签:CSS3,样式,基础,HTML,样式表,Lorem,CSS,属性
来源: https://www.cnblogs.com/yemoleng/p/16483163.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有