1.css概述(美化网页)
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
定义:选择器名{
属性名:属性值;
属性名:属性值;
,,,
}
注:
1.声明需要使用{}括起来。每个声明以分号结尾
2.一行建议一个声明
3.如果样式的属性值由多个单词组成,则用引号引起来
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div> <div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;"> <div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div> <h3>Look! Styles and colors</h3> <div style="letter-spacing:12px;">Manipulate Text</div> <div style="color:#40B3DF;">Colors <span style="background-color:#B4009E;color:#ffffff;">Boxes</span> </div> <div style="color:#000000;">and more...</div> </div> </body> </html>
2.css的基本使用
2.1.css基本语法
2.1.1. 行内样式——直接写在标签上的样式,在标签上通过style属性定义的样式
2.1.2.内部样式——定义在style标签中的样式,style标签一般设置在head标签中
2.1.3.外部样式——定义在外部css文件中,要通过link标签引入
注:有多重样式时,越精准越优先。(就近原则)
2.2.css注释
/* 注释内容 */
3.css选择器
3.1.基础选择器
3.1.1.通用选择器——选择所有 *
*{
属性名:属性值;
属性名:属性值;
,,,
}
3.1.2.元素选择器——选择指定标签
元素名/标签名 {
属性名:属性值;
,,,
}
3.1.3.ID选择器——选择设置过指定id属性值的元素 #
#id属性值 {
属性名:属性值;
,,,
}
3.1.4.类选择器——选择设置过指定class属性值的元素
.class属性值{
属性名:属性值;
,,,
}
3.1.5.分组选择器——当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔
选择器1,选择器2,...{
属性名:属性值;
}
3.2.组合选择器
3.2.1.后代选择器(派生选择器)——以空格分隔
选择指定元素的所有指定后代元素
选择器 指定元素{
属性名:属性值;
}
3.2.2.子元素选择器——以大于号分隔
选择指定元素的第一代指定元素
选择器 > 指定元素{
属性名:属性值;
}
3.2.3.相邻兄弟选择器——以加号分隔
选择指定元素的下一个指定元素,两者有相同的父元素
选择器 + 指定元素{
属性名:属性值;
}
3.2.4.普通兄弟选择器——以波浪线(~)分割
选择指定元素后面的所有指定元素
选择器 ~ 指定元素{
属性名:属性值;
}