CSS介绍

什么是CSS

CSS就是层叠样式表，定义如何显示HTML元素，当浏览器读到一个样式表，就会按照这个样式来渲染文档

CSS语法

选择器  {属性名：值；属性名：值；...}

 

 

 CSS注释

注释样式：

CSS注释与HTML不一样

HTML：<!--注释内容-->

CSS：/*注释内容*/

注释使用：

CSS应该是一个独立的文件

/*这是XXX首页的CSS样式文件*/

/*页面通用样式*/

/*左侧菜单栏样式*/

CSS引入方式

1.通过link属性，导入外部css文件（推荐使用方式）

2.head内style标签内部直接书写css代码

3.标签内部通过style属性直接书写对应样式（不推荐）

选择器

1.基本选择器

元素选择器

/*标签选择器 元素选择器*/
div {  /*将页面上所有的div标签内部的文本变成红色*/
    color: red;
}

类选择器

/*类选择器     点号*/
.c1 {  /*让所有具有c1类属性值的标签内部文本变成蓝色*/
    color:blue;
}

id选择器

/*id选择器     #号*/
#d1 {  /*将id为d1的标签内部文本内容改成绿色*/
    color: green;
}

通用选择器

/*通用选择器   *号*/
* {  /*页面上所有的标签统一修改样式*/
    color: aqua;
}

2.组合选择器

后代选择器

/* 后代选择器 */
div span {  /*空格表示div内部的span没有层级限制*/
   color: red;
}

儿子选择器

 /* 儿子选择器 */
div > span {  /* '>' 表示div内部的儿子*/
   color: green;
}

毗邻选择器

/* 毗邻选择器 */
div + span {  /* '+' 紧挨着的下一个标签*/
   color: red;
}

弟弟选择器

div ~ span {  /* '~' 同级别下面所有的标签*/
   color: deeppink;
}

3.属性选择器

两种属性：内置属性；自定义属性

/*属性选择器 [] */
[username] {  /*找到页面上所有具有username属性名的标签*/
    background-color: deeppink;
}
        
[username='jason'] {  /*找到页面上属性名是username并且属性值叫jason的标签*/
    background-color: black;
}
        
input[username="jason"] {  /*找到页面上属性名是username并且属性值叫jason的input标签*/
    background-color: aqua;
}

4.分组与嵌套

div ,p, span {
    color: green;
}
.c1,#d1,p {
    color: red;
}
 .c1 h1{ /*找具有c1属性值的标签 后代的h1*/
    color: yellow;
}

5.伪类选择器

a:link {
    color: aqua;    /*未访问的链接*/
}

a:hover {  /*鼠标悬浮*/
    color: black;
}
a:active {  /*点击时候*/
    color: green;
}
a:visited {     /*访问后的链接*/
    color: gray;
}
input:focus {   /*聚焦*/
    background-color: red;
}

6.伪元素选择器

p:first-letter {    /*给首字母设置特殊样式*/
    color: red;
     font-size: 48px;
}
p:before {      /*在每个<p>元素之前插入内容*/
     content: '你好啊';
     color: red;
}
p:after {       /*在每个<p>元素之后插入内容*/
     content: '?';
    color: blue;
}
/*CSS插入的内容，不算文本，不能点击*/