CSS快速入门

1.CSS语法格式---简单写法
2.css分离写法
3.选择器
- 作用：选择页面上的某一个或者每一个元素
- 3.1 基本选择器
- - 1.标签选择器：选择一类标签标签{}
  - 2.类选择器class：选择所有class属性一致的标签,跨标签 .类名{}
  - 3.id选择器:全局唯一！#id名{}
- 优先级：id>class>标签
- 3.2 层次选择器
- - 1.后代选择器:在某个元素的后面祖爷爷爷爷爸爸你
  - 2.子选择器一代儿子
  - 3.相邻兄弟选择器同辈
  - 4.通用选择器
- 3.3 结构伪类选择器
- 3.4 属性选择器

1.CSS语法格式—简单写法

下面展示一些 内联代码片。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--规范 <style>可以编写css代码.每一个声明 最好使用分号结尾语法:选择器{声明1;声明2;}--><style>h1{color: brown;}</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

2.css分离写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--    链接指定到 href="css/style.css"--><link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

style.css文件

h1{color: blueviolet;
}

3.选择器

作用：选择页面上的某一个或者每一个元素

3.1 基本选择器

1.标签选择器：选择一类标签标签{}

2.类选择器class：选择所有class属性一致的标签,跨标签 .类名{}

3.id选择器:全局唯一！#id名{}

优先级：id>class>标签

3.2 层次选择器

1.后代选择器:在某个元素的后面祖爷爷爷爷爸爸你

/*后代选择器 在某个元素的后面 祖爷爷 爷爷 爸爸 我  */
body p{background:red;
}

2.子选择器一代儿子

/* 子选择器 指向下一个 */
body>p{background:red;
}

3.相邻兄弟选择器同辈

/*相邻兄弟选择器 只有一个，相邻（向下） */
body + p{background:red;
}

4.通用选择器

/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素  */
body ~ p{background:red;
}

3.3 结构伪类选择器

3.4 属性选择器

前端基础 csss3相关推荐

html表格联动,html前端基础：table和select操作
html前端基础:table和select操作发布时间:2020-05-13 09:58:10 来源:亿速云阅读:196 作者:Leah 这篇文章主要为大家详细介绍html前端基础中有关table ...
element ui 图片控件排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统开源项目推荐 1.什么是ElementUI 官网:https://el ...
boost log 能不能循环覆盖_前端基础进阶（十四）：深入核心，详解事件循环机制...
Event Loop JavaScript的学习零散而庞杂,很多时候我们学到了一些东西,但是却没办法感受到进步!甚至过了不久,就把学到的东西给忘了.为了解决自己的这个困扰,在学习的过程中,我一直在试图 ...
gif透明背景动画_前端基础系列之bmp、jpg、png、gif、svg常用图片格式浅谈（二）...
IT客栈作者:大腰子 bmp.jpg.png.gif.svg常用图片格式之前为大家介绍了几种WEB前端常用的图片格式,对比了它们的特点,参见<前端基础系列之bmp.jpg.png.gif.s ...
前端基础知识整理汇总（中）
前端基础知识整理汇总(中) Call, bind, apply实现 // call Function.prototype.myCall = function (context) {context = ...
前端基础知识整理汇总（上）
前端基础知识整理汇总(上) HTML页面的生命周期 HTML页面的生命周期有以下三个重要事件: 1.DOMContentLoaded -- 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是 ...
jquery function_前端基础进阶（十三）详细图解jQuery扩展jQuery插件
UI 鉴赏早几年学习前端,大家都非常热衷于研究jQuery源码. 我至今还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,"原来JavaScript居然可以 ...
前端基础-HTML的的标签详解
阅读目录一.head内常用标签二. HTML语义化三. 字符实体四. h系列标签五. p标签六. img标签七. a标签八. 列表标签九. table标签十. form标签一. ...
前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器二. 后代选择器.子元素选择器三. 兄弟选择器四. 交集选择器与并集选择器五. 序列选择器六. 属性选择器七. 伪类选择器八. 伪元素选择器九. CSS三大特性一. ...

前端基础 csss3

CSS快速入门

1.CSS语法格式—简单写法

2.css分离写法

3.选择器

作用：选择页面上的某一个或者每一个元素

3.1 基本选择器

1.标签选择器：选择一类标签标签{}

2.类选择器class：选择所有class属性一致的标签,跨标签 .类名{}

3.id选择器:全局唯一！#id名{}

优先级：id>class>标签

3.2 层次选择器

1.后代选择器:在某个元素的后面祖爷爷爷爷爸爸你

2.子选择器一代儿子

3.相邻兄弟选择器同辈

4.通用选择器

3.3 结构伪类选择器

3.4 属性选择器

前端基础 csss3相关推荐

最新文章

热门文章

前端基础 csss3

CSS快速入门

1.CSS语法格式—简单写法

2.css分离写法

3.选择器

作用：选择页面上的某一个或者每一个元素

3.1 基本选择器

1.标签选择器：选择一类标签 标签{}

2.类选择器class： 选择所有class属性一致的标签,跨标签 .类名{}

3.id选择器:全局唯一！#id名{}

优先级：id>class>标签

3.2 层次选择器

1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你

2.子选择器 一代儿子

3.相邻兄弟选择器 同辈

4.通用选择器

3.3 结构伪类选择器

3.4 属性选择器

前端基础 csss3相关推荐

最新文章

热门文章

1.标签选择器：选择一类标签标签{}

2.类选择器class：选择所有class属性一致的标签,跨标签 .类名{}

1.后代选择器:在某个元素的后面祖爷爷爷爷爸爸你

2.子选择器一代儿子

3.相邻兄弟选择器同辈