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;
}

CSS层叠样式表01

CSS(Cascading Style Sheets)层叠样式表

相关推荐