CSS的基本语法

nice66660

于 2024-09-05 11:59:45 发布

阅读量297

点赞数 17

文章标签： css 前端 java visual studio code

本文链接：https://blog.csdn.net/nice66660/article/details/141927325

版权

一.CSS的基本语法

1.1CSS的基本语法结构

h1 {
	font-size:12px;
	color:#F00;
}

h1 选择器

font-size:12px 声明

font-size 属性

CSS的最后一条声明后的“;” 可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上

1.2style标签

<style type="text/css">
h1 {
	font-size:12px;
	color:#F00;
}
</style>

二.HTML中引入CSS样式

2.1行内样式

使用style属性引入CSS样式

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

2.2内部样式表

CSS代码写在<head>的<style>标签中

<style>
        h1{color: green; }
</style>

2.3外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表，有两种方式

2.3.1链接式

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

href 文件路径

rel 使用外部样式表、

type 文件类型

2.3.2导入式

<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

三.CSS3基本选择器

3.1标签选择器

HTML标签作为标签选择器的名称<h1>…<h6>、<p>、<img/>

p { font-size:16px;}

p 标签名称

font-size 属性

16px 值

3.2类选择器

.class { font-size:16px;

class 类名称

font-size 属性

16px 值

3.3ID选择器

#id { font-size:16px;

id id名称

font-size 属性

16px 值

注意：

标签选择器直接应用于HTML标签

类选择器可在页面中多次使用

ID选择器在同一个页面中只能使用一次

四.CSS的高级选择器

4.1层次选择器

在这里插入图片描述

后代选择器
body p{  background: red;  }

注意:

后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入

 子选择器
 body>p{  background: pink;  }

相邻兄弟选择器
.active+p {  background: green;  }

通用兄弟选择器
.active~p{  background: yellow;  }

4.2结构伪类选择器

在这里插入图片描述

前三个是一类，在父级里从一个元素开始查找，不分类型，不具有指定元素类型的能力

后三个是一类，在父级里先看类型，再看位置，具有指定元素类型的能力

示例

ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}

分别是：

选择ul下的第一个子元素，并且是li，变为红色背景

选择ul下的最后一个子元素，并且是li，变为绿色背景

选择到父元素的第一个p元素，变成黄色背景

选择到父元素的第二个p元素，变成蓝色背景

4.3属性选择器

在这里插入图片描述

4.3.1 E[attr]选择器：

 a[id] { background: yellow; }

含有id属性的a元素，设置背景元素使黄色

4.3.2 E[attr=val]属性选择器：

 a[id=first] { background: red; }

含有id属性，并且id属性值为first的a元素，背景颜色变成红色

E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中

4.3.3 E[attr*=val]属性选择器

所有的a元素都有class属性，并且属性中都有links字符串，把其背景颜色设成红色

4.3.4 E[attr$=val]属性选择器

 a[href$=png] { background: red; }

含有href属性，并且属性值是png字符结尾的，背景颜色变成红色

4.3.5 E[attr^=val]属性选择器

 a[href^=http] { background: red; }

含有href属性，并且属性值是http字符开头的，背景颜色变成红色

nice66660

关注

17
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS的基本语法

可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;所有的a元素都有class属性，并且属性中都有links字符串，把其背景颜色设成红色。前三个是一类，在父级里从一个元素开始查找，不分类型，不具有指定元素类型的能力。后三个是一类，在父级里先看类型，再看位置，具有指定元素类型的能力。含有id属性，并且id属性值为first的a元素，背景颜色变成红色。含有href属性，并且属性值是http字符开头的，背景颜色变成红色。选择ul下的第一个子元素，并且是li，变为红色背景。
复制链接

扫一扫