HTML、CSS【复习1】

最新推荐文章于 2023-11-05 03:25:47 发布

wokenshin

最新推荐文章于 2023-11-05 03:25:47 发布

阅读量162

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/wokenshin/article/details/88822449

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

内容可从W3School中学习
或者笔记地址：Web前端开发之HTML+CSS精英课堂【渡一教育】 https://ke.qq.com/course/231570#term_id=100273162
在这里插入图片描述
前端基本学习路径
HTML：结构
CSS ：样式
JavaScript：行为

<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>我是标题</title>
		head里面放的内容类似于“人的思想信息”
	</head>

	<body>
		body里面放的内容就是显示的内容
	</body>

	href 锚点「超链接」

	form 表单标签
	表单里面还 含有 各种 输入框， <select> <option></option><select>
</html>

补充：上面的 lang属性是为了让爬虫获取信息的，可以用于SEO优化，html中还有其他SEO优化方式。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190327161818799.png?x-oss-process=imag 浏览器内核

CSS
CSS
1.可以在HTML的行间标签中设置
2.可以在head标签中设置
3.可以在head标签中引入
CSSDemo
可以在HTML的head标签中通过link标签引入css样式，css文件中可以通过#id的形式找到html中的标签并设置样式。
如下：
CSSDemo

<html lang="en">

<head>
<link rel="stylesheet" type="text/css" href="hello.css">
</head>

<body>
	<!-- 通过css选择器来对指定的标签进行修饰 -->
	<!-- 1.下面通过id 让css文件定位并修身的方式叫做：id选择器 在CSS中表现为: #idName{...}-->
	<div id="only1">hinato</div>
	
	<!-- 2.class选择器 在CSS中表现为 .className{...}-->
	<div class="demo">class选择器</div>
	<!-- 3.标签选择器 直接在css文件中用对应的标签描述即可 在CSS中表现为: div{}-->
	<span>123</span>
	<div>
	<span>321</span>
	</div>
	
	<!--4.通配符选择器 在CSS中表现为: *{效果作用与html中所有的标签} -->
</body>

</html>

如下图:

一个标签也可以同时被多个class修饰，之间用空格隔开即可
如下：
类选择器组合修饰
CSS选择器优先级【当各类选择器有多个存在时】
1.id选择器
2.class类选择器 [属性选择器和 class选择器优先级一样]
3.标签选择器
4.*通配符选择器

行间样式>id选择器【另外当使用 “行间样式” 直接在标签中使用css时，有限级>id选择器】

扩展：上面的权重值并不是十进制，而是 256进制
如标签选中1 和通配符权重0，之间相差256

父子选择器，只要是父子关系即可，标签的包含关系，或者类的包含关系、id的包含关系都可以如下

CSS标签好友一些，需要学习的时候请另行查阅。这里不做补充（其实是我傻逼了，忘记保存笔记了。。。）

在css样式中进行多条件修饰的时候，可以通过【权重相加】的方式来进行比较，判断。修饰的优先级

wokenshin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML、CSS【复习1】

内容可从W3School中学习<html lang="en"> <head> <meta charset="utf-8"> <title>我是标题</title> head里面放的内容类似于“人的思想信息” </head> <body> body里面放的内容就是显示的内容 </bo...
复制链接

扫一扫