CSS3入门

简介: 该内容介绍了CSS3的基本概念和三种样式表导入方式:行内式、内嵌式和链入式。CSS用于分离网页内容和表现形式,常见浏览器如Chrome支持CSS。样式规则包括选择器(如标记、类和ID选择器)和属性值对。通过实例展示了不同导入方式的效果,如行内样式直接在HTML元素中设置,内嵌样式写在`<head>`标签内的`<style>`标签中,链入式则将样式保存在外部CSS文件并用`<link>`标签引用。文章还展示了标记、类和ID选择器的应用,分别影响对应的所有标记、类名或ID名。

一.CSS3的概述

1.定义:层叠样式表;d

2.意义:把内容与形式分开;html: 内容; CSS: 形式

3.浏览器:chrome

4.css 样式规则e选择器(属性 1:值,属性 2: 值;.......)

选择器区分大小写,“

5.css样式表的导入

(1)行内式

例: style="font-size:50px;font[amily:隶书;写在标记内;“

 

 

结果:

 

 

(2)内嵌式

例:<style>写在<head>内:

 

 

结果:

 

 

   (3)链入式

样式表单独保存在一个css文件中

例:<link  rel=”stylesheet”rcss" type=”text/css” href="ess /index .css”/

 

 

需要注意的是链入式的话要创建一个CCS文本

操作过程如下

 

 

二.CSS基础选择器

以下三个内容是基于链入式继续创建的

1.标记选择器

标记名:针对页面中的所有该标记有效,

 

 

以上是编写在CSS文件中

结果:

 

 

2.类选择器

类名:针对所有该类有效;

 

 

以下是编写在CSS文件中

 

 

结果:

 

 

3.id选择器

#id名:针对所有该id名有效;

 

 

以下是编写在CSS文件中

 

 

结果:

 

 

相关文章
|
1月前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
36 0
|
1月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
84 0
|
1月前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
77 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
1月前
|
人工智能 前端开发 开发者
「CSS 只要三节课」之入门
「CSS 只要三节课」之入门
25 0
|
1月前
|
前端开发 容器
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
40 2
|
1月前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
31 1
|
1月前
|
编解码 前端开发 iOS开发
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
70 1
|
1月前
|
前端开发 JavaScript 容器
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
30 1
|
1月前
|
前端开发 JavaScript UED
CSS3选择器详解 前端开发入门笔记(六)
CSS3选择器详解 前端开发入门笔记(六)
43 1
|
1月前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
32 1