css样式

css样式由两部分组成，选择符和声明，声明又包括属性和属性值。

一、内部样式

html文件中或标签里面嵌套

<body>
<style>
h1{
    color:red;
}
style>
body>
1
2
3
4
5
6
7

方式一：
将样式单独放到一个文件中，纯css文件
在head标签内文件中引用css文件：

<link rel="stylesheet" type="text/css" href="css/index.css">
1

rel定义关联性，stylesheet表示引入一个样式表
type文件类型是一个css的样式表
href：文件路径

方式二：
单独定义style标签，引入css文件：

<style type="text/css">
    @import url("css文件路径")；
style>
1
2
3

区别：
1、link属于XHTML标签，更久远，@import是css提供的方式，更新
2、link的兼容性好，老浏览器不支持@import
3、link会和页面一起加载，import会等页面全部下载完才被加载。

标签中直接加style属性

1、在head标签内部，外部样式要写到内部样式的上面。（规定）

<head>
<link rel="stylesheet" type="text/css" href="">
<style>
h1 {
    color:red;
}
style>
head>
1
2
3
4
5
6
7
8

2、在css样式中直接加!import优先级最高
3、全部引用时优先级：!import>行内样式>内部样式>外部样式
4、优先级是针对同一个标签的同一个属性来说的

给标签加class属性
class属性定义css时要加.

<head>
<style>
.ibm{
background:red
}
style>
head>
<script>
<div class="ibm">元素</div>
script>
1
2
3
4
5
6
7
8
9
10

一个class属性中引用了多个css样式，是有先后顺序的，不过是按照在

html中定义id属性，style中定义css时用#开头
id具有唯一性，一个id只能对应一个标签，一个标签只能定义一个id

一般用于清理整个页面默认样式，放在style开头，方便后续自己定义

<style>
*{
margin:0;
padding:0;
}
style>
1
2
3
4
5
6

多个标签有相同的css样式时，css中定义时用逗号隔开
在这里插入图片描述

在css中按照辈分关系从左到右写，用空格隔开。
选择顺序：从右到左，先匹配所有孩子，再匹配父亲

<style>
div p {

}
style>
<script>
<div> 
<p>1111</p>
</div>
script>
1
2
3
4
5
6
7
8
9
10

针对a标签来说的
a:link 链接初始状态
a:visited 链接访问之后的状态
a:hover 鼠标移上去之后状态
a:active 鼠标激活的状态，点击的一刻

css定义时必须遵循这个顺序：

如果不需要全部定义，可以先定义一个总体样式，在特殊定义其他
a{
…
}
a:hover{
…
}

id选择器权重>class>标签元素
包含选择器权重是所有选择器之和，有两个标签选择器组成的样式，权重大于一个标签选择器

在这里插入图片描述

.box>ul 与.box紧挨着的子代ul

相关阅读:
全网最详细的Gephi安装与使用教程
【springboot单元测试，集成测试】
Delphi 开发so库，Delphi 调用SO库
【Lilishop商城】No1-1.业务了解+划分各模块逻辑
解决Java获取数据库日期数据问题：格式为【YYYY/MM/DD】，获取的格式却转换为【YYYY-MM-DD hh:mm:ss】
底物多肽Phe-Gly-His-Phe(NO2)-Phe-Ala-Phe-OMe、50572-79-7
java SE 基础
Java 并发编程解析 | 每个Java Developer都应该知道的关于并发编程的那点事？
Java代码审计——URL 跳转漏洞
基于libcurl+libopenssl开源库编译出curl下载工具及代码集成curl功能

原文地址：https://blog.csdn.net/CapejasmineY/article/details/126173422