HTML基本理解day8 | 青训营笔记

简介: HTML基本理解day8 | 青训营笔记

1.5.2 行内样式表


行内样式表(内联样式表 是在元素标签内部的 style 属性中设定CSS 样式 适合于修改简单样式

<div style="color: red; font-size:12px;">青春不常在,抓紧谈恋爱</div>
复制代码

style其实就是标签的属性,在双引号中间,写法要符合CSS规范,可以控制当前的标签设置样式

由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用行内样式表设定CSS,通常也被称为行内式引入


1.5.3外部样式表


实际开发都是外部样式表.适合于样式比较多的情况.核心是样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用

引入外部样式表分为两步:

1.新建一个后缀名为css的样式文件,把所有CSS代码都放入此文件中 2.在HTML页面中,使用标签引入这个文件。<link rel="stylesheet" href="css文件路径">

1.生成标签直接输入标签名按tab键即可 比如 div然后tab键,就可以生成<div></div>

2.如果想要生成多个相同标签 加上就可以了比如div3就可以快速生成3个div

3.如果有父子级关系的标签,可以用>比如u>li就可以了

4.如果有兄弟关系的标签,用+就可以了比如div+p

5.如果生成带有类名或者id名字的,直接写demo或者#twotab键就可以了

6.如果生成的div类名是有顺序的,可以用自增符号$

7.如果想要在生成的标签内部写内容可以用{)表示


CSS的复合选择器


在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上基本选择器进行组合形成的。

复合选择器可以更准确、更高效的选择目标元素(标签)

复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的

常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等


1.1后代选择器(重要)


后代选择器又称为包含选择器 可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在 后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。语法:元素1元素2{样式声明}

上述语法表示选择元素1里面的所有元素2(后代元素)。 例如:ul li { 样式声明 } /* 选择 ul 里面所有的li标签元素*/

元素1和元素2中间用空格隔开

元素1是父级,元素2是子级,最终选择的是元素2

元素2可以是儿子,也可以是孙子等

只要是元素1的后代即可,元素1和元素2可以是任意基础选择器

相关文章
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
|
9天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。
|
1月前
|
JavaScript 前端开发 编译器
编程笔记 html5&css&js 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 076 Javascript 表达式
编程笔记 html5&css&js 076 Javascript 表达式
|
1月前
|
存储 JavaScript 前端开发
编程笔记 html5&css&js 075 Javascript 常量和变量
编程笔记 html5&css&js 075 Javascript 常量和变量
|
1月前
|
JavaScript 前端开发 程序员
编程笔记 html5&css&js 074 Javascript 运算符
编程笔记 html5&css&js 074 Javascript 运算符
|
1月前
|
JavaScript 前端开发 Java
编程笔记 html5&css&js 073 JavaScript Object数据类型
编程笔记 html5&css&js 073 JavaScript Object数据类型
|
1月前
|
存储 JavaScript 前端开发
编程笔记 html5&css&js 072 JavaScript BigInt数据类型
编程笔记 html5&css&js 072 JavaScript BigInt数据类型