此部分是CSS部分基础的导入内容，后期学习常用，注意理解与使用！
1.基本书写
1-1链入式【引入外部css文件】
<head >
<link href=”路径” type=”text/css” rel=”stylesheet”/>
</head>
下方均是css代码书写常用的基本方式
1-2行内式
<标签名 style=”属性1：属性值1；属性2：属性值2”></标签名>1-3内嵌式
<head>
<title>标题</title>
<!-- 内嵌式写css -->
<style type="text/css">
选择器{
属性1：属性值1；
属性2：属性值2；
}
</style>
</head>
代码示例：
<head>
<title>Document</title>
<!-- 内嵌式写css -->
<style type="text/css">
h1{
color: blue;
font-size: 40px;
}
</style>
<!-- 引入是写css -->
<link rel="stylesheet" href="../css3_test/c3_test1.css" type="text/css">
</head>
<body>
<h1>测试文字</h1>
<p>测试文字2</p>
<!-- 行内式写csss -->
<div style="color:aqua;font-size: 55px;">测试行内式写法css测试文字</div>
</body>
注意：此处代码的路径引用问题，../是指上级文件夹中某个的css文件，在上级的多少级就要有几个../,而./指同级文件夹中，以上均以HTML文件为中心，判断路径
解释：此处意思是，c3文件夹中的c3_p30.html文件要引入上一级css3_test文件夹中的c3_test1.css文件
1-4选择器
标记选择器
标记名{
属性1：属性值1；
属性n:属性n;
}
类选择器
.类名{
属性1：属性值1；
属性n:属性n;
}
配合class="类名"使用
id选择器
#id名{
属性1：属性值1；
属性n:属性n;
}
配合id="id名"使用
通配符选择器
*{
属性1：属性值1；
属性n:属性n;
}
注意：上方此选择器最好不要用，设置样式有些许限制，不方便选择具体标签使用，用的少！
2.复合写法
2-1后代选择器
格式：父标签 子标签{属性：属性值；} 给不同位置的标签设置格式
<style>
div span {
color: red;
}
</style>
<span> span 标签</span>/*变为红色的字*/
<div>/*父标签*/
<span>这是 div 的儿子 span</span >/*变为红色的字，子标签*/
</div>
2-2子代选择器
格式：父选择器 > 子选择器 { CSS 属性} 注意是最近的子代！！ 给父标签内的某一级的子标签设置格式使用
<style>
div > span {
color: red;
}
</style>
<div>
<span>这是 div 里面的 span</span>/*变为红色*/
<p>
<span>这是 div 里面的 p 里面的 span</span>
</p>
</div>
2-3并集选择器
格式：选择器1，选择器2，选择器n{css属性} 给多个不同标签内容设置格式使用
<style>
div,
p,
span {
color: red;
}
</style>
<div> div 标签</div>
<p>p 标签</p>
<span>span 标签</span>
2-4交集选择器
格式：选择器1.选择器2{css} 同时满足多个条件
p.box {
color: red;
}
<p class="box">p 标签，使用了类选择器 box</p>
<p>p 标签</p>
<div class="box">div 标签，使用了类选择器 box</div>
3.伪类
格式：选择器：伪类选择器{css} 对某个元素的某个状态设置样式
<style>
a:hover {<!--鼠标悬停-->
color: red;
}
.box:hover {
color: green;
}
</style>
<a href="#">a 标签</a>
<div class="box">div 标签</div>
伪类状态
特别注意：设置4个状态，必须按照LVHA顺序【下表】
扫一扫
1792
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
