CSS的基本语法

一.CSS的基本语法

1.1CSS的基本语法结构
html 复制代码
h1 {
	font-size:12px;
	color:#F00;
}

h1 选择器

font-size:12px 声明

font-size 属性

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

1.2style标签
html 复制代码
<style type="text/css">
h1 {
	font-size:12px;
	color:#F00;
}
</style>

二.HTML中引入CSS样式

2.1行内样式

使用style属性引入CSS样式

html 复制代码
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
2.2内部样式表

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

html 复制代码
<style>
        h1{color: green; }
</style>
2.3外部样式表

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

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

2.3.1链接式
html 复制代码
<head>
  ......
<link href="style.css" rel="stylesheet" type="text/css" />
......
</head>

href 文件路径

rel 使用外部样式表、

type 文件类型

2.3.2导入式
html 复制代码
<head>
......
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

三.CSS3基本选择器

3.1标签选择器

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

html 复制代码
p { font-size:16px;}

p 标签名称

font-size 属性

16px 值

3.2类选择器
html 复制代码
.class { font-size:16px;

class 类名称

font-size 属性

16px 值

3.3ID选择器
html 复制代码
#id { font-size:16px;

id id名称

font-size 属性

16px 值

注意:

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

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

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

四.CSS的高级选择器

4.1层次选择器
css 复制代码
后代选择器
body p{  background: red;  }

注意:

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

css 复制代码
 子选择器
 body>p{  background: pink;  }
css 复制代码
相邻兄弟选择器
.active+p {  background: green;  }
css 复制代码
通用兄弟选择器
.active~p{  background: yellow;  }
4.2结构伪类选择器

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

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

示例

css 复制代码
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]选择器:
css 复制代码
 a[id] { background: yellow; }

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

4.3.2 E[attr=val]属性选择器:
css 复制代码
 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]属性选择器
css 复制代码
 a[href^=http] { background: red; }

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

相关推荐
reembarkation3 分钟前
vue 右键菜单的实现
前端·javascript·vue.js
00后程序员张2 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
.格子衫.6 小时前
Spring Boot 原理篇
java·spring boot·后端
多云几多6 小时前
Yudao单体项目 springboot Admin安全验证开启
java·spring boot·spring·springbootadmin
2301_768350238 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
Jabes.yang8 小时前
Java求职面试实战:从Spring Boot到微服务架构的技术探讨
java·数据库·spring boot·微服务·面试·消息队列·互联网大厂
聪明的笨猪猪8 小时前
Java Redis “高可用 — 主从复制”面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
兮动人8 小时前
Spring Bean耗时分析工具
java·后端·spring·bean耗时分析工具
MESSIR228 小时前
Spring IOC(控制反转)中常用注解
java·spring
摇滚侠9 小时前
Spring Boot 3零基础教程,Demo小结,笔记04
java·spring boot·笔记