css笔记一

最新推荐文章于 2024-08-10 18:05:27 发布

在看AI

最新推荐文章于 2024-08-10 18:05:27 发布

阅读量68

点赞数

文章标签： css

本文链接：https://blog.csdn.net/woshinibabaang/article/details/118240007

版权

1、CSS的概念

层叠样式表(英文全称：Cascading Style Sheets) *层叠：多个样式可以作用在同一个html的元素上，同时生效

是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

2、CSS的优势

功能强大
将内容展示和样式控制分离

降低耦合度。解耦
让分工协作更容易
提高开发效率

3、CSS的使用：CSS与html结合使用

根据定义CSS的位置不同，分为行内样式、内部样式和外部样式

3.1 行内样式

也称为内联样式

直接在标签中编写样式，通过使用标签内部的style属性；

<div style="color: red;">hello my css</div>

弊端：只能对当前的标签生效，没有做到内容和样式相分离，耦合度太高。

3.2 内部样式

定义在head标签内，通过style标签，该标签内容就是CSS代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内部样式</title>
		<style>
			div{
				color: red;
			}
		</style>
	</head>
	<body>
		<div>hello my css</div>
	</body>
</html>

3.3 外部样式

1、提前定义css资源文件

2、在head标签内，定义link标签引入外部样式文件。

lina.css文件，放在与html页面同级的css文件夹中：
div {
	color: red;
}

html页面中的引入
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="css/lina.css" />
	</head>
	<body>
		<div>hello my css</div>
	</body>
</html>

作用域的范围:外部样式表>内部样式表>行内样式表

优先级：外部样式表<内部样式表<行内样式表;

同样的样式作用在同一个标签身上：就近原则；不同样式作用在同一个标签身上:叠加生效

4、CSS语法

基本格式：由两个主要的部分构成：选择器，以及一条或多条声明:

选择器 {
		属性1:值1;
		属性2:值2;
		...
}
选择器:筛选具有相似特征的元素
属性和属性值之间用冒号分割，不同的属性之间用分号隔开。

5、CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束

/*这是CSS的注释*/
div {
	color: red;  /*文字颜色是红色*/
}

6、基本选择器：筛选具有相似特征的元素

6.1 id选择器

选择具有相同id属性值的元素，建议html页面中的id值唯一

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

PS： ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

虽然多个元素可以使用同一个id选择器控制样式，但是不推荐。如果需要同样的样式对多个标签生效，使用class选择器。

6.2 class选择器

选择具有相同的class属性值的元素。

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

PS：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

6.3 元素选择器/标签选择器

选择具有相同标签名称的元素。

定义选择器语法：标签名称{}；PS：标签名称必须是html提供好的标签。

使用标签选择器：自动使用在所有的同名的标签上

7 优先级

7.1 选择器的优先级

ID选择器 > 类选择器 > 标签选择器

当多个选择器作用在同一个标签上的时候，如果属性冲突，看优先级；如果不冲突，样式叠加生效。

7.2 样式表的优先级

行内样式 > 内部样式 >外部样式

同样，三个样式表中都有内容作用在同一个html标签的时候，如果属性冲突，看优先级；如果不冲突，样式叠加生效。

8 CSS常用样式

8.1 color :字体颜色

跟颜色相关的取值分3种：

1、颜色的单词 red blue...

2、rgb(红，绿，蓝)三色的取值范围是0-255 rgb(255,0,0)

rgba（红，绿，蓝,透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)

3、#值1值2值3 ：值的范式是00-FF 十六进制数字组成的例如：#FF0000

8.2 width height:宽高

PS：只有块状元素可以设置宽高，行级元素设置不生效。

取值方式有2种：

1：数值绝对数字单位是像素PX

2：百分比：占据父元素的比例

8.3 背景样式

8.4 文本样式

8.5 列表样式

8.6 边框样式

在看AI

关注

0
点赞
踩
0

收藏

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

1、CSS的概念层叠样式表(英文全称：Cascading Style Sheets) *层叠：多个样式可以作用在同一个html的元素上，同时生效是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。2、CSS的优势功能强大将内容展示和样式控制分离降低耦合度。解耦让分工协作更容易提高开发效率 3、CSS的使用：CSS与html结合使用根据定义CSS的位置不同，分为行内样式、内部样式和外部样式3.1 行内
复制链接

扫一扫