知识点

背景

  • css的定义方法：选择器 { 属性:值; 属性:值; 属性:值;}

    1
    2
    3
    4
    5
    6
    7
    /* css注释 */

    div{ 
        width:100px; 
        height:100px; 
        color:red 
    }

  • 样式引入

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!-- 外联方式 -->
    <link rel="stylesheet" type="text/css" href="css/main.css">

    <!-- 嵌入式 -->
    <style type="text/css">
        div{ width:100px; height:100px; color:red }
    </style>

    <!-- 内联式 -->
    <div style="width:100px; height:100px; color:red ">......</div>

CSS常用文本样式

1
2
3
4
5
6
7
8
9
10
color：设置文字的颜色，如： color:red;
font-size：设置文字的大小，如：font-size:12px;
font-family：设置文字的字体，如：font-family:'微软雅黑'; 字体尽量用英文的
font-style：设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
font-weight：设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height：设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px;
font：同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';
text-decoration：设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-indent：设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px 行高示例图片
text-align：设置文字水平对齐方式，如text-align:center 设置文字水平居中

CSS颜色表示法

1
2
3
# 颜色名表示，比如：red 红色，gold 金色
# rgb表示，比如：rgb(255,0,0)表示红色，其中rgb分别表示红绿蓝，255表示对应的颜色强度最高，0表示对应的颜色强度最低
# 16进制数值表示，比如：#ff0000 表示红色，从左到右每两位对应于rgb中的一位，这种可以简写成 #f00

选择器

标签选择器

1
2
3
4
5
6
7
8
9
/* 通过标签设定页面样式，*/
h1 {
    color:red;
}

/* *表示选择页面上所有的标签 */
* {
    color:blue;
}

id选择器

1
2
3
4
5
6
/* 页面上元素的ID属性不能够重复，定义id名的一般给程序使用，所以不推荐使用id作为选择器。
   定义格式：#id值
*/
#div1 {
    color:green;
}

类选择器

1
2
3
4
5
6
7
/* 页面上元素的CLASS属性不能够重复，是应用最多的选择器
   在CSS中，ID的权重大于CLASS，所以同时通过ID和CLASS对同一个内容进行渲染时，只有通过ID的样式才会生效
   定义格式：.class值
*/
.div1{
    font-family:"Microsoft Yahei";
}

层级选择器

1
2
3
4
5
6
/* 应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突
   定义格式：多个选择器之间用空格间隔
*/
.div1 span{
    font-family:"Microsoft Yahei";
}

组选择器

1
2
3
4
5
6
/* 多个选择器，如果有同样的样式设置，可以使用组选择器。
   定义格式：多个选择器之间用逗号间隔
*/
.div1, span{
    font-family:"Microsoft Yahei";
}

伪类及伪类选择器

1
2
3
4
/* 常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,通过样式在元素中插入内容 */
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';color:"red"}

小知识

  • html可编辑

    1
    2
    # F12 打开开发者模式，在【Console】中输入如下命令即可直接编辑页面
    document.body.contentEditable = true;

  • 补充记忆的脑图：

    CSS