css学习笔记（一）

最新推荐文章于 2024-07-19 18:57:55 发布

Rnight阿布

最新推荐文章于 2024-07-19 18:57:55 发布

阅读量155

点赞数 1

分类专栏： HTML、CSS、JavaScript 文章标签： css html

本文链接：https://blog.csdn.net/m0_46394124/article/details/105289512

版权

HTML、CSS、JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

@Rnight阿布(CSS学习笔记)

css学习笔记

HTML（Hyper Text Markup Language）

超文本标记语言
①超文本：超越文本->图片、音频、视频。
②标记：标签，由标签组成的语言。
基本结构

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
</body>
</html>

①<!DOCTYPE html>。
②html:html文档的根标签。
③head:指明我们浏览器中的页签的内容或者引入外部的资源。
④title:标题标签，页签上的内容。
⑤body:体标签,指定网页中的主体内容。

注意事项
①HTML的代码元素称之为标签、节点、元素。
②子节点需要缩进。
③不区分大小写，建议小写。
④标签分为单标签（自闭标签）以及双标签（围堵标签），绝大部分成对出现的，并且可以嵌套。
⑤文件结尾是.html以及.htm
行级标签与块级标签
①行级标签：共享一行，不能设置大小（宽高） a span

<!DOCTYPE html>
<html lang="en">
<head>
	<!-- 设置编码为utf-8格式 gbk,utf-8,gb2312 -->
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<!-- 超链接,点击跳转.href为要跳转的地方.target为在哪里跳转 -->
	<!-- _self代表在当前页面跳转, _blank代表新开一个页面跳转 -->
	<a target="_blank" href="https://www.baidu.com">点我,你就能飞</a>
	<a target="_blank" href="https://www.baidu.com">点我,你就能飞</a>
	<!-- span,盒子 -->
	<span>内容1</span><span>内容2</span>
</body>
</html>

②块级标签：独占一行，可以设置大小（宽高） div

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>块级标签案例</title>
</head>
<body>
	<!-- div和span的区别就是div是块级的盒子	-->
	<!-- style代表样式(可以理解为效果),border是边框:1px solid green,1像素 实线 绿色 -->
	<div style="border:1px dashed green;width:100px;">内容1</div>
	<div style="border:1px dashed green;width:100px;">内容2</div>
	<div style="border:1px dashed green;width:100px;">内容3</div>

	<!-- 有序列表 -->
	<ol style="border:1px dashed green;width:100px;
	padding:0px;list-style-type: none;">
		<li>内容1</li>
		<li>内容2</li>
		<li>内容3</li>
	</ol>
	<!-- 无序列表 -->
	<ul style="border:1px dashed green;width:100px;
	padding:0px;list-style-type: none;">
		<li>内容1</li>
		<li>内容2</li>
		<li>内容3</li>
	</ul>
	
</body>
</html>

外边距和内边距
①外边距（margin）：指的是两个盒子的外边框相互的距离
②内边距（padding）：指的是元素内部的内容与盒子边框的距离

CSS

CSS（层叠式样式表）
修改页面节点（标签、元素）效果的语言。
CSS的三种形式
行内样式、内部样式、外部样式
语法结构
属性名：属性值在有多个属性的情况下用“；”分开（可查看上示块级标签代码理解）
CSS选择器（样式选择器用于内部样式、外部样式）
①标签选择器（元素选择器）：用标签名，影响（作用）范围是页面中所有的该标签。

a{
/*此处写a标签所需要的样式*/
}

②类选择器：用.类名，影响该类所有标签。

/*在需要的标签中命名类*/
<div class="abc"></div>
/*在内部或外部样式中写名为abc的类的样式*/
.abc{
/*此处写类名为abc的标签所需要的样式*/
}

③ID选择器：用#id名，影响该id所有标签。

/*在需要的标签中命名类*/
<div id="aaa"></div>
/*在内部或外部样式中写id为abc的标签的样式*/
#aaa{
/*此处写类id为abc的标签所需要的样式*/
}

④子代选择器（两种表示方法）：
第一个选择器>第二个选择器->影响的是第一个选择器下的子代（第一代）第二个选择器节点。

<div id="hh">
    <a href="" id="a1">
        <a href="" id="a3"></a>
    </a>
    <a href="" id="a2"></a>
</div>
#hh>a{
/*此处写id为“hh”的div标签下a1和a2标签的样式，但不能写a3的样式，因为a3包括在a2以下*/
}

第一个选择器第二个选择器->影响的是第一个选择器下的下级所有第二个选择器节点。

<div id="hh">
    <a href="" id="a1">
        <a href="" id="a3"></a>
    </a>
    <a href="" id="a2"></a>
</div>
#hh a{
/*此处写id为“hh”的div标签下所有a标签的样式，包括a3*/
}

⑤hover：伪类选择其中的一种，代表鼠标悬浮（覆盖）在元素上面的时候显示元素样式。

<div id="hh">
    <a href="" id="a1">
</div>
#hh>a:hover{
/*此处写当鼠标放在id为“a1”的a标签上时a的样式*/
}

（选择范围越大，那么他的优先级越低，选择的范围越小，那么优先级越高）
（行内样式>内部样式>外部样式）
5. 定位
①绝对定位：参考父类节点来定位（会往上找有定位属性的祖辈节点，最高到html根标签）
②相对定位：在原来存在的位置上进行调整，以原来的位置为参照来进行调整，原始的位置空间为保留（看似已经移了位置，其实实体还在原来的位置）

Rnight阿布

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css学习笔记（一）

在这里插入代码片@TOCcss学习笔记HTML（Hyper Text Markup Language）超文本标记语言①超文本：超越文本->图片、音频、视频。②标记：标签，由标签组成的语言。基本结构<!DOCTYPE html><html><head> <title></title></head&...
复制链接

扫一扫