CSS入门-一一网

CSS的概念

Cascading Style Sheet 级联样式表
表现HTML或XHTML文件样式的计算机语言

CSS基本语法结构

在这里插入图片描述
style标签

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

HTML中引入CSS样式

行内样式

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

内部样式表

<style>
        h1{color: green; }
</style>
复制代码

外部样式表

<head>
  ……
<link href="https://juejin.cn/post/style.css" rel="stylesheet" type="text/css" />
  ……
</head>
复制代码

CSS样式优先级

行内样式>内部样式表>外部样式表
就近原则

基本选择器

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

小结

标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次

优先级：ID选择器>类选择器>标签选择器

层次选择器

在这里插入图片描述

后代选择器 body p{color:darkblue;}
子选择器body>p{color:darkblue;}
相邻兄弟选择器 h1+p{color:darkblue;}
通用兄弟选择器 h1~p{color:darkblue;}

结构伪类选择器

在这里插入图片描述

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;}
复制代码

在这里插入图片描述
使用E F:nth-child(n)和E F:nth-of-type(n)的关键点

E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置

属性选择器

a[id] { background: yellow; } 含有id属性的a元素变黄色
a[id=first] { background: red; } 含有id=first属性的a元素变红色，属性和属性值必须完全匹配才能被选中
a[class*=links] {background: red; } 元素有class属性包含links字符串变红色
a[href^=http] {background: red; } 含有href的a元素并且以http开头变红色
a[href$=png] { background:red; } 含有href的a元素并且以png结尾变红色

总结

在这里插入图片描述

文章版权归作者所有，未经允许请勿转载。

THE END

后端

NetWin SurgeFTP目录遍历漏洞

Zonet无线路由器NAT实现设计缺陷漏洞

挖洞经验 | 看我如何用一美分购买VPS服务和网站空间

网络游戏开发-客户端3（封装按钮按下效果和一个模态对话框）

【PC】价值188元自动加好友营销软件

洛谷P5708 【深基2.习2】三角形面积__C++描述

CSS入门

CSS的概念

CSS基本语法结构

HTML中引入CSS样式

基本选择器

小结

层次选择器

结构伪类选择器

属性选择器

总结