CSS学习笔记之一

最新推荐文章于 2022-10-31 22:37:19 发布

一只java程序员

最新推荐文章于 2022-10-31 22:37:19 发布

阅读量163

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/qq_41117551/article/details/107640492

版权

5 篇文章 0 订阅

订阅专栏

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

样式规则：样式属性名:值; 样式属性名:值；
样式属性名：值1 值2 值3;

一：行内样式 :写在html标签内部，使用style属性：（不推荐)
< style=“样式规则”>
二、写在HTML的head部分内嵌样式：仅作用于当前页面

三、外部样式文件扩展为: XXX.css
注意：外部样式文件中仅写样式规则，不能写任何 HTML标签

   在HTML页面中链接外部样式文件：<head>中
	<link type="text/css" rel="stylesheet"  href="css/style-1.css"/>

行内 > 内嵌 >外部

	CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

	选择器{ 属性名:值1  值2; 属性名:值;}

	一 ：标签（html）选择器  -->默认样式规则
	标签名{样式规则}

    不用调用，直接作用在标签上

二、类选择器（class选择器) :可以作用在多个不同类型的标签上

	语法：
		.类名{样式规则}
	标签使用此样式，则在标签中写属性：
	<	class="类名"  >
	
	注意事项：
		1 一个标签可以调用 多个类样式 ： class="类1  类2  类3"
		2 定义样式在后面优于前面
		3 类样式 优于标签样式

三 ID选择器：仅修饰单个标签常用于修饰页面标签div
语法：
#ID名{样式规则}

	标签使用此样式：
	<   id="id名"  >

ID > 类 > 标签 > 默认样式

	一 分组选择器  --》多个选择器有相同样式时，可以使用分组选择器
	语法：
		选择器1,选择器2,选择器3{样式规则}

二结合选择器 --》指定某类标签使用的类样式
语法
标签名.类名{样式规则}
三后代选择器 ==》某元素后代的元素样式所有后代
语法：
父选择器子选择器{样式规则}
四子元素选择器–仅包含子元素不包含孙元素
语法：
父选择器 > 子选择器{样式规则}

五属性选择器 --》包含此属性的元素

在这里插入图片描述

六、兄弟选择器 --》兄后面所有的弟选择器的样式
语法：
兄选择器 ~ 弟选择器{样式}
七相邻兄弟选择器 – > 兄后面紧邻的弟选择器
语法：
兄选择器 + 弟选择器{样式}