|
CSS样式表
1、概述
1、CSS是什么 ？
层叠样式表，定制html元素的表示样式，美化页面，针对前端页面的搭建非常要紧
2、为何要运用CSS
（1）CSS 指层叠样式表 (Cascading Style Sheets)
（2）样式定义怎样表示 HTML 元素
（3）样式一般存储在样式表中
（4）把样式添加到 HTML 中，是为认识决内容与表现分离的问题
111
（5）外边样式表能够极重加强工作效率
（6）外边样式表一般存储在 CSS 文件中
（7）多个样式定义可层叠为一个
HTML 标签本来被设计为用于定义文档内容。经过运用 <h1>、<p>、<table> 这般的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同期文档布局由浏览器来完成，而不运用任何的格式化标签
# p table h1 只是为了告诉浏览器，这是什么标签，并不是用来表达它长什么样子
# 倘若要设置标签内容样式的时候，应该运用css来定制
# 为何运用CSS？
1. 为了美化界面，给标签添加样式
2. 运用css能够将内容和表现形式分离
3、学习目的
熟悉，熟悉运用常用的css样式属性，具备基本的页面美化能力。
2、初识CSS
1、第1个CSS样式
<head>
<title>CSS样式表</title>
<style type="text/css">
p{
color: white; /* 字体颜色 */
font-size: 25px; /* 字体 体积 */
bac 公斤round-color: gray; /* 背景颜色 */
width: 650px; /* 宽度 */
}
</style>
</head>
<body>
<p> 才可的火花，常常在勤奋的磨石上迸发。</p>
</body> 2、怎样插进样式表
当读到一个样式表时，浏览器会按照它来格式化 HTML 文档。在HTML文档中插进样式表的办法有三种： 外边样式表<link href="css/index.css" rel="stylesheet" type="text/css" />
内部样式表（位置于<head>标签内部）
<style type="text/css">
</style>
内联样式（在 HTML 元素内部）
<p style="color: white;">
学习HTML好简单
</p>
样式表的优先级： 内联 > 内部 > 外边 > 缺省
# 引入CSS样式的三种方式：
1. 外边样式 新建一个.css文件 在head标签运用link来引入
2. 内部样式 在head标签中，加入一个style标签
3. 内联样式-行内样式 在起始标签中，加入style属性
# 优先级： 内联样式 > 内部样式 > 外边样式 > 缺省样式（默认样式）
# 耦合性： 内联样式 > 内部样式 > 外边样式
# 弱耦合还是强耦合好？ 弱耦合
3、基本语法
CSS 语法由三部分形成：选取器、属性和值：
body{ bac公斤round-color:red; }
重视：多个样式之间用分号；隔开。
3、选取器种类
1、元素选取器
p{ color:white; bac公斤round-color:gray;}
重视：多个样式之间用分号；隔开。
3、选取器种类
1、元素选取器
p{ color:white; bac公斤round-color:gray;}
# 运用元素选取器时，页面中所有的元素将会被统一设置成某个样式
弥补： div和span元素 div 是一个块级元素 : <div>标签能够把文档分割为独立的、区别的部分。它能够用作严格的组织工具，并且不运用任何格式与其相关。<div> 才可的火花，常常在勤奋的磨石上迸发。 </div><div> 只要愿意学习，就 必定能够学会。</div> span 标签被用来组合文档中的行内元素。
<div> 只要
| 
发表于 2024-6-30 10:31:40