CSS入门、基本选择器和组合选择器

CSS的基本使用
- 定义
- 注释
- 样式
  - 行内样式
  - 内部样式
  - 外部样式
- 优先级

<head><meta charset="utf-8"><title>CSS的基本使用</title><style type="text/css">/* 设置所有的h2标签为棕色*/h2{color: brown;}</style><link rel="stylesheet" type="text/css" href="css/style.css"></head><body><!--  CSS的基本使用一、CSS的定义选择器名{属性名:属性值;属性名:属性值;属性名:属性值;...}注意点：1.声明需要使用{}括起来，每个声明以分号;结尾2.一行建议一个声明3.如果样式的属性值由多个单词组成，则用引号引起来二、CSS的注释/* 注释内容 */三、CSS的三种使用方式1.行内样式直接写在标签上的样式，在标签上通过style属性定义的样式2.内部样式定义在style标签中的样式，style标签一般设置在head标签中3.外部样式定义在外部的css文件中，通过link标签引入<head><link rel="stylesheet" type="text/css" href="css文件的路径"></head>   注：多重样式时，越精准越优先，行内>内部>外部--><h2>Hello World你好 世界</h2><h2 style="color: aqua;font-family: 楷体;">Hello World你好 世界</h2></body>

CSS的基本选择器
- 通用选择器
- 元素选择器
- id选择器
- 类选择器
- 分组选择器

<head><meta charset="utf-8"><title>基本选择器</title><style type="text/css">/* 通用选择器 */*{color: #aa00ff;}/* 元素选择器 */div{font-size: 30px;}/* id选择器 */#p1{background-color: coral;}/* 类选择器 */.cls1{font-family: 楷体;}/* 分组选择器 */#p1,.cls1{text-decoration: line-through;}</style></head><body><!--  CSS基本选择器1.通用选择器 **{属性名:属性值;...}2.元素选择器元素名/标签名{属性名:属性值;...}3.ID选择器 ##id属性值{属性名:属性值;...}4.类选择器 ..class属性值{属性名:属性值;...}5.分组选择器选择器1,选择器2,选择器3,...{属性名:属性值;...}注意:CSS样式的优先级,是根据选择器的精确度/权重来决定的元素选择器: 1类选择器:   10id选择器:   100内联样式:   1000--><div>div1</div><div>div2</div><p id="p1">段落</p><span class="cls1">这是一个span</span><br><font>这是一个font</font></body>

CSS的组合选择器
- 后代选择器
- 子代选择器
- 相邻兄弟选择器
- 普通兄弟选择器

<head><meta charset="utf-8"><title>CSS组合选择器</title><style type="text/css">/* 后代选择器 */.food li{border: #A52A2A solid 1px ;}/* 子代选择器 */.food2 > li{border: #555500 dotted 1px ;}/* 相邻兄弟选择器 */#div2 + div{background-color: #00ff00;}/* 普通兄弟选择器 */#HW ~ div{background-color: #00ff00;}</style></head><body><!-- 组合选择器后代选择器选择指定元素的所有指定后代元素，以空格隔开选择器 指定元素{属性名:属性值;...}子代选择器选择指定元素的第一代子元素，以加号+隔开选择器 > 指定元素{属性名:属性值;...}相邻兄弟选择器选择指定元素的下一个指定元素(只会找一个)，两者有相同的父元素，以加号+隔开选择器 + 指定元素{属性名:属性值;...}普通兄弟选择器选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号~隔开选择器 ~ 指定元素{属性名:属性值;...}--><!-- 获取class属性值是food的元素的所有li列表项 --><ul class="food"><li>水果<ul><li>香蕉</li><li>苹果</li><li>梨</li></ul></li><li><ul><li>白菜</li><li>油菜</li><li>卷心菜</li></ul></li></ul><hr><ul class="food2"><li>水果<ul><li>香蕉</li><li>苹果</li><li>梨</li></ul></li><li><ul><li>白菜</li><li>油菜</li><li>卷心菜</li></ul></li></ul><hr><div>相邻兄弟选择器1</div><div id="div2">相邻兄弟选择器2</div><!-- <p>如果相邻有其他非指定元素元素，比如这个p标签，div相邻兄弟选择器就找不到</p> --><div>被div2给绿了</div><div>相邻兄弟选择器4</div><hr><div>兄弟1</div><div id="HW">兄弟2</div><div>底下的兄弟都被兄弟2给绿了</div><div>兄弟3</div><div>兄弟4</div><div>兄弟5</div></body>

CSS入门、基本选择器和组合选择器相关推荐

CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)...
使用CSS3 选择器--笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
前端：CSS/09/行内框架，CSS简介，CSS选择器，组合选择器，CSS注释，CSS尺寸属性，CSS字体属性，CSS文本属性
内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...
标签名选择器、id选择器、class类型选择器、组合选择器
标签名选择器标签名选择器格式: 标签名{ 属性:值: } 标签名选择器,可以决定那些标签被动的使用这个样式需求: 在所有div标签上修改字体颜色为蓝色,字体大小为30个像素,边框为1个像素黄色实线 ...
第四章 JavaWeb CSS入门核心基础基础形式 + 选择器
谢罪:今天起晚了= =! 文章目录什么CSS? css样式规则 CSS核心基础行内式也称为内联样式内嵌式链入式导入式选择器标记选择器类选择器 id选择器通配符选择器什么CSS? C ...
CSS中的选择器之类选择器和id选择器
1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...
CSS入门（css 基本教程）
CSS入门 CSS简介 v 概念 Cascading Style Sheets ,层叠样式表 v 功能 v 基本语法 CSS的定义是由三个部分构成:选择符(se ...
CSS入门之引用、选择器、属性（六分之三）
CSS 入门教程六分之三篇没办法,我直播教小伙伴CSS入门,属性讲完,准备说定位的时候,他们就喊停,hold不住了...所以先写到六分之三,23333333 要点解释引用如何使用定义的CSS样 ...
html选择器并列,CSS 中的选择器（二）- 组合选择器
CSS中组合选择器,算是基础选择器的升级版, 也就是组合去使用基础选择器的意思,因为配合一些 CSS 的专有语法,所以初学者比较难看懂, 下面枚举几个常用的选择器作为例子,略谈一下CSS的组合选择器的 ...
[04-01]css组合选择器
/* 私人笔记 */ 组合选择器:把基本选择器通过特殊符号串在一起,可以带来一些特殊的意义: 1.源码 <!DOCTYPE html> <html lang="zh&quo ...

CSS入门、基本选择器和组合选择器

CSS入门、基本选择器和组合选择器相关推荐

最新文章

热门文章