初识CSS3

最新推荐文章于 2023-04-14 15:58:44 发布

三宝之莘莘学子

最新推荐文章于 2023-04-14 15:58:44 发布

阅读量254

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42259575/article/details/88951462

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS全称层叠样式表，通常又称风格样式表，它是用来进行网页风格设计的。
CSS在网页中的应用：
可以统一的控制HTML中各标签的显示属性。
CSS的优势：
》内容与表现分离
》表现的统一
》丰富的样式
》减少网页的代码量
》运用独立于页面的CSS
CSS的语法规则和结构：
》由两部分构成，即选择器和声明
》声明必须放在{}中，并且声明可以是一条或多条
》每条声明由一个属性和值组成，属性和值用冒号分开，每条语句以英文分号结尾
示例：
h1{
font-size:12px;
color:#f00;
}
说明：h1表示选择器，font-size:12px;color:#f00;表示两条声明。

在HTML中通过使用<style>标签引入CSS样式，此标签位于<head>标签中
在HTML中引入CSS样式的方法：
行内样式表、内部样式表、外部样式表

》行内样式表：
直接使用style属性设置CSS样式
示例：
<body>
<h1 style="color: red">行内样式表</h1>
<p style="font-size: 14px;color: green;">
直接在HTML标签中设置的样式
</p>
</body>

》内部样式表（不利于多页面间共享复用代码，以及页面的维护）
将CSS代码写在 <head>的<style>标签中，与HTML内容位于同一个HTML文件中。
示例：
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<style>
h2{
color: green;
font-size: 40px;
}
</style>
</head>
<body>
<h2>内部样式表</h2>
</body>

》外部样式表
把CSS代码保存为一个单独的样式表文件（.CSS），在页面中引用外部样式表即可。
》引用外部表的方式：
链接式、导入式

》链接式：
使用<link/>标签链接外部样式表，<link/>标签要放到<head>标签内。
示例：
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<link href="css/head.css" rel="stylesheet" type="text/css"/>
   
</head>

》导入式：
使用@import导入外部样式表，导入样式表的语句必须放在<style>标签中，而<style>标签必须放在<head>标签内。
示例：
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<style>
@import url("css/head.css");
</style>
</head>

   链接式与导入式的区别：
   》<link/>标签属于XHTML范畴，而@import是CSS2.1中独有的。
   》<link/>链接的CSS，浏览网页时，会先加载样式，再进行编译，即使网速再慢，也与用户预期的效果一致
   》@import当网速较慢时，会先显示没有布局的页面，用户体验较差。

   优先级：(就近原则)
   行内样式表>内部样式表>外部样式表

CSS3的选择器：
CSS3的基本选择器、CSS3的高级选择器

》CSS3的基本选择器
标签选择器、类选择器、ID选择器
》标签选择器
<h1>~<h6>,<p>等标签
》类选择器
类选择器的名称可以由用户定义，必须符合CSS规范，属性和值跟标签选择器一样。语法如下：
.class{font-size 20px}
示例：
在HTML文件中：
<h1 class="red">
类选择器
</h1>
在CSS文件中：
.red{
font-size: 20px;
color: red;
}
注意：类选择器在同一个页面中可以频繁地使用，应用起来非常方便。
》ID选择器
ID选择器只能在HTML页面中使用一次，因而他的针对性更强。
示例：
在HTML文件中：
<h1 id="first">
id选择器1
</h1>
<h1 id="second">
id选择器2
</h1>
在CSS文件中：
#first{
font-size: 20px;
color: green;
}
#second{
font-size: 20px;
color: gold;
}

三种基本选择器的优先级：ID选择器>class类选择器>标签选择器
》CSS3的高级选择器
层次选择器、结构伪类选择器、属性选择器
》层次选择器
》E F ----后代选择器 ----选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
作用：可以选择某元素的后代元素
》E>F ----子选择器 ----选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
作用：只能选择某元素的子元素
》E+F ----相邻兄弟选择器 ----选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
作用：可以选择紧接在另一个元素后面的元素
》E-F ----通用兄弟后代选择器 ----选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
作用：可以选择某元素后面的所有兄弟元素
》结构伪类选择器

》属性选择器

三宝之莘莘学子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初识CSS3

CSS全称层叠样式表，通常又称风格样式表，它是用来进行网页风格设计的。CSS在网页中的应用：可以统一的控制HTML中各标签的显示属性。CSS的优势：》内容与表现分离》表现的统一》丰富的样式》减少网页的代码量》运用独立于页面的CSSCSS的语法规则和结构：》由两部分构成，即选择器和声明》声明必须放在{}中，并且声明可以是一条或多条》每条声明由一个属性和值组成...
复制链接

扫一扫

专栏目录