CSS层叠样式表01
CSS(Cascading Style Sheets)层叠样式表
用于修饰HTML标签的样式
CSS注释
一般来说，CSS是一个独立的文件，由于它的内容是修饰HTML标签的样式，为了方便后期的维护和修改，所以我们人为使用注释说明当前样式的是用于修饰什么内容的
单行注释：/*注释文本*/
多行注释：就是在单行注释中换行即可
/*
注释1
注释2
*/
养成习惯
/*这是首页的css样式文件（说明css文件的作用）*/
/*页面通用样式*/
/*顶部导航条样式*/
/*侧边菜单栏样式*/
CSS语法结构
选择器名 {
属性名:属性值;
属性值1:属性值1;
……
属性值n:属性值n
}
CSS三种引入方式
1.外部CSS文件(标准使用方式)
<!--1.外部CSS文件(标准使用方式)-->
<link rel="stylesheet" href="myfirstcss.css">
2.在head标签使用style标签编写CSS代码
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<!--2.在head标签使用style标签书协CSS代码-->
<style>
P {
color: indianred;
}
</style>
</head>
3.标签内部通过style属性直接书写对应的样式(不推荐使用)
<div>
<p style="color: aqua;">君不见,黄河之水天上来,奔流到海不复回</p>
<p>君不见,高堂明镜悲白发,朝如青丝暮成雪</p>
</div>
这三者的优先级为
标签内部style属性 > (head标签中的style标签 > link标签引入外部)
ps：head标签中的style标签 和 link标签引入外部之间的优先视HTML的执行顺序而言，最后执行的优先级高
CSS样式的使用分为两步：
1.查找要修饰的标签
2.设置修饰的内容
CSS选择器
基本选择器：元素选择器、ID选择器、类选择器，通用选择器(不推荐使用)
- 标签选择器
最常见的 CSS 选择器是标签选择器。换句话说，文档的标签就是最基本的选择器。选择器通常将是某个 HTML标签，比如p、h1、div、a，甚至可以是 html 本身
/*将P标签中的文本颜色设置成deepskyblue*/
p {
color: deepskyblue;
}
- ID选择器
ID是指标签的ID名称，ID选择器的命名规则，必须以#开头，加上标签的ID名称
<!--此处是html文件-->
<p id="text">君不见,高堂明镜悲白发,朝如青丝暮成雪</p>
/*此处是css文件*/
/*将id名称为text的元素中的字体加粗*/
#text {
font-weight:bold;
}
- 类选择器
类选择器允许以一种独立于标签的方式来指定样式。类选择器可以单独使用，也可以与其他标签结合使用。命名规则，以.开头，加上类的名称
<!--此处是html文件-->
<div>
<p class="c1">Life is short,you need python</p>
<h1 class="c1">The test was very difficult</h1>
</div>
/*此处是css文件*/
/*将class="c1"的元素中的文本颜色设置成chocolate*/
.c1 {
color: chocolate;
}
ps：类名建议不要用数字开头，有些浏览器不兼容；当前标签中有多个class属性，使用空格分隔
- 通用选择器，用
*表示，表示整个页面的HTML都是用该样式
* {
color:purple;
}
组合选择器：后代选择器、儿子选择器、毗邻选择器、弟弟选择器
- 后代选择器
后代选择器又称为包含选择器，用于修饰某个标签内部中所有的标签(包括级联标签)
<!--此处是html文件-->
<div>
<div>
<!--该p标签的文本颜色是红色-->
<p>Life is short,you need python</p>
</div>
<!--该p标签的文本颜色是红色-->
<p>The test was very difficult</p>
</div>
<p>People can gain knowledge through reading books</p>
/*此处是css文件*/
/*将div标签内部中所有p标签的文本设置为红色*/
div p{
color:red;
}
- 儿子选择器
儿子选择器又称为子元素选择器，与后代选择器相比，儿子选择器只能选择某标签子标签的标签。
当我们不想修饰任意的后代标签，而是希望缩小范围，只选择某个标签的子标签，就可以使用儿子选择器
<!--此处是html文件-->
<div>
<div>
<p>Life is short,you need python</p>
</div>
<!--该p标签的文本颜色是蓝色-->
<p>The test was very difficult</p>
</div>
<p>People can gain knowledge through reading books</p>
/*此处是css文件*/
/*将div标签的子标签p标签的文本设置为blue*/
div p{
color:blue;
}
- 毗邻选择器
选择紧接在当前标签后的标签，且二者有相同父标签
<!--此处是html文件-->
<div>
<div>
<p>Life is short,you need python</p>
</div>
<!--该p标签的文本颜色是绿色-->
<p>The test was very difficult</p>
</div>
<!--该p标签的文本颜色是绿色-->
<p>People can gain knowledge through reading books</p>
/*此处是css文件*/
/*紧急接在div标签后，并跟该div标签具有同一个父标签的p标签的文本颜色为绿色*/
div+p {
color:green;
}
- 弟弟选择器
修饰紧跟在当前标签后，且跟当前标签在同一级所有的标签样式
<!--此处是html文件-->
<div>
<p>The test was so easy</p>
<div>
<p>Life is short,you need python</p>
</div>
<!--该p标签的文本颜色是aquamarine-->
<p>The test was very difficult</p>
<!--该p标签的文本颜色是aquamarine-->
<p>good good study，day day up</p>
</div>
<div>
<p>People can gain knowledge through reading books</p>
</div>
/*此处是css文件*/
/*在div标签后且在同一级的p标签的文本颜色设置为aquamarine*/
div ~ p {
color: aquamarine;
}
属性选择器
修饰所有具有某个属性名的标签
<!--此处是html文件-->
<div>
<!--该p标签的文本颜色是coral，字体大小为12px-->
<p today="thursday">The test was so easy</p>
<div>
<!--该p标签的文本颜色是coral，字体大小为12px-->
<p today="monday">Life is short,you need python</p>
</div>
<!--该span标签的文本颜色是coral，字体大小为12px-->
<span today="friday">The test was very difficult</span>
<!--该p标签的背景颜色是aquamarine，文本颜色是chocolate，字体大小为20px-->
<p today="friday">Life is short,you need python</p>
</div>
<div>
<!--该p标签的文本颜色是white，背景颜色为lightskyblue，字体大小为12px-->
<p today="sunday">People can gain knowledge through reading books</p>
</div>
/*具有today属性的标签文本字体设置为12px，文本颜色设置为coral*/
[today] {
font-size: 12px;
color: coral;
}
/*具有today属性并且属性值叫sunday的标签背景颜色设置为lightskyblue，文本颜色设置为white*/
[today="sunday"] {
background-color: lightskyblue;
color: white;
}
/*具有today属性并且属性值叫friday的p标签背景颜色设置为aquamarine，文本颜色设置为chocolate,字体大小设置成20px*/
p[today="friday"] {
background-color: aquamarine;
color: chocolate;
font-size: 20px;
}
