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 C++
震惊!!!html竟然被...... 一篇博客让你从0开始熟悉并掌握html 超详细html笔记 全网独一份
本文是一份超详细的HTML学习笔记,从基础认知开始,介绍了网页的构成、五大浏览器、web标准、HTML/CSS/JavaScript的区别,然后详细讲解了HTML的概念、骨架结构、常用快捷键、注释、标签结构和关系。接着,通过大量实例深入探讨了HTML的各种标签,包括排版标签、文本格式化标签、媒体标签、链接标签、列表标签、表格标签、表单标签、语义化标签和字符实体,旨在帮助读者从0开始熟悉并掌握HTML。
35 2
震惊!!!html竟然被...... 一篇博客让你从0开始熟悉并掌握html 超详细html笔记 全网独一份
|
4月前
|
开发者
无法拖拽选中文字的在线电子书的做笔记方法 —— html文本提取大法
无法拖拽选中文字的在线电子书的做笔记方法 —— html文本提取大法
37 0
|
6月前
|
缓存 前端开发 JavaScript
HTML设计最新笔记
HTML设计最新笔记
36 1
|
5月前
|
Python
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记2)
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记2)
|
5月前
|
Python
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记)
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记)
|
6月前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
63 1
|
6月前
|
移动开发 前端开发 搜索推荐
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
252 0
|
13天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
36 1
[HTML、CSS]细节与使用经验
|
15天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
28 1
[HTML、CSS]知识点