谢罪：今天起晚了= =！

文章目录

- 什么CSS？
- css样式规则
- CSS核心基础
- - 行内式也称为内联样式
  - 内嵌式
- 链入式
- 导入式
选择器
- 标记选择器
- 类选择器
- id选择器
- 通配符选择器

什么CSS？

CSS为层叠样式表是修饰HTML用的。
当使用HTML制作网页时，可以使用标记的属性对网页进行修饰，但是存在很大的不足。如果希望网页美观大方，并且升级轻松，维护方便，就需要使用CSS，实现结构与表现得分离。

css样式规则

选择器{属性：属性值；}（是键值对之间得关系）

p{font-size:18px;color:red;}

CSS核心基础

要想使用CSS修饰网页，就需要在HTML文档引入CSS样式表。CSS提供了四种引入方式。

行内式也称为内联样式

是通过标记的style属性来设置元素的格式。
<标记名 style = “属性1：属性值；”>内容</标记名>
该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内式。
其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标记及嵌套在其中的子标记起作用。
一般是在临时修改某个变量时起作用。

内嵌式

ps:
内嵌式只对其所在的HTML有效。
浏览器时从上到下解析代码的，把CSS代码放在头部便于提前被下载和解析。
同时内嵌式适于单个页面使用，如果是多个页面的话内嵌式不适用于重用形式

<head>
<style type = "text/css">选择器{属性:属性值1;}
</style>
</head>

内嵌式
实例

<h>
<t>sdfsf</t>
<s>
p{}
h1{}
</s>
</h>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS内嵌式</title>
<style type = "text/css">
h2{text = align:center;}
p{font-size:16px; color :red; text-decoration:underline;}
</style>
</head>
<body>
<h2>内嵌式css样式</h2>
<p>使用style标记可定义内嵌式css样式表， style标记一般位于head头部标记中，title标记之后。</p>
<p>青岛农业大学</p>
</body>
</html>

链入式

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中。

<head>
<link href = "CSS文件的路径" type = "text/css" rel = "stylesheet" />
</head>

PS：一定要指定link标记的三个属性！！！
href：
定义外部链接的url 可以是相对路径，也可以是绝对路径。
type:
定义链接文档的类型，在这里要指定为**“text/css”**表示链接的外部问件为CSS样式表。
牢记：：type = “text/css”
rel：
定义当前文档和被链接文档之间的关系。
表示被链接的文档是一个样式表文件。
案例演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链入式演示</title>
<link href="css/lianrush.css" type = "text/css" rel="stylesheet"/></head><body>
<h1>链入式22222</h1>
<p>Textssssss</p>
</body>
</html>

h1{text-align:center;}
p{font-size:16px;color:red;}

导入式

导入式跟链入式基本相同，但两者的加载时间和顺序不同。
当一个页面被加载时，<link/>标记引用的样式表将同时加载，而@import引用的css样式表会等到页面全部下载完后而被加载。
这样的话，当用户的网速比较慢时，会先显示没有CSS修饰的页面。这样用户体验会变差，顾大多数选择链入式。

选择器

标记选择器

语法格式

优点：能快速为页面中同类型的标记统一样式。
缺点：不能设置差异化样式= = 。

类选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>类选择器</title>
<style type="text/css">
.red{color:red}
.green{color:green}
.font22{font-size:22px}
p{text-decoration:underline;font-family:"微软雅黑";}
</style>
</head>
<body>
<h2 class = "red">标题文本</h2>
<p class = "green font22">段落一文本内容</p>
<p class = "red font22">段落二文本内容</p>
<p>段落三文本内容</p>
</body>
</html>

id选择器

id选择器使用“#”进行标识，后面紧跟id名。
其实跟class的作用差不多.只是要变成#,并且
id=“font-24”.
但要注意id选择器只能同时定义一个效果。
同一个id不能多次使用，但浏览器不报错，意义呢？

通配符选择器

通配符选择器用*号表示，它是所有选择器中作用最广的，能匹配所有的元素。

*{ }

范围最广，凡是设置都生效，反而降低了代码的执行速度。

CSS样式中的选择器严格区分大小写，属性和值不区分大小写。css中代码中的空格是不被解析的

第四章 JavaWeb CSS入门核心基础基础形式 + 选择器相关推荐

第一章 matlab 学习入门之matlab基础
matlab系列文章目录第一章 matlab 学习入门之matlab基础在这一章会学习到: 数据类型(数值,字符串,结构,单元数组,函数句柄,映射容器) 运算符与运算(算术运算符,关系运算符,逻辑 ...
第三章 matlab学习入门之编程基础
系列文章目录第三章 matlab学习入门之编程基础在这一章,你会学到的知识: 变量与语句: 程序控制: M文件: 脚本: 函数: 变量检测: 程序调试: 文章目录系列文章目录前言一.变量与语 ...
第四章 Cesium学习入门之加载离线影像图（tif）
从0开始的Cesium 第一章 Cesium学习入门之搭建Vite+Vue3+Cesium开发环境第二章 Cesium学习入门之搭建Cesium界面预览和小控件隐藏第三章 Cesium学习入门之地 ...
【PTA｜Python】浙大版《Python 程序设计》题目集：第四章（适合Pythno新手的基础练习题集）
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计 ...
计算机硬件技术基础第四章ppt,管理N计算机硬件技术基础第4章.ppt
资料来自网络,请保护知识产权,请您下载后勿作商用,只可学习交流使用.第4章五.DVD驱动器 DVD光盘( Digital Video Disk) ①用于存放MPEG-2格式的数字视盘而诞生. ②DV ...
python编程案例教程第四章_Python编程入门-第四章流程控制 -学习笔记
第四章流程控制一.布尔逻辑 *在Python中,用True和False表示真值.一般使用4个主要的逻辑运算符来组合形成布尔值:not\and\or\==. 如: False==False #Tru ...
html5触边反弹,第四章课件.PPT_数字电子技术基础（ppt课件）_ppt_大学课件预览_高等教育资讯网...
第 4章触发器电路授课计划教学内容教学小结一.授课计划 1.教学目标 1,熟练掌握基本 RS触发器的工作原理, 逻辑功能, 及钟控 RS触发器, JK触发器, D触发器的逻辑功能, 时间波形 ...
【C语言笔记初级篇】第四章：数组入门
目录 (1)一维数组 A:数组的创建 B:数组初始化 C:一维数组的使用 D:一维数组在内存中的存储 (2)二维数组 A:二维数组的创建 B:二维数组的初始化 C:二维数组的使用 D:二维数组的存储方 ...
python从入门到实践答案第四章_python从入门到实践课后习题第四章
""" 4-1 比萨:想出至少三种你喜欢的比萨,将其名称存储在一个列表中,再使用for循环将每种比萨的名称都打印出来. 修改这个 for 循环,使其打印包含比萨名称的句子 ...

第四章 JavaWeb CSS入门核心基础基础形式 + 选择器

文章目录

什么CSS？

css样式规则

CSS核心基础

行内式也称为内联样式

内嵌式

链入式

导入式

选择器

标记选择器

类选择器

id选择器

通配符选择器

第四章 JavaWeb CSS入门核心基础基础形式 + 选择器相关推荐

最新文章

热门文章

第四章 JavaWeb CSS入门 核心基础 基础形式 + 选择器

文章目录

什么CSS？

css样式规则

CSS核心基础

行内式也称为内联样式

内嵌式

链入式

导入式

选择器

标记选择器

类选择器

id选择器

通配符选择器

第四章 JavaWeb CSS入门 核心基础 基础形式 + 选择器相关推荐

最新文章

热门文章

第四章 JavaWeb CSS入门核心基础基础形式 + 选择器

第四章 JavaWeb CSS入门核心基础基础形式 + 选择器相关推荐