css入门基础

目录

1. CSS前景

2.什么是CSS

3.CSS发展史 

4.CSS的3种样式格式 

5.CSS 的语法

6.CSS的字体样式

7.选择器类型

8.CSS外观属性


1. CSS前景

从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增 加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。

2.什么是CSS

简单来说,层叠样式表( Cascading Style Sheet )是 一种专门用来控制界面外观风格的文档 。 主要用于设置HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边 距等)以及版面的布局等外观显示样式。 CSS以 HTML 为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不 同的浏览器设置不同的样式。

3.CSS发展史 

  • 1996 CSS 1.0 规范面世,其中加入了字体、样色等相关属性。
  • 1998 CSS 2.0 规范推出,这个版本的 CSS 也是最广为人知的一个版本。
  • 2004 CSS 2.1 规范推出,对 CSS 2.0 进行了一些小范围的修改,删除了一些浏览器支持不成熟的属性。
  • 2010 CSS 3.0 规范推出,将 CSS3 分成了不同的模块,例如盒子模型、背景和边框、文字特效等
  • 模块。

4.CSS的3种样式格式 

  • 1.行内样式:
    • 在同一行种声明样式,行内样式需要写到标签的 style 属性值中。
<h1 style="color: skyblue;">我叫小张</h1>
  • 2.内部表样式:
    • 内部样式需要写到 <style> 标签中。
<head><style>p {color: red;}</style>
</head>
<body><p>我叫小张</p>  
</body>
  • 3.外部表样式:使用<link>标签以链接的方式引入
<head><link rel="stylesheet" href="./上午.css">
</head><body><p>我叫小张</p>
</body>
  • 推荐使用:开发中主要是通过这种形式定义样式。

5.CSS 的语法

  • 属性名和属性值之间以冒号( : )隔开,样式规则之间以分号( ; )隔开

6.CSS的字体样式

1.font-size :字号大小2.font-family :字体  3.font-weight :字体粗细属性              描述normal      默认值。定义标准的字符。bold        定义粗体字符。bolder      定义更粗的字符lighter     定义更细的字符。100~900     定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。4. font-style :字体风格属性              描述normal     默认值,浏览器会显示标准的字体样式。italic     浏览器会显示斜体的字体样式oblique    浏览器会显示倾斜的字体样式

7.选择器类型

  • 主要包括:元素选择器、类选择器、ID选择器、属性选择器 
  • 元素选择器:使用元素标签名称,全局命名
p {font-size: 16px;color: red;
}
  • 类选择器:选择所有带有class="box"的HTML元素
.box {font-size: 20px;color: green;
}
  • ID选择器:选择ID为"nav"的HTML元素
#nav {font-size: 24px;color: blue;
}
  • 通配符选择器:
* {font-size: 24px;color: blue;
}

8.CSS外观属性

1.color:文本颜色2.color: rgba(r,g,b,a) 颜色半透明 a 是alpha 透明的意思 取值范围 0~1之间3.line-height:行间距4.text-align:水平对齐方式5.text-indent:首行缩进6. text-decoration:文本修饰属性                描述none            指定文字无装饰underline       指定文字的装饰是下划线overline        指定文字的装饰是上划线line-through    指定文字的装饰是贯穿线

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/27147.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

专业学习|博弈论-博弈论概述

&#xff08;一&#xff09;认识博弈论&#xff1a;解析复杂决策与策略 &#xff08;1&#xff09;认识博弈 博弈论广泛应用于分析个体间因利益冲突而产生的决策问题。通过构建不同模型来探讨如经贸关系、军事威胁等问题&#xff0c;旨在寻找均衡解并提供新知&#xff0c;相较…

mathematical-expression-cpp | C++ 数学表达式解析库

数学表达式-cpp Switch to English Document 介绍 本框架是一种针对数学公式解析的有效工具&#xff0c;能够通过C的API解析包含嵌套函数&#xff0c;包含函数&#xff0c;数列步长累加等数学公式&#xff0c;返回值是一个数值的结果对象&#xff0c;同时也可以进行比较运算…

idea在空工程中添加新模块并测试的步骤

ServicesTest是空的工程&#xff0c;没有pom文件。现在需要在ServicesTest目录下添加新模块作为新的工程&#xff0c;目的是写一下别的技术功能。 原先目录结构&#xff0c;ServicesTest是空的工程&#xff0c;没有pom文件。下面的几个模块是新的工程&#xff0c;相互独立。 1.…

LLM大模型的挑战与未来,挑战大但是机遇更大!

大模型必然是未来很长一段时间我们工作生活的一部分&#xff0c;而对于这样一个与我们生活高度同频互动的“大家伙”&#xff0c;除了性能、效率、成本等问题外&#xff0c;大规模语言模型的安全问题几乎是大模型所面对的所有挑战之中的重中之重&#xff0c;机器幻觉是大模型目…

C++ (week6、7):Linux系统编程4:网络

文章目录 四、网络和网络编程(一) 网络协议1.基础概念2.网络协议和网络模型&#xff1a;OSI七层模型、TCP/IP四层协议3.TCP协议(1)TCP协议的特点(2)TCP协议的首部格式(3)TCP状态图(4)为什么要三次握手&#xff1f;2次行不行&#xff1f;(5)为什么要四次挥手&#xff1f;(6)快速…

软件测试分类介绍

大家好&#xff0c;软件测试是确保软件质量的关键环节之一&#xff0c;通过对软件系统的各个方面进行测试&#xff0c;可以发现和解决潜在的问题&#xff0c;提高软件的稳定性、可靠性和用户满意度。在软件测试领域&#xff0c;根据测试的目的、方法和对象的不同&#xff0c;可…

Python业务规则引擎库之rules使用详解

概要 在软件开发中,业务规则引擎是一种重要的工具,可以帮助开发者将复杂的业务逻辑从代码中解耦出来,并以更直观的方式进行管理和维护。rules 是一个轻量级的 Python 库,专门用于定义和执行业务规则。它提供了一种简洁且强大的方式来管理应用程序中的规则逻辑,使代码更加…

C++ 引用 - 引用的特点|在优化程序上的作用

引用是C 的一个别名机制&#xff0c;所谓别名&#xff0c;就是同一块内存共用多个名字&#xff0c;每个名字都指的是这片空间&#xff0c;通过这些别名都能访问到同样的一块空间。 就像鲁迅和周树人是同一个人。 ——鲁迅 一、引用的基本用法 int a 10; int& ref a; // …

Django序列化器详解:普通序列化器与模型序列化器的选择与运用

系列文章目录 Django入门全攻略&#xff1a;从零搭建你的第一个Web项目Django ORM入门指南&#xff1a;从概念到实践&#xff0c;掌握模型创建、迁移与视图操作Django ORM实战&#xff1a;模型字段与元选项配置&#xff0c;以及链式过滤与QF查询详解Django ORM深度游&#xff…

充电桩出口:跨国贸易的机遇与挑战之旅

在新能源浪潮席卷全球的今天&#xff0c;充电桩作为电动汽车的“加油站”&#xff0c;正逐渐从幕后走向台前。 而在这场跨国贸易的舞台上&#xff0c;充电桩的出口之路&#xff0c;既充满了诱人的机遇&#xff0c;也伴随着不小的挑战。 机遇&#xff0c;源自日益增长的全球市场…

免费听歌,电脑或手机免费听歌,落雪音乐安装详细步骤

近年来&#xff0c;由于资本的力量导致各种收费&#xff0c;看个电视想听歌都必须要付费了&#xff0c;否则你听不完整&#xff0c;吃相非常难看&#xff0c;特别是电视&#xff0c;吸血鬼式吸收各种会员费&#xff0c;各种APP也是铺天盖地的广告&#xff0c;渐渐迷失了自我&am…

两个螺旋面的交线

已知轴截面齿形&#xff0c;先得到螺旋面 然后在计算出对应的端面齿形 在用端面齿形来计算和另一个螺旋面的相交曲线。 三维验证这个方法可行&#xff01;

喜大普奔,AI绘画SD3终于开源了,AI绘画又添新利器!【附模型下载和安装包】

sd3终于开源了&#xff01; 没错就是stablediffusion 3.0版本&#xff01;这是stability迄今为止最先进最复杂图像生成模型。 这次开源的是medium版本&#xff0c;总共有三个型号的模型&#xff0c;下面我们来详细的说下sd3的功能特点以及不同型号区别、安装方法&#xff01;…

HTML静态网页成品作业(HTML+CSS)—— 家乡山西介绍网页(3个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有6个页面。 二、作品演示 三、代…

专业设计师推荐的20条用户体验设计黄金准则

在当今的数字世界中&#xff0c;用户体验设计已经成为商业成功的关键因素。它可以实现或摧毁一个产品。今天&#xff0c;我们将讨论该领域的20个基本原则。这些用户体验设计原则不仅被顶级工厂设计师广泛使用&#xff0c;而且为您在设计过程中提供有价值的指导。 1. 以用户为中…

共绘财富与时间画卷,ATFX携手Haofa腕表,开启跨界新篇章

在当前激烈的市场竞争中&#xff0c;品牌创新和多元化、本地化发展已成为企业突破重围&#xff0c;赢得用户和市场份额的关键。作为差价合约行业领军品牌&#xff0c;ATFX勇于突破自我&#xff0c;为探索更多的市场可能性&#xff0c;通过跨界合作、联合营销的策略&#xff0c;…

物联网概念

物联网 物联网简介物联网体系结构物联网体系结构定义物联网体系结构设计原则物联网体系结构四层物联网体系结构感知控制层数据传输层数据处理层应用决策层 物联网关键技术感知标识技术网络与通信技术云计算技术安全技术 已有物联网相关应用架构无线传感器网络的体系结构EPC/UID…

同三维T80005JEHVA 4K视频解码器

同三维T80005JEHVA视频解码器 可解1路4K30HDMI/VGA/CVBS1路3.5音频 可解电台音频网络流&#xff0c;可同时解4个网络流&#xff0c;分割输出 可预设十个流&#xff0c;任意切换1路流输出 <!--[endif]----><!--[if !vml]--> <!--![endif]----> 介绍&…

逆向分析-Ollydbg动态跟踪Ransomware.exe恶意锁机程序

1.认识Ollydbg Ollydbg是一个新的动态追踪工具&#xff0c;将IDA与SoftICE结合起来的思想&#xff0c;Ring 3级调试器&#xff0c;非常容易上手&#xff0c;己代替SoftICE成为当今最为流行的调试解密工具了。同时还支持插件扩展功能&#xff0c;是目前最强大的调试工具。 Oll…

Java——面向对象进阶(二)

前言&#xff1a; 多态&#xff0c;包&#xff0c;final关键字&#xff0c;权限修饰符和代码块 文章目录 一、多态1.1 概念1.2 多态存在条件1.3 多态中调用成员的特点1.4 instanceof关键字 二、包三、权限修饰符四、final 关键字4.1 修饰类4.2 修饰方法4.3 修饰变量 五、代码块…