[华为云在线课程][大话CSS][学习笔记][第1章][CSS简介]
【摘要】 1，CSS简介 1.1，CSS 什么是CSSCSS的英文全称为Cascading Style Sheets，中文名为级联样式单，一般也称为层叠样式表单。 CSS的功能CSS是一种样式表现语言，它是对网页结构语言（HTML）的补充。主要用于对网页样式的定义，例如布局、颜色、文本等的设计。 CSS的作用精确控制页面中的各个元素 1.2，CSS的发展史 CSS的版本CSS1.0版本发布于1996...
1，CSS简介
1.1，CSS
什么是CSS
- CSS的英文全称为Cascading Style Sheets，中文名为级联样式单，一般也称为层叠样式表单。
CSS的功能
- CSS是一种样式表现语言，它是对网页结构语言（HTML）的补充。主要用于对网页样式的定义，例如布局、颜色、文本等的设计。
CSS的作用
- 精确控制页面中的各个元素
1.2，CSS的发展史
CSS的版本
- CSS1.0版本发布于1996年12月，只提供了一些基本的样式属性。
- CSS2.0版本发布于1998年5月，提供了更为强大的功能。
- CSS2.1版本发布于2007年，并于2011年6月正式成为标准，也是目前使用最广泛的版本。
- CSS3.0版本于1999年开始制定，2001年完成工作草案，是目前CSS最新的版本。它的最大特点是将CSS3的规范内容分成一系列独立的模块，更有利于浏览器厂商的逐步支持。
1.3，CSS的编写工具
-
编辑器
- VS Code编辑器（宇宙最强编辑器、前端开发神器）
-
调试工具
- Chrome浏览器（谷歌浏览器）
1.4，CSS的引入
1，内嵌样式
- 将CSS样式直接写到HTML元素的style属性中
2，内部样式
- 将CSS样式写到
<style>标签中
3，引入外部样式
- 精确通过
<link>元素引入外部的一个CSS文件
4，导入外部样式
- 通过在
<style>元素中，使用@import导入一个外部的CSS文件
例子
h1
{
color: pink;
}
<!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: yellow;
}
</style> -->
<!-- <link rel="stylesheet" href="1.3.css"> -->
<!-- <style>
@import "1.3.css";
</style> -->
</head>
<body>
<!-- 内联样式 -->
<!-- <h1 style="color: red;">华为手机发布会</h1> -->
<!-- 内部样式 -->
<!-- <h1>华为手机发布会</h1> -->
<!-- 引入外部样式 -->
<!-- <h1>华为手机发布会</h1> -->
<!-- 导入外部样式 -->
<h1>华为手机发布会</h1>
</body>
</html>
1.5，CSS的基本语法
selector{property:value;...}selector也叫选择器，它决定了后面大括号内的样式对哪些元素生效property:value也叫做一条CSS样式- 每条样式都能够改变
selector选中元素的展现 property成为样式名，value是对应的样式值- CSS样式可以有很多条，它们包裹在大括号内部，每条样式之间通过分号分割
- CSS的样式对大小写不敏感，我们推荐统一使用小写
- 具有相同样式的选择器，可以分成一个组，之间用逗号分隔
- 小例子
h1
{
color: red;
font-size: 30px;
}
#text
{
font-weight: bold;
text-indent: 2em;
}
.box1, box2, box3
{
height: 100px;
background: yellow;
}
-
一个基本结构，
- 选择器{样式名:样式值;}
-
三个注意事项
- 分号分隔
- 小写
- 逗号分隔
1.6，CSS的特征
1，层叠特性
- 如何理解层叠样式表单中的层叠的含义？
- 层叠指的是样式的优先级，当产生冲突时以优先级最高的为准。
- 开发者样式>读者样式>浏览器样式（除非使用
!important标记） - id选择符>（伪）类选择符>元素选择符
- 权重相同时取后面定义的样式
2，继承性
- 如何理解CSS中的继承特性
- 子标签会继承父标签中能继承的样式。
- 可继承的属性：字体，文本，元素可见性等。
- 不可继承的属性：盒子模型属性，背景属性，定位属性，outline，display
<!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>特性</title>
<style>
h1
{
color: red;
text-align: center;
background: yellow;
color: green;
color: blue;
}
p
{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h1>我是再次出镜的h1</h1>
<p>我是P标签
<span>我是P标签里面的SPAN标签</span>
</p>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）