前端内容整理(二)

本章内容 CSS

一、css注释

css一般是独立的文件。
注释写法：/*注释内容*/
注释格式：
/*这是首页的css样式文件*/
/*页面通用样式*/
/*顶部导航条样式*/
/*侧边菜单栏样式*/

二、css语法结构

选择器{属性名1：属性值1；
     属性名2：属性值2；
}

三、css的引入方式

1.外部css文件
<link rel="stylesheet" herf="mycss.css">
2.head内style标签内部直接书写css代码

3.标签内部通过style属性直接书写

四、选择器的分类

1.基本选择器

标签选择器:选择所有p标签
    p {
    color:red;
}
-----------------------------------------
id选择器：选择所有id=‘id_user’的标签
    #id_user{
    color:red;
}
-----------------------------------------
(class)类选择器：选择所有class=‘cls’的标签
    .cls{
    color:red
}
-----------------------------------------
通配选择器：选择所有的标签
*{
    color:red
}

2.组合选择器

后代选择器:用空格表示，选择div内的所有span标签
div span{
    color:red;
}
---------------------------------------------------
子代选择器:用>表示,选择div内一个层级的span标签
div>span{
    color:read
}
---------------------------------------------------
毗邻选择器:用+表示，div紧挨着的下一个标签(span)
div + span{
    color:red;
}
----------------------------------------------------
弟弟选择器:用~表示。div下面统计的所有span标签
div ~span{
    color:red;
}
-----------------------------------------------------

3.属性选择器

属性选择器:选择页面上所有具有board属性的标签
[board]{
    color:red;
}
找到具有属性board并且值为‘out’的标签
[board='out']{
    color:red;
}
找到input中具有属性board且值为‘out’的标签
input[board='out']{
    color:red;
}

4.分组嵌套

div,p,span{
    color:red;
}
.c1,#d1,p{
    color:red;
}
.c1 h1{
    color:green;
}
选择器可以组合嵌套使用。

5.伪类选择器

a:link{
    color:red;
}
a:hover{
    color:red;
}
a:active{
    color:red;
}
a:visited{
    color:gray
}
input:focus{
    background-color:red;
}

6.伪元素选择器

p:before{
    content:'AAA';
    color:red;
}
p:after{
    content:'?';
    color:blue;
}
p:first-letter{
    color:red;
    font-size:48px;
}

来源：https://www.cnblogs.com/Ghostant/p/12102818.html